AJAX：二、XMLHttpRequest实践

版权声明：本文为博主原创文章，未经博主允许不得转载。 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库能够适配各种生产环境，这就需要我们动态传入参数进行配置。