版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013243347/article/details/81353354
XHR(XMLHttpRequest) 实践
简介
XMLHttpRequest(通常缩写XHR) 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。
Fetch API 提供了一个获取资源的接口(包括跨域)。
XHR
第一步,创建http请求
warning!: 本文已不再处理ie6-xhr对象的兼容性问题
创建一个http请求也是需要提前做一些准备工作的。
- 首先,就是要创建一个xhr对象,这是我们实现AJAX的核心。
// 创建一个xhr对象
const xhr = new XMLHttpRequest()
console.log('test', xhr)
创建完这个对象之后,我们可以在控制台看到这个对象的详细信息了。
- 其次,必须提前声明一个接收服务端数据的处理函数
// 创建一个xhr对象
const xhr = new XMLHttpRequest()
// 声明函数,处理服务端的响应数据
xhr.onreadystatechange = res =>{
console.log('res', res)
}
console.log('test', xhr)
- 声明完处理函数之后,我们需要设置http请求的相关参数
// 创建一个xhr对象
const xhr = new XMLHttpRequest()
// 声明函数,处理服务端的响应数据
xhr.onreadystatechange = res =>{
console.log('res', res)
}
// 向服务器请求目标url中的数据文件
xhr.open('GET', 'http://yyweb.yystatic.com/pc/images/default_portrait.png?20160616', true)
xhr.send()
此时,我们可以看到处理服务器的回调函数(onreadystatechange),一共被执行了四次。
为什么会调用四次?我们后面会讲到。
第二步,处理服务端数据
通过第一步,我们就可以通过浏览器发送最基本的request请求了。接下来,我们就准备处理从服务端获取到的数据信息了。
还记得,上面我们曾经声明过的onreadystatechange函数吗?这就是我们用来处理服务端数据的函数。那么,我们应该如何正确处理这些数据请求呢?
我们先来看下面的代码,xhr.onreadystatechange函数中xhr对象的几种状态。
// 创建一个xhr对象
const xhr = new XMLHttpRequest()
// 声明函数,处理服务端的响应数据
xhr.onreadystatechange = res =>{
console.log(`res: ${res}, status: ${xhr.status}, readyState: ${xhr.readyState}`)
}
// 向服务器请求目标url中的数据文件
xhr.open('GET', 'http://yyweb.yystatic.com/pc/images/default_portrait.png?20160616', true)
xhr.send()
我们可以看到,xhr.readyState
返回了四种不同的状态。
下面,就来介绍一下这四种状态的含义:
- 0 request请求还未初始化
- 1 loading 或者与服务器连接中
- 2 loaded 或者服务器接收到request请求
- 3 建立连接或者服务端处理request
- 4 建立完毕或者请求处理完成准备发送response
xhr.status
200代表服务端成功接收到请求。
了解完以上概念之后,我们再来梳理下面的逻辑
// 创建一个xhr对象
const xhr = new XMLHttpRequest()
// 声明函数,处理服务端的响应数据
xhr.onreadystatechange = res =>{
console.log(`status: ${xhr.status}, readyState: ${xhr.readyState}`)
if (xhr.status === 200) {
// 服务端状态码: 200 ok 表示请求成功
if (xhr.readyState === 4) {
// 准备接收服务端数据
console.log(`status: ${xhr.readyState}, res: ${JSON.stringify(res)}`)
}
} else {
// 0: 准备发送请求
// 400 Not Found or 500 服务端错误
}
}
// 向服务器请求目标url中的数据文件
xhr.open('GET', 'http://yyweb.yystatic.com/pc/images/default_portrait.png?20160616', true)
xhr.send()
最终,我们成功发起请求从服务端获取了一张图片数据。
第三步,封装AJAX
为了日常开发使用,我们将AJAX封装成一个函数库,便于今后可以随时使用。
- 首先,进行最基本的包装。将我们上述的代码放入到一个函数中进行简单封装。
const ajax = () => {
// 创建一个xhr对象
const xhr = new XMLHttpRequest()
// 声明函数,处理服务端的响应数据
xhr.onreadystatechange = res =>{
console.log(`status: ${xhr.status}, readyState: ${xhr.readyState}`)
if (xhr.status === 200) {
// 服务端状态码: 200 ok 表示请求成功
if (xhr.readyState === 4) {
// 准备接收服务端数据
console.log(`status: ${xhr.readyState}, res: ${JSON.stringify(res)}`)
}
} else {
// 0: 准备发送请求
// 400 Not Found or 500 服务端错误
}
}
// 向服务器请求目标url中的数据文件
xhr.open('GET', 'http://yyweb.yystatic.com/pc/images/default_portrait.png?20160616', true)
xhr.send()
}
ajax()
- 然后,为了让我们封装的ajax库能够适配各种生产环境,这就需要我们动态传入参数进行配置。