ajax

Ajax

XHR

Posted by huangqing on November 16, 2016

一、什么是Ajax

Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。

二、Ajax的优缺点

（1）优点

  1. 浏览器默认支持（一般浏览器都是支持JavaScript的）
  2. 提高用户体验（不需要刷新整个页面，而只需要局部刷新）
  3. 提高页面的性能（只需要请求部分数据，所以数据量就明显下降了） （2）缺点
  4. 破坏了浏览器的前进和后退功能（Ajax不会改变网页URL，因此不会在浏览器记录前后页面）
  5. 对搜索引擎的支持较弱（搜索引擎无法监测到JS引起的数据变化）

三、Ajax的使用

（1）状态码

Ajax的基本流程：创建XHR对象 => 发送数据 => 接收数据

状态码 含义
100 ~ 199 连接继续
200 ~ 299 各种成功的请求
300 ~ 399 重定向
400 ~ 499 客户端错误
500 ~ 599 服务端错误

（2）xhr的基本使用

在使用xhr之前，我们要创建一个xhr的实例对象

let xhr = new XMLHttpRequest()

然后再调用xhr对象上的 open() 方法，表示创建一个请求。

open() 方法接收三个参数：

  • 第一个参数： 请求的类型（例如get 、post）
  • 第二个参数： 请求的URL
  • 第三个参数： 是否异步发送请求（默认为true）
// 创建了一个Ajax请求
xhr.open('get', 'example.php', 'true')

光调用了 open() 方法还不够，它只是创建了一个请求，但还没有发送请求，因此我们还要调用xhr对象上的另一个方法，即 send() 方法，表示将请求发送给目标URL

send() 方法接收一个参数：

第一个参数： 作为请求主体发送的数据（例如post请求携带的数据）

// 我们上面创建的是get请求，因此send()方法无需传参
xhr.send()

请求发送出去后，客户端需要接收服务器响应回来的数据，xhr对象中有一些属性，它们存储着服务端返回来的一些数据信息，如下表所示

属性名 含义
responseText 服务端返回的文本信息
responseXML 服务端返回的XML DOM文档
status HTTP状态码
statusText HTTP状态码说明
readyState xhr对象的请求响应阶段

既然我们要获取服务端返回的数据，我们就要知道服务端是何时返回数据的，这就可以通过上面表格中的 readyState 属性来判断了

readyState 属性一共有5个值，分别表示不同的请求响应阶段：

  • 0： 还未创建请求，即未调用 open() 方法
  • 1： 已调用 open() 方法，但未发送 send() 方法
  • 2： 已调用 send() 方法，但未接收到响应
  • 3： 已接收到部分响应
  • 4： 已接收到全部的响应

同时，xhr对象可以绑定一个 readystatechange 事件，每当 readyState 属性发生改变，都会触发该事件，因此，该事件在一次请求中会被多次触发

xhr.onreadystatechange = function() {
  // 判断是否已接收所有响应
 if(xhr.readyState === 4) {
    // 判断状态码是否为200
    if(xhr.status === 200) {
    console.log(xhr.responseText)
    }
 }
}

（3）发送get请求

get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ? 后面的，例如这样 example.php?query=4&em=0，所以若是我们要在发送get请求时携带数据

let xhr = new XMLHttpRequest()
xhr.open('get', 'example.php?query=4&em=0')
xhr.send()
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}

（4）发送post请求

post请求的数据是放在请求体中的，因此我们需要调用xhr对象上的 setRequestHeader() 方法来模仿表单提交时的内容类型

let xhr = new XMLHttpRequest()
xhr.open('post', 'example.php')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('query=4&em=0')
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}
CATALOG
    FRIENDS