一、原生AJAX基础知识
(一)描述
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新——在不重新加载整个网页的情况下,对网页的某部分进行更新
(二)工作原理
(三)浏览器发送请求
GET请求
xhr.open("GET", "data/a.text", true)
xhr.send()
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)
将请求发送到服务器
string:仅用于 POST 请求
POST请求——修改请求头
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("content-type","application/x-www-urlencoded");
xhr.send("fname=Henry&lname=Ford")
setRequestHeader(header,value)
向请求添加 HTTP 头
header: 规定头的名称
value: 规定头的值
异步
XMLHttpRequest 对象使用 AJAX,open() 方法的 async 参数必须设置为 true
通过 AJAX,JavaScript 无需等待服务器的响应
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
(四)服务器创建响应
获取服务器数据响应使用XMLHttpRequest对象的responeseText和responseXML属性
responseText——获得字符串形式的响应数据
responseXML——获得 XML 形式的响应数据,作为 XML 对象进行解析
(五)浏览器处理响应
onreadyStateChange事件
处理服务器响应,需要先监听请求的状态,当响应准备就绪开始处理
每当 readyState 改变时,就会触发 onreadystatechange 事件
readyState 属性存有 XMLHttpRequest 的状态信息
属性
描述
onreadyStateChange
存储函数,每当readyState属性改变,调用该函数
readyState
存有 XMLHttpRequest 的状态
0:请求未初始化——未调用open()
1:请求连接已经建立——未调用send()
2:请求已发送
3:请求处理中
4:请求已完成,响应准备就绪
status
200: "OK"
404: "Not Found"
(六)AJAX原生JS操作
//1.创建Ajax实例
let xhr = new XMLHttpRequest();//IE下为ActiveObject对象
//2.设置请求配置
xhr.open("GET", "data/a.text", true)
//3.事件监听:通过监听readyStateChange事件,获知AJAX状态改变
xhr.onreadyStateChange = function() {
//请求完成 获取服务器返回的响应头响应主体
if(xhr.readyState == 4 && xhr.status == 200 ) {
console.log(xhr.responseText)
}
}
//4.发送Ajax请求
xhr.send()
创建 XMLHttpRequest 对象——let xhr = new XMLHttpRequest()
规定请求的类型、URL与异步——xhr.open("GET", url, true)
当服务器响应就绪时执行函数——xhr.onreadyStateChange = callback
发送请求到服务器——xhr.send()
二、jQuery.ajax
$.ajax(url, [settings])
(一)描述
通过 HTTP 请求加载远程数据
$.ajax() 返回其创建的 XMLHttpRequest 对象
$.ajax({
type: "GET",//请求类型
url:"test.html",//发送请求的地址
data: "",//发送到服务器的数据。将自动转换为请求字符串格式
dataType: "html",//预期服务器返回的数据类型
async: true,//请求是否异步,默认为异步
headers: {},//设置消息头中的值
timeout: "",//设置请求超时时间(毫秒)
beforeSend: function(XMLHttpRequest) {
//请求前的处理——可修改XMLHttpRequest对象,如自定义请求头
},
success: function(data, status) {
//请求成功时处理
},
complete: function(XMLHttpRequest, status) {
//请求完成的处理
},
error: function() {
//请求出错处理
}
})
原文:/zengbin13/p/12905303.html