【Python】AJAX

一、AJAX

1.1 概述

AJAXAsynchronous Javascript And XML(异步JavaScriptXML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的新方法,包括: HTMLCSS, JavaScriptDOM等以及最重要的XMLHttpRequest

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

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

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

在这里插入图片描述

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

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

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

1.2 XMLHttpRequest对象

XMLHttpRequestXHR)对象是浏览器提供的一种能够与服务器进行交互的 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 方法,比如 GETPOSTPUTDELETE

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

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

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 对象的状态,其值可能为:

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

其语法结构为:


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请求步骤

在这里插入图片描述

二、jQueryAJAX

2.1 jQuery.get()

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


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

其中:

url参数表示请求的 URL

data参数表示要发送的数据

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

dataType参数表示服务器返回的数据类型,可选值有:xml jsonscripttexthtml

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 jsonscripttexthtml

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 PUTPATCH的区别

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

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

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

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

3.3 接收及响应JSON

3.3.1 接收JSON

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

PUTPATCHDELETE请求通常将信息放在请求体内,因此要使用request.body属性来获取请求正文中的原始数据。

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

接收PUTPATCHDELETE提交的JSON字符串数据四部曲:

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

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

第三步:通过Pythonjson模块的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中的listdict类型的数据,可以直接通过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 serializers

data = serializers.serialize(format, queryset, **options)

deserialize()方法是用于将序列化后的数据反序列化为Django模型实例。它可以将JSONXML和其他格式的数据反序列化为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)

  • 20
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值