一、AJAX

1.1 概述

AJAX即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的新方法，包括: HTML 、CSS, JavaScript、DOM等以及最重要的XMLHttpRequest。

使用AJAX技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载整个页面，这使得程序能够更快地回应用户的操作。

XMLHttpRequest（XHR）对象是AJAX的核心对象，它负责发送请求并接收服务器返回的数据。

AJAX不能称为一种技术，它是多种技术的综合产物。

同步处理指的是当一个操作发起后，必须等待该操作完成后才能进行下一步操作。在 JavaScript 中，同步处理通常是指阻塞当前线程，直到操作完成并返回结果。

异步处理则是指当一个操作发起后，不需要等待该操作完成就可以进行下一步操作。在 JavaScript 中，异步处理通常是指使用回调函数或 Promise 对象来处理异步操作的结果。

回调函数是 JavaScript 中的一个重要概念。它是一种函数，可以作为参数传递给另一个函数，并在主函数完成后被调用。回调函数通常用于处理异步操作的结果，例如从服务器获取数据或处理用户输入。当异步操作完成后，JavaScript 引擎会调用回调函数来处理结果，而不是等待操作完成再继续执行下一步操作。

1.2 XMLHttpRequest对象

XMLHttpRequest（XHR）对象是浏览器提供的一种能够与服务器进行交互的 API，它可以通过 JavaScript 发送 HTTP 请求和接收 HTTP 响应，从而实现异步数据传输。

XMLHttpRequest 对象最初是由 Microsoft 开发的，后来被 W3C 标准化，并成为浏览器端 AJAX 技术的核心。

1.3 AJAX请求六部曲

**第一步：**由HTML元素的事件触发AJAX请求，如按钮的单击事件，页面加载事件等；

**第二步：**创建XMLHttpRequest对象

创建XMLHttpRequest对象的浏览器兼容性写法如下：

// 标准浏览器和 IE7+
if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();
}
// IE6
else if (window.ActiveXObject) {var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

**第三步：**调用XHR对象的open()方法用于初始化HTTP请求，open()方法的语法结构为：

XMLHttpRequest.open(method, url[, async[, user[, password]]])

其中：

● method表示要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE等

● url表示要向其发送请求的服务器的URL

● async表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到响应前不会返回

● user 代表用户名，用于认证用途；默认为 null

● password 代表密码，用于认证用途，默认为 null

**第四步：**调用XHR对象的send()方法发送HTTP请求，send()方法的语法结构是：

XMLHttpRequest.send([body])

如果请求方法是GET 或者 HEAD，则应将请求主体设置为 null

**第五步：**服务器接收并且处理请求，同时响应信息到客户端

**第六步：**调用XHR对象的onreadystate事件属性，并且在客户端正确接收完成服务器响应后通过JavaScript完成DOM节点的刷新，onreadystatechange事件属性的语法结构是：

XMLHttpRequest.onreadystatechange = callback;

因为只有在客户端正确接收完成服务器响应后才进行DOM节点的刷新，所以必须要获取XHR对象的状态：

● readyState

readyState属性表示当前 XMLHttpRequest 对象的状态，其值可能为：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法
1	OPENED	open() 方法已经被调用
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得
3	LOADING	正在接收数据；responseText 属性已经包含部分数据
4	DONE	数据接收已完成

其语法结构为：

unsigned short XMLHttpRequest.readyState

● status

status属性将返回 XMLHttpRequest 响应中的数字状态码，其语法结构为：

unsigned short XMLHttpRequest.status

● statusText

statusText属性将返回由服务器响应的String 类型的状态文本信息，例如 OK 表示成功、Not Found 表示未找到、Internal Server Error 表示服务器内部错误等，其语法结构为：

DOMString XMLHttpRequest.statusText

● responseText

responseText属性返回XMLHttpRequest请求中由服务器返回的响应的文本内容，通常是一个字符串，其语法结构是：

DOMString XMLHttpRequest.responseText

● setRequestHeader()

setRequestHeader()方法用于设置HTTP的请求头，其语法结构为：

XMLHttpRequest.setRequestHeader(header, value)

该方法必须在 open() 方法和 send() 之间调用

如：

xhr.setRequestHeader("Authorization", "Bearer your-token");
xhr.setRequestHeader('X-CSRFToken','MhsYrtIj29PwEknnP2cjnXXyVpkAKeDdmoIjxTwH5bbPLfc3MKAAnnqqFzEWkIqS');

1.4 图解AJAX请求步骤

二、jQuery与AJAX

2.1 jQuery.get()

jQuery.get()方法用于向服务器发送 GET 请求并获取数据，其语法结构是：

jQuery.get(url [, data] [, success] [, dataType])

其中：

● url参数表示请求的 URL

● data参数表示要发送的数据

● success参数表示请求成功后的回调函数

● dataType参数表示服务器返回的数据类型，可选值有：xml、 json、script、text、html

2.2 jQuery.getJSON()

jQuery.getJSON()方法用于向服务器发送 GET 请求并获取 JSON 数据。其语法结构是：

jQuery.getJSON(url [, data] [, success])

其中：

● url参数表示请求的 URL

● data参数表示要发送的数据

● success参数表示请求成功后的回调函数

2.3 jQuery.post()

jQuery.post()方法用于向服务器发送 POST 请求并获取数据。其语法结构是：

jQuery.post(url [, data] [, success] [, dataType])

其中：

● url参数表示请求的 URL

● data参数表示要发送的数据

● success参数表示请求成功后的回调函数

● dataType参数表示服务器返回的数据类型，可选值有：xml、 json、script、text、html

2.4 jQuery.ajax()

jQuery.ajax()方法用于向服务器发送 HTTP 请求并获取数据。其语法结构是：

jQuery.ajax({url: url,method: type,data: data,dataType: dataType,headers:{HTTP请求头的名值对},beforeSend:function(xhr,settings){//请求发送之前执行的操作，如身份验证或设置请求头等},success: function(data,textStatus,xhr) {// 请求成功后的回调函数},error: function(xhr, texStatus, error) {// 请求失败后的回调函数},complete:function(xhr,textStatus){// 请求完成后触发的回调函数}
});

三、Django使用AJAX

3.1 请求类型

● GET请求

要发送GET请求时，可以通过jQuery.get()或者jQuery.getJSON()方法实现

● POST请求

要发送POST请求时，可以通过jQuery.post()或者jQuery.ajax()方法实现

● PUT请求

要发送PUT请求时，可以通过jQuery.ajax()方法实现

● PATCH请求

要发送PATCH请求时，可以通过jQuery.ajax()方法实现

● DELETE请求

要发送DELETE请求时，可以通过jQuery.ajax()方法实现

3.2 PUT与PATCH的区别

PUT请求和PATCH请求都是用于更新资源的HTTP方法，但它们之间有一些区别。

PUT请求用于完全替换资源，即客户端提供完整的更新后的资源，服务器用该资源完全替换原始资源。如果某些属性未包含在该资源中，则这些属性将被删除。

PATCH请求用于部分更新资源，即客户端仅提供要更新的资源，服务器来更新资源。PATCH请求不需要提供完整的资源，只需要提供要更改的属性及其新值。

因此，PUT请求用于完全替换资源，而PATCH请求用于部分更新资源。

3.3 接收及响应JSON

3.3.1 接收JSON

当发送GET或POST类型的AJAX时，可以直接在服务器端通过request.GET或request.POST的方式获取到相关的的提交值。

而PUT、PATCH和DELETE请求通常将信息放在请求体内，因此要使用request.body属性来获取请求正文中的原始数据。

在Django中，请求正文中的数据通常是以字节字符串的形式提供的，所以先需要使用decode()方法将其转换为字符串，然后使用JSON解析器将其转换为Python字典（前提条件：数据必须以JSON字符串格式发送）。

接收PUT、PATCH及DELETE提交的JSON字符串数据四部曲：

第一步：通过request.body获取请求正文的原始数据

第二步：通过string对象decode()方法将字节码转换为字符串

第三步：通过Python中json模块的loads()方法将字符串转换为字典

第四步：通过字典的相关方法获取数据

示例代码如下：

data = json.loads(request.body.decode('utf-8'))
username = data.get('username')
password = md5(data.get('password'))
age = data.get('age')
sex = data.get('sex')

3.3.2 响应JSON

Django在响应JSON时分为两种情况：

第一种

对于Django中的AJAX请求，无论何种请求方式，如果响应信息为Python中的list或dict类型的数据，可以直接通过JsonResponse对象或HttpResponse进行返回，如：

context = {'status':200,'message':'OK',
}
return JsonResponse(context)

members = [{"id": 15, "username": "MySQL", "age": 20, "sex": False}, {"id": 16, "username": "Oracle", "age": 21, "sex": True}, {"id": 17, "username": "Java", "age": 25, "sex": False}, 	{"id": 18, "username": "Python", "age": 21, "sex": False}
]return JsonResponse(members,safe=False)

第二种

如果响应的信息为QuerySet且迭代对象为模型实例时，应使用serializers类来实现：

serializers类位于django.core模块中：

from django.core import serializersdata = serializers.serialize(format, queryset, **options)

deserialize()方法是用于将序列化后的数据反序列化为Django模型实例。它可以将JSON、XML和其他格式的数据反序列化为Django模型实例，其语法结构为：

serializers.deserialize(format, data)

如果响应的信息为QuerySet且迭代对象为dict对象时，可以直接使用JsonResponse或者HttpResponse对象返回。

3.4 json模块

在Python中，json模块提供了一组用于编码和解码JSON数据的工具。

Python中，可以使用内置的json模块来处理JSON数据。

import json

json.dumps()方法用于将Python对象序列化为JSON格式的字符串，其语法结构是：

json.dumps(obj)

示例代码如下：

obj = {"name": "John", "age": 30, "city": "New York"}
str = json.dumps(obj)
print(str) # 输出：{"name": "John", "age": 30, "city": "New York"}

json.loads()方法用于将JSON格式的字符串反序列化为Python对象，其语法结构是：

json.loads(str)

示例代码如下：

str = '{"name": "John", "age": 30, "city": "New York"}'
obj = json.loads(str)