目录
1.什么是Ajax?
Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML)。通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax。
Ajax可以实现网页与服务器之间的数据交互
AJAX不是编程语言,是一种无需重新载入整个页面,能够更新部分网页的技术。
Ajax与使用Form表单和后端进行数据交互的方式比较,具有以下优点:
- 异步提交: 提交完认为不需要原地等待,立马就做其他事
- 局部刷新: 不在局限于整个页面的刷新,而是在于局部的某一个页面的小块刷新
同步和异步:
- 同步交互: 客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。
- 异步交互: 客户端发出一个请求后,无需要等待服务器响应结束,就可以发出第二个请求。
2.XMLHttpRequest 对象
XMLHttpRequest
是 AJAX 的基础,XMLHttpRequest API
是Ajax的核心
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
- 理解XHRHttpRequest
使用 XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送 ajax 请求
前端可以获取到数据,而无需让整个的页面刷新。
这使得 Web 页面可以只更新页面的局部,而不影响用户的操作
- 区别一般 http 请求与 ajax 请求
ajax 请求是一种特别的 http 请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有 XHR 或 fetch 发出的才是 ajax 请求, 其它所有的都是非 ajax 请求
- 浏览器端接收到响应
一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据
2.1 XMLHttpRequest对象的属性
XMLHttpRequest对象的常见属性如下:
onReadyStateChange
- 定义了当 readyState 属性发生改变时所调用的函数.readyState
- 表示请求的状态。范围值从0
到4
。0
- 服务器连接已建立,未调用open()。- 1 - 服务器连接已建立,调用open()但不调用send()。
- 2 - 请求已接收, 调用send(),并且标题和状态可用。
- 3 - 请求处理中。responseText保存数据。
4
- 请求已完成,且响应已就绪。
status
- HTTp状态码- 200: “OK”
- 404: “Page not found”,未找到页面
- 如需完整列表,请访问 Http 消息参考手册
statusText
- 返回状态文本(例如 “OK” 或 “Not Found”)reponseText
- 以文本形式返回响应。responseXML
- 以XML形式返回响应。
2.2 XMLHttpRequest对象的方法
XMLHttpRequest对象的重要方法如下:
方法 | 描述 |
---|---|
void open(method, URL, async) | 规定请求的类型、URL 以及是否异步处理请求 |
void send(string) | 将请求发送到服务器,string:仅用于 POST 请求 |
setRequestHeader(header,value) | 添加请求标头 |
3.Ajax实例
-
实现步骤
想要实现ajax需要四个步骤- 创建xhr对象
- 配置请求信息
- 监听状态变化
- 发送请求
3.1 传统的XHR请求模式
// ajax的基本请求步骤
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化
xhr.open('Get', 'http....');
// 发送请求
xhr.send();
// 处理响应回调
xhr.onreadystatechange = function(){
console.log(`xhr`, xhr)
// 返回状态码
if(xhr.readyState === 4){
// 判断响应状态码为2xx
if(xhr.status >= 200 && xhr.status <= 300){
// 控制台输出响应体
console.log(`xhr.response`, xhr.response)
}else{
// 输出响应状态码
console.log(`xhr.status`, xhr.status)
}
}
}
3.2 Promise处理ajax请求
// Promise处理ajax请求
const p = new Promise((resolve, reject) => {
// ajax的基本请求步骤
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化
xhr.open('Get', 'http....');
// 发送请求
xhr.send();
// 处理响应回调
xhr.onreadystatechange = function(){
console.log(`xhr`, xhr)
// 返回状态码
if(xhr.readyState === 4){
// 判断响应状态码为2xx
if(xhr.status >= 200 && xhr.status <= 300){
// 控制台输出响应体
// console.log(`xhr.response`, xhr.response)
resolve(xhr.response)
}else{
// 输出响应状态码
// console.log(`xhr.status`, xhr.status)
reject(xhr.status)
}
}
}
});
// 调用then方法
p.then(value => {
console.log(value);
},reason => {
console.warn(reason)
})