码迷,mamicode.com
首页 > Web开发 > 详细

ajax 介绍,ajax的请求通过js中的 xmlHttpRequest对象完成

时间:2017-12-02 17:37:51      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:user   char   发送   javascrip   syn   on()   cut   tin   java   

ajax (Asynchronous JavaScript And XMl)  异步JavaScript和xml,传输的数据是xml,现在是json数据,

使用JavaScript与

同步交互:发出一个请求,等待服务器响应结束,才能发出第二个请求

异步交互:发出一个请求,无需等待服务器响应解除,就可以发出第二个请求。

ajax的特点:异步,和局部刷新

json对象,值的都是字符串,在js的对象,

如:在python语言和PHP语言传输数据,是需要一个解析器的,json字符串存的就是字符串,不需要解析器,

 

优点:局部刷新性能高,异步请求,

缺点:不适合所有场景,有时用到同步交互,

  请求次数过多,增大服务器压力,

  ajax是使用JavaScript技术实现的,还需要处理浏览器的兼容问题,

 

ajax的核心是在JavaScript中添加一个  xmlHttpRequest对象,所有的请求都是xmlHTTPRequest对象来完成的,

jquery 封装了JavaScript了,可以更快捷的实现ajax请求

ajax代码要写在前端页面中,

下面以实例讲解

在url 文件中,创建index api

from django.conf.urls import url
from django.contrib import admin

from app01 import views
urlpatterns = [
    url(r^admin/, admin.site.urls),
    url(r^index/, views.index),  -------index api ,
]

在settings文件中配置静态文件的路径

STATIC_URL = /static/

STATIC_ROOT = os.path.join(BASE_DIR,static)

 

在views文件文件,创建视图函数index,

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):
    import time
    time.sleep(5)#等待5秒,才能看到请求的结果,这是同步



    return HttpResponse(ajax  !!!!)

在template模板中创建index页面,应用bootstrap 和jquery,

过程:

1.在index页面输入内容后,有get和post两种方法向后端发送数据,在ajax里,有需要的几个参数,针对不同的情况

    url是必填的,是要谁发送请求,

    type 是发送request的方法,默认是GET方法,可以不写,但如果是POST方法,就要标明了

    data: 是要发送的数据,以json的格式发,

    success:是回调函数,处理拿到后端或者服务器返回的数据,用参数接收,接收到的是json数据类型,所以要把接收的数据进行解析,

    error:是当请求或者返回发生错误的时候,用,

    complete:是不管正确与否,都要执行的函数

    statusCode: 是返回状态码,一个状态码对应一个函数,如: 是404 的错误,就可以执行一个函数,

2.当发送到url 参数对应的地址ajaxHandle后,就开始执行视图函数ajaxHandle,视图函数给出响应和判断,最终返回到页面,进行显示

 

发送的地址是ajaxHandle视图函数,由它执行处理请求,

{% load staticfiles %}  ----------引用静态文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="{% static ‘bootstrap/jquery-3.2.1.js‘ %}"></script>

</head>
<body>

用户名:<input type="text">

<button>Ajax提交</button>

</body>

</html>

ajax 的get请求  ,是input框触发事件,包括发生错误的时候,触发error函数执行

{#    ajax的get请求#}
    $(".user").blur(function () {

        var user=$(this).val();

        ajax语法,在函数内,
        $.ajax({
                        参数url 要发送到哪里
            url:‘/ajaxHandle/‘,
                        ajax 的发送请求,不写,是默认get请求
            type:‘GET‘,
                    date 是ajax给服务端或者后端发送的数据,要用json的数据格式
            date:{"user":user},
                         回调函数,ajax发送完数据后,,就要处理后端或者服务器接收到的数据,就要用到回调函数,这就是异步,
                          success 里的date参数 就是接收到的json字符串(只有json可以在网络间传输,),所以接收到后需要解析成js对象
           date 数据就是视图函数传的返回值, 
       success:function (date) { date=JSON.parse(date); 拿到数据开始判断,不正确,就给用户提示下 }, 如果请求数据是错误的,或者是没有请求到,就没必要处理这些数据,触发error函数执行         
      error:function(jpxmlHttpresponse,textStatue,err){
          #请求都是xmlHTTPRequest对象来完成的,
          #textstatue ,就是请求完成的状态,
          #err,底层通过throw抛出的异常对象,值与错误类型有关,
      },
      complete是就像python的finally,try是正常执行的代码,except 是错误的时候执行的代码,finall就是不管正确错误都要执行的代码,       
      complete:function(jpxmlHttpresponse,textstatue){
      
      },

      statusCode 是状态码,是哪个状态码,就执行哪个函数
      statusCode:{
       "403":function(jpxmlHttpresponse,textstatus,err{
          console.log(argument)
          }
      },
       "404":function(){
        
        }
}) })

ajax的post请求,是button触发事件,与form表单请求一样,都会被forbidden掉,

{#  ajax的post请求,会被forbidden .#}

    $("button").click(function () {
        $.ajax({
            url:"/ajaxHandle/",
            type:"POST",
            data:{"user":"egon"},
            success:function () {
                alert(333)
            }
        })
    })

ajax发送的请求要有视图函数来处理ajaxHandle。

def index(request):
    # import time
    # time.sleep(5)#等待5秒,才能看到请求的结果,这是同步



    return render(request,index.html)


def ajaxHandle(request):

    #ajaxHandle 是index  发送请求要调用的函数,所以就要判断是那种方式的请求
    if request.method =="POST":
        obj = HttpResponse("ok")
        obj.status_code=404

        return obj

    print(ajax.....)
    #GET是发送的方法,get()是去字典里的值
    user = request.GET.get("user")#从页面中request里取出前端传来的数据

    #user 与数据库的数据进行判断,
    # user.objects.filter(username=user)
    ret = {"flag":False}
    if user =="yuan":
        ret["flag"]=True



    return HttpResponse(json.dumps(ret))#HttpResponse必须返回的是一个实例

 

ajax的另一种发送方式:

$.ajax("/ajaxHandle/"){   },url是必填的

ajax的另一种流程:

1.发送请求,

2.server接收请求,

3.server处理数据

4.server端返回响应,

5.ajax接收数据

如果5个步骤都顺利进行(返回200 OK)触发success函数执行,

 

 

 

 

 

 

 

 

 

 

 

 

 

def index(request):
# import time
# time.sleep(5)#等待5秒,才能看到请求的结果,这是同步



return render(request,‘index.html‘)


def ajaxHandle(request):

#ajaxHandle index 发送请求要调用的函数,所以就要判断是那种方式的请求
if request.method =="POST":
obj = HttpResponse("ok")
obj.status_code=404

return obj

print(‘ajax.....‘)
#GET是发送的方法,get()是去字典里的值
user = request.GET.get("user")#从页面中request里取出前端传来的数据

#user 与数据库的数据进行判断,
# user.objects.filter(username=user)
ret = {"flag":False}
if user =="yuan":
ret["flag"]=True



return HttpResponse(json.dumps(ret))#HttpResponse必须返回的是一个实例

ajax 介绍,ajax的请求通过js中的 xmlHttpRequest对象完成

标签:user   char   发送   javascrip   syn   on()   cut   tin   java   

原文地址:http://www.cnblogs.com/gyh04541/p/7954490.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!