Py006-02-01ajax

什么是ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。使用Javascript语言与服务器进行异步交互，传输的数据为XML。但现在广泛使用的是JSON格式.

  • 同步交互：客户端form表单提交，需等待服务器响应结果,页面是停滞的。
  • 异步交互：客户端发出一个ajax请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

前端的起源就是ajax的出现，ajax之前的程序员们绞尽脑汁想出jsonp的形式，来提升用户体验(也就是局部更新,但jsonp只支持get请求)。

AJAX优点

  • AJAX使用XMLHttpRequest对象向服务器发送异步请求；
  • AJAX请求无须刷新整个页面；

ajax的技术实例

  • 注册账号时，账号是否注册的检查提升
  • 软件搜索栏里信息热词(用jsonp也是可以的如百度)

ajax实战

请自行创建django实例,同时注释掉settings里的csrf限制

urls.py

1
2
3
4
5
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'index/',views.index)
]

views.py

1
2
3
4
5
6
7
8
9
10
11
from django.shortcuts import render,HttpResponse

def index(request):
    print(request.method)
    if request.method=='POST':
        print(request.POST)
        aa = request.POST.get('aa')
        bb = request.POST.get('bb')
        return HttpResponse('{"status":0,"msg":"hahaha"}')
    else:
        return render(request,'index.html')

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
<div>
    <form action="">
        <span>aa:</span><input type="text" name="aa" value="aa" id="aa"> <br>
        <span>bb:</span><input type="text" name="bb" value="bb" id="bb"> <br>
        <input type="submit" value="提交">
    </form>
    <button id="btn1">ajax1</button>
</div>
<script>
    $(function(){
        $('#btn1').on('click',function(){
            $.ajax({
                url:'',
                type:'post',
                data:{
                    aa:$('#aa').val(),
                    bb:$('#bb').val(),
                },
                success:function(res){
                    console.log(res)
                },
                error:function(err){
                    console.log(err)
                }
            })
        })
    })
</script>
</body>
</html>

文件上传

一、请求头ContentType

ContentType指的是请求体的编码类型，常见的类型共有3种：

  1. application/x-www-form-urlencoded
    这应该是最常见的 POST 提交数据的方式了。浏览器的原生

表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

1
2
3
4
5
6
7
8
9
10
11
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

'''
使用chrome开发模式打开Network标签
点击view source!!!
点击view source!!!
点击view source!!!
格式如下
user=aa&age=18
'''

  1. multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让

表单的 enctype 等于 multipart/form-data。直接来看一个请求示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 –boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867 查看。

这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。

上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生

表单也只支持这两种方式（通过 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。

随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

1
2
3
4
该类型的文件服务端获取在
request.FILES.get('文件字段')
非文件字段依然在 
request.POST里
  1. application/json(仅ajax支持)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$.ajax({
    url:'',
    type:'post',
    contentType:'application/json',
    data:{
        a:1,
        b:2
    },
    success:function(){}
})

contentType:'application/json'
实际是把data数据序列号传递给服务器
JSON.stringify({a:1,b:2})
请求体如下：
{"a":1,"b":2}
此时服务端的request.POST是个字典{"a":1,"b":2}

如果不设置contentType默认是 urlencode
数据给服务器的格式如下
a=1&b=2
此时服务端的request.POST是个空字典
requets.body 里内容是{"a":1,"b":2}字符串  需要你自己进行反序列化

application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得我几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

基于form表单的文件上传

模板部分

1
2
3
4
5
<form action="" method="post" enctype="multipart/form-data">
      用户名 <input type="text" name="user">
      头像 <input type="file" name="avatar">
    <input type="submit">
</form>

视图部分

1
2
3
4
5
6
def index(request):
    print(request.body)   # 原始的请求体数据
    print(request.GET)    # GET请求数据
    print(request.POST)   # POST请求数据
    print(request.FILES)  # 上传的文件数据
    return render(request,"index.html")

基于Ajax的文件上传

模板

如果上传文件的内容需要设置两个参数和使用一个FormData对象提交

  • processData: false // 不处理数据
  • contentType: false // 不设置内容类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form>
      用户名 <input type="text" id="user">
      头像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>
<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData();
        formdata.append("user",$("#user").val());
        formdata.append("avatar_img",$("#avatar")[0].files[0]);
        $.ajax({

            url:"",
            type:"post",
            data:formdata,
            processData: false ,    // 不处理数据
            contentType: false,    // 不设置内容类型

            success:function(data){
                console.log(data)
            }
        })
    })
</script>

视图

1
2
3
4
5
6
7
8
9
def index(request):
    if request.is_ajax():
        print(request.body)   # 原始的请求体数据
        print(request.GET)    # GET请求数据
        print(request.POST)   # POST请求数据
        print(request.FILES)  # 上传的文件数据
        file_obj=request.FILES.get("avatar") # 获取指定上传文件内容
        return HttpResponse("ok")
    return render(request,"index.html")

检查浏览器的请求头：

1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

$.ajax()参数

$.ajax()方法是jQuery最底层的Ajax实现。它的结构为：$.ajax(options)

该方法只有一个参数，但是这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有的参数都是可选的。常用参数如下：

1.url

要求为String类型的参数，（默认为当前地址）发送请求的页面。

2.type

要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout

要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async

要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache

要求为Boolean类型的参数，默认为true（当dataType为Script时，默认为false），设置false将不会从浏览器缓存中加载请求信息。

6.data

要求为Object或String类型的参数，发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。get请求中将附加在URL后。防止这种自动转换，

可以查看processData选项。对象必须为key/value格式，例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如：

1
{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType

要求为String类型的参数，预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包的mine信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

1
2
3
4
5
6
7
8
9
10
11
xml：返回XML文档，可用jQuery处理。
 
　　html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
 
　　script：返回纯文本javascript代码。不会自动缓存结果，除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
 
　　json：返回JSON数据。
 
　　jsonp:JSON格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
 
　　text：返回纯文本字符串。

8.beforeSend

要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是唯一的参数。

1
2
3
4
5
function(XMLHttpRequest){
 
　　　　this;//调用本次ajax请求时传递的options参数
 
　　}

9.complete

要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

1
2
3
4
5
function(XMLHttpRequest,textStatus){
 
　　　　this;    //调用本次ajax请求时传递的options参数
 
　　}

10.success

要求为Function类型的参数，请求成功后调用的回调函数

11.error

要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。ajax事件函数如下：

12.contentType

要求为String类型的参数，当发送信息至服务器时。内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

13.dataFilter
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataTYpe参数。函数返回的值将由jQuery进一步处理。

1
2
3
4
5
6
7
function(data,type){
 
　　　　//返回处理后的数据
 
　　　　return data;
 
　　}

14.global

要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart和ajaxStop可用于控制各种ajax事件。

15.ifModified

要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

16.jsonp

要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分，例如{jsonp:’onJsonPLoad’}会导致将”onJsonPLoad=?”传给服务器。

17.username

要求为String类型的参数，用于响应HTTP访问认证请求的用户。

18.password

要求为String类型的参数，用于响应HTTP访问认证请求的密码。

19.processData

要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲而非字符串）以配合默认内容类型”application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

20.scriptCharset

要求为String类型的参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

AJAX请求如何设置csrf_token

方式1

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "fuyong",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

　　

方式2

通过获取返回的cookie中的字符串 放置在请求头中发送。

注意：需要引入一个jquery.cookie.js插件。（插件下载）

1
2
3
4
5
6
7
8
9
$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrf_token，并设置ajax请求头
  data: {"username": "fuyong", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

　

或者用自己写一个getCookie方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。

1
2
3
4
5
6
7
8
9
10
11
12
function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
 
$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

更多细节详见：Djagno官方文档中关于CSRF的内容

axios

由于现在前后端分离所以新项目基本都是vue/react/angular

所以几乎项目里使用的ajax库是—— axios

axios具体配置请参考

参考链接