Hexo
0%

Ajax中的XMLHttpRequest

Posted on In

Ajax

Ajax是Asynchronous JavaScript and XML的缩写，即为异步的JavaScript和XML，是不刷新页面的情况下，客户端和服务端也能进行异步通信的一种技术。比如强大的Google map 就是采用了这个技术。

在ES6之前，js中的Ajax的基本流程可以概括为：

  1. 实例化一个XMLHttpRequest对象。
  2. 调用实例的open()方法，配置请求的url，必要的请求参数，请求方法。
  3. 调用实例的send()方法，向服务器发送请求。
  4. 处理响应,当请求状态readyState变化是会调用onreadystatechange方法，所以用实例的onreadystatechange属性指定处理响应的回调函数。

其中的readyState在整个请求的过程有五个状态：一旦readyState改变，就会调用onreadychange方法

0：未初始化的。尚未调用open方法。

1：启动。已经调用open方法，但还未调用send方法。

2：发送。已经调用send方法，尚未收到响应。

3：接收。已经收到部分响应。

4：完成。已经接收到全部响应，并且可以在客户端使用了。这一状态是我们最关注的。

具体的代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    //只关注状态4
  if (xhr.readyState === 4) { 
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      alert("request was unsuccessful" + xhr.status);
    }
  }
}
xhr.open('GET', 'https://autumnfish.cn/artist/top/song?id=6452');
xhr.send();

其中还有许多地方需要考虑浏览器的兼容性问题。