自己实现ajax视频,自己实现 Ajax

用不同方法来实现 Ajax 基本是前端的经典考题了，这篇文章总结了2种常用的实现 Ajax 方法，分别是原生 JS 实现和Promise 实现。

原生 JS 实现

原生 JS 实现 Ajax 算法问得最多的了，所以基本都要把 4 个步骤背下来。

创建 XMLHttpRequest 对象。

监听 readystatechange 事件(接收 response 事件)。

使用 open 和 setRequestHeader 来配置请求。

发送请求，如果有请求内容，则以字符串形式发送。

mybutton.addEventListener('click', () => {

// 声明 XMLHttpRequest

let request = new XMLHttpRequest()

// 监听

request.onreadystatechange = () => {

// 判断 readyState

if (request.readyState === 4) {

// 判断响应码

if (request.status >= 200 && request.status < 300) {

// 获取响应内容

let string = request.responseText

let object = JSON.parse(string)

// 打印相关信息

console.log(object)

console.log('Response Header', request.getAllResponseHeaders())

console.log('Content-Type', request.getResponseHeader('Content-Type'))

console.log('Status Text', request.statusText)

}

// 打印错误

else if (request.status >= 400) {

console.log('请求失败')

}

}

}

// 配置 request

request.open('POST', '/xxx')

// 配置请求头信息

request.setRequestHeader("Content-Type", "x-www-form-urlencoded")

// 发送请求(发送请求内容)

request.send('请求的内容')

})