本文会介绍三种ajax的请求方式：

• 原生的ajax请求
• JQuery的ajax的请求
• 伪造ajax请求

在一个网站上看到ajax是什么的一些说法：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

在使用form表单提交数据与后台进行交互的时候，是会刷新整个页面的，也就是会重新拉取整个页面的数据。而ajax做的就是局部刷新。只刷新部分页面，而不是刷新整个页面。

所有的实例以python3.6，django-1.10.8版本！

原生ajax：

ajax是基于现有的internet标准，并联合使用它们。包括以下的内容：

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式)

使用ajax：

　　ajax的在使用中5个步骤：

1. 创建XMLHttpResquest对象。
2. 链接服务器
3. 发送数据
4. 设定回调函数
5. 在回调函数中对服务器返回的数据进行处理

下面的一些ajax的函数，用于在上面的五个步骤中使用。

创建了对象之后，要向服务器发送数据。open()函数用于创建ajax客户端与服务器之间的连接。send()函数用于向服务器发送数据。setRequestHeader()用于设置向服务器发送数据时的请求头。----void open(String method,String url,Boolen async)    用于创建请求    参数：       method： 请求方式（字符串类型），如：POST、GET、DELETE...       url：    要请求的地址（字符串类型）       async：  是否异步（布尔类型）若使用ajax请求，必须为异步，就是值为true。----void send(String body)    用于发送请求     参数：        body： 要发送的数据（字符串类型）----void setRequestHeader(String header,String value)    用于设置请求头     参数：        header： 请求头的key（字符串类型）        vlaue：  请求头的value（字符串类型服务器接收ajax发送的数据之后，需要返回数据给ajax客户端。 ----String getAllResponseHeaders()    获取所有响应头     返回值：        响应头数据（字符串类型） ----String getResponseHeader(String header)    获取响应头中指定header的值     参数：        header： 响应头的key（字符串类型）     返回值：        响应头中指定的header对应的值abort()方法终止请求。XMLHttpRequest对象的主要属性：---Number readyState   状态值（整数）    详细：      0-未初始化，尚未调用open()方法；      1-启动，调用了open()方法，未调用send()方法；      2-发送，已经调用了send()方法，未接收到响应；      3-接收，已经接收到部分响应数据；      4-完成，已经接收到全部响应数据；---Function onreadystatechange   当readyState的值改变时自动触发执行其对应的函数（回调函数） ---String responseText   服务器返回的数据（字符串类型） ---XmlDocument responseXML   服务器返回的数据（Xml对象） ---Number states   状态码（整数），如：200、404... ---String statesText   状态文本（字符串），如：OK、NotFound...

通过一个简单的django实例，说明原生ajax的用法：

 视图函数如下：

from django.shortcuts import render, HttpResponse# Create your views here.import jsondef ajax1(request):    return render(request, "ajax1.html")def ajax1_json(request):    print(request.POST)    msg = {
   "code": 200, "msg": "What a fuck!"}    return HttpResponse(json.dumps(msg))

简易的前端代码如下：

    
              
第一行内容
        

上面的代码正常允许需要注释掉django中间件中有关csrf的认证，下面我们在ajax中加入csrftoken，但是引入了jquery。

    
                 
第一行内容
        

 

jQuery ajax请求

jQuery封装了原始的ajax请求，因此使用jQuery请求会更方便一点。其模板文件如下：

    
              
第一行内容
            

视图函数如下：

def jquery_ajax(request):    if request.method == "GET":        return render(request, "jquery_ajax.html")    elif request.method == "POST":        msg = {"code": 200, "msg": "What a fuck!"}        return HttpResponse(json.dumps(msg))

由以上的模板文件，可以发现JQuery中ajax请求，基本格式如下：

$.ajax({                url: "jquery_ajax",   #ajax要传入的url                type: "POST",        #传递数据的类型                data: {"user":"root", "password":"123456"}, # 要传递的数据                dataType: "json",   #接收数据的类型                /*dataType制定接受后端返回数据的格式，这个例子中如果不使用这个参数，接受的data数据，可以使用JSON.parse转换为json对象*/                success: function (data) {  #服务端响应成功后的回调函数                    console.log(data);                    $("h1").text(data.msg);                }            })

伪造ajax

可以利用html标签中的iframe标签伪造ajax请求，iframe标签会自动向后台提交数据。

iframe的前端代码如下：

视图函数如下：

def ajax1_json(request):    print(request.POST)    msg = {
   "code": 200, "msg": "What a fuck!"}    return HttpResponse(json.dumps(msg))def wzajax(request):    return render(request, "wzajax.html")

上面的三种ajax请求，一般若是传递的数据是文件，图片等一般数据优先使用iframe伪造ajax请求，然后使用jQuery，最后使用原生ajax。

iframe的标签是作为一个html文本嵌套在原html标签中的。iframe中的值，是服务端返回的值。注意在上面前端代码中，查找jframe标签值得方法。

利用三种ajax传递一张图片。

用三种方式上传一张照片，用iframe的方式实现预览的功能，前端代码如下：

    
                      
      
        
               
       上传    
      
    
      
    
      
        
               
           
      
    
    
          
      
        
               
               
         
           
      
    
          
      
    

对应的视图函数如下：

def upload(request):    if request.method == "GET":        return render(request, "upload.html")    elif request.method == "POST":        username = request.POST.get("username")        print("username")        file1 = request.FILES.get("file1")        print(file1)        img_path = os.path.join("static/img/", file1.name)        with open(img_path, "wb") as f:            for item in file1.chunks():                f.write(item)        msg = {
   "code": 200, "img_msg": img_path}        return HttpResponse(json.dumps(msg))