关于原生AJAX
一、原生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() {
//请求出错处理
}
})
