网站建设协调机制,下载别人做的ppt的网站,岳阳建设厅网站,自己做购物网站好吗AJAX基础 一、AJAX1.1 概述1.2 XMLHttpRequest对象1.3 AJAX请求六部曲1.4 图解AJAX请求步骤 二、jQuery与AJAX2.1 jQuery.get()2.2 jQuery.getJSON()2.3 jQuery.post()2.4 jQuery.ajax() 三、Django使用AJAX3.1 请求类型3.2 PUT与PATCH的区别3.3 接收及响应JSON3.3.1 接收JSON3… AJAX基础 一、AJAX1.1 概述1.2 XMLHttpRequest对象1.3 AJAX请求六部曲1.4 图解AJAX请求步骤 二、jQuery与AJAX2.1 jQuery.get()2.2 jQuery.getJSON()2.3 jQuery.post()2.4 jQuery.ajax() 三、Django使用AJAX3.1 请求类型3.2 PUT与PATCH的区别3.3 接收及响应JSON3.3.1 接收JSON3.3.2 响应JSON 3.4 json模块 一、AJAX
1.1 概述
AJAX即Asynchronous Javascript And XML异步JavaScript和XML在 2005年被Jesse James Garrett提出的新术语用来描述一种使用现有技术集合的新方法包括: HTML 、CSS, JavaScript、DOM等以及最重要的XMLHttpRequest。
使用AJAX技术网页应用能够快速地将增量更新呈现在用户界面上而不需要重载整个页面这使得程序能够更快地回应用户的操作。
XMLHttpRequestXHR对象是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 方法比如 GET、POST、PUT、DELETE等
● 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请求步骤 二、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,safeFalse)
第二种
如果响应的信息为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)
