一、什么是Ajax
Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页。
二、Ajax的工作原理
客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上。
发送请求:即 new XMLHttpRequest > 调用open() > 监听状态码 > send()
接受响应:接受返回的response 如responseText、responseURL等
三、实现Ajax的基本步骤
- 创建XMLHttpRequest对象,即创建一个异步调用对象.
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
- 设置响应HTTP请求状态变化的函数.
- 发送HTTP请求.
- 获取异步调用返回的数据.
- 使用JavaScript和DOM实现局部刷新.
四、实例
以下为简要版的Ajax实例
/* 获取要操作的dom */
const p = document.querySelector('p')
/* 1.创建XMLHttpRequest对象,即创建一个异步调用对象 */
let xhr = new XMLHttpRequest()
/* 创建一个新的http请求,并指定该http请求的方法,url及是否异步 */
xhr.open('get', 'test.txt', true)
/* 设置响应HTTP请求状态改变的函数 readystatechange */
xhr.onreadystatechange = () => {
/* 判断readyState属性值是否为4
0 表示未调用open方法
1 表示调用了open方法 未调用send方法
2 表示发送请求 还没收到响应
3 表示只受到部分响应
4 表示响应都接受完 可以将响应内容显示出来 */
if(xhr.readyState === 4){
if(xhr.status === 200){
p.innerHTML = xhr.responseText
}
}
}
/* 发送HTTP请求 send(data)
其中data是个可选参数,如果请求的数据不需要参数,即可以使用null来替代。
如果需要参数,则示例为:name=myName&value=myValue
*/
xhr.send(null)
以下为将Ajax用promise封装的简版
const button = document.querySelector('a')
const imgage = document.querySelector('img')
function ajaxPromise () {
let promise = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open('get', 'xxx.jpg', true)
xhr.onreadystatechange = () => {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
resolve(xhr.responseURL)
}else{
reject( new Error(xhr.statusText));
}
}
}
xhr.send(null)
})
return promise
}
button.addEventListener('click',() => {
ajaxPromise()
.then( responseURL => {
Image.src = responseURL
})
.catch( statusText => {
console.log(statusText)
})
})
部分内容引自:
《Ajax的五个请求步骤》Ajax请求的五个步骤_谁是听故事的人的博客-CSDN博客_ajax请求的五个步骤