AJAX学习笔记（基本使用，请求参数传递，获取服务端响应，错误处理，低版本IE浏览器缓存问题及解决）

1. Ajax实现步骤

1. 创建ajax对象

   let xhr = new XMLHttpRequest();
   

2. 告诉ajax请求地址及请求方式

   xhr.open('get','http://www.example.com');
   

3. 发送请求

   xhr.send();
   

4. 获取服务器端与客户端的响应数据

   xhr.onload = ()=>{
       console.log(xrh.responseText)
   }
   

服务器端响应的数据格式

真实项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。

在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

使用：

JSON.parse();   //将json字符串转化为json对象

2. 请求参数传递

1）传统网站表单提交

    <form action="http://www.example.com" method="GET">
      <input type="text" name="uname">
      <input type="password" name="pwd">
    </form>

<!-- 此时的请求地址：
     http://www.example.com?uname=jack&pwd=1234  -->

2）GET请求方式

xhr.open('get','http://www.example.com?uname=jack&pwd=1234')

3）POST请求方式

//设置请求参数格式的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('uname=jack&pwd=1234');

请求报文：

请求参数的格式:

1）application/x-www-form-urlencoded

uname=jack&age=20

2）application/json

{name:'jack',age:'20'}

在请求头中指定Content-type属性的值是application/json，告诉服务器端当前请求参数的格式是json。

JSON.stringfy();   //将json对象转化为json字符串

参考：Ajax对象的属性、方法

火狐开发者文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

属性

• **readyState： Ajax状态码 **
  0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
  1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
  2：已调用send方法进行请求
  3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
  **4：接收完成，客户端已经接收到了所有数据 * **

• status ：http响应状态码
  200代表成功获取服务器端数据
  404未找到页面等等……

• statusText ：http响应状态文本

• responseText：如果服务器端返回字符串，使用responseText进行接收

• responseXML ：如果服务器端返回XML数据，使用responseXML进行接收

• onreadystatechange：当 readyState 状态码发生改变时所触发的回调函数

方法

• open(method,url,[aycs])：初始化Ajax对象 (打开)
  method:http请求方式，get/post
  url:请求的服务器地址
  aycs:同步与异步

• setRequestHeader(header,value)：设置请求头信息
  header ：请求头名称
  value ：请求头的值

• xhr.getAllResponseHeaders() 获取全部响应头信息

• xhr.getResponseHeader(‘key’) 获取指定头信息

• send([content]) ：发送Ajax请求
  content ： 如果是get请求时，此参数为null;

  如果是post请求时，此参数就是要传递的数据

  注意: 所有相关的事件绑定必须在调用send()方法之前进行.

  
  

3. 获取服务端响应

onreadyStatechange事件

当ajax状态码发发生变化时将自动触发该事件。readyState表示ajax状态码。

    let xhr = new XMLHttpRequest();
    console.log(xhr.readyState);
    //-> 0 已经创建了ajax对象，但是还没有对ajax对象进行配置

    xhr.open('get', 'localhost:3000/readystate');
    console.log(xhr.readyState);
    //-> 1 已经对ajax对象进行配置，但是还没有发送请求

    xhr.onreadystatechange = () => {
        console.log(xhr.readyState);
        // 2 代表请求已经发送了
        // 3 代表以及接收到服务器端的部分数据了
        // 4 服务器端的响应数据已经接收完毕
    }

4. Ajax错误处理

1）网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。

可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码。

xhr.onload = ()=>{
    console.log(xhr.responseText);  //接收返回字符串
    if(xhr.status == 400)
        alert('请求出错');
}

2）网络畅通，服务器端没有接收到请求，返回404状态码。

检查请求地址是否错误。

3）网络畅通，服务器能够接收到请求，服务器端返回500状态码。

服务器端错误，找后端。

4）网络中断，请求无法发送到服务器。

会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

xhr.onerror = ()={
    alert('网络中断，无法请求')
}

低版本IE浏览器缓存问题

问题来源：

在Ajax的get请求中，如果运行在IE内核的浏览器下，其如果向同一个url发送多次请求时，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端拿到的依然是缓存中的旧数据。这就是所谓的缓存问题。

缓存问题最早设计初衷是为了加快应用程序的访问速度，但是其会影响Ajax实时的获取服务器端的数据。

解决方案：

产生缓存的问题就是 我们的客户端向同一个 url 发送了多次请求；
如果我们每次请求的url不同，那么，缓存问题就不会存在了；

我们可以在请求地址的后面加上一个无意义的参数，参数值使用随机数即可，
那么每次请求都会产生随机数，URL就会不同，缓存问题就被解决了；

Math.random()：返回 0-1 之间的随机数，包括 0 但不包括 1；

修改代码如下：

let url = '03-1.php?names='+inp.value+'&_=' + Math.random();
xhr.open('get',url);

但是，随机数虽然解决了问题，但是，我们不能保证每次生成的随机数都不一样；
也就是说，使用随机数存在一定的隐患；

new Date().getTime() ： 获取当前时间的毫秒时间戳
修改代码如下：

let url = '03-1.php?names='+inp.value+'&_='+new Date().getTime();
xhr.open('get',url);

设置响应头禁用客户端缓存

服务器端在相应客户端请求时，可以设置响应头信息，如：
header('Content-type:text/html; charset=utf-8') ：告诉客户端浏览器，使用utf-8的编码格式解析html页面信息。

设置不缓存的响应头标识即可：

//告诉客户端浏览器不要缓存数据
res.setHeader('Cache-Control','no-cache');