Ajax基础知识

首先Ajax的运行环境必须实在服务器下的

Ajax使用步骤

1. 首先需要创建一个Ajax对象 var xhr = new XMLHttpRequest()
2. 告诉Ajax对象以什么方式发送请求，要想哪发送请求 xhr.open('get',url)
3. 发送请求 xhr.send()
4. 获取服务器端响应客户端的数据xhr.onload=()=>{ xhr.responseText }

向服务器端发送数据 与 处理服务器端的响应

1. 使用get传递请求参数：将参数放到请求地址的后面一起传递过去，xhr.open('get', 'http://localhost:3000/get?username=zhangsan&age=25);
2. 使用post传递参数：使用post传递参数需要设置参数的格式类型，xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');,这是传递字符串类型的参数，传递JSON数据类型的是：xhr.setRequestHeader('Content-Type','application/json');,传递的参数需要放在send()中，传递字符串类型的将参数的格式转为与get方式的参数相同后再放入send()中，使用JSON传递的参数需要先将其转为字符串类型的，然后再传xhr.send(JSON.stringify({name:'lisi',age:50}));
3. 处理服务器端的响应：如果传过来的是字符串可以直接使用，如果是JSON类型的需要使用JSON.parse(xhr.reponseText)进行处理后再使用，否则默认的会是字符串类型

Ajax状态码与错误处理

Ajax状态码，状态码有5个，0，1，2，3，4。使用xhr.redayState可以获取Ajax的状态码(方法不用带括号)
      0：创建好了Ajax对象，还未初始化，就是还没调用open()
      1：请求已经连接，但是还没有发送，就是还没有调用send()
      2：请求以进发送
      3：请求正在处理中，通常响应中已经有部分数据可以用了
      4：响应已经完成，可以获取并使用服务器的响应了
onreadystatechange事件，当Ajax状态码发生变化时自动触发该事件，再事件处理函数中，可以获取状态码并对其进行判断，当状态吗为4时就可以通过xhr.responseText获取服务器端的响应数据了
xhr.readystatechange=function(){if(xhr.readyState==4){console.log(xhr.responseText)}};
Ajax错误处理
      1，网络畅通，服务器端能接受到请求，服务器端返回的结果不是预期结果。处理：可以判断服务器端返回的状态码，分别进行处理，xhr.status获取http状态码，注意是HTTP状态码
      2，网络畅通，服务器端没有接受到请求，返回404状态码。处理检查请求地址是否错误
      3，网络畅通，服务器端能接受到请求，服务器端返回500状态码。处理服务器端发生错误，找后端程序员进行沟通
      4，网络中断，请求无法发送到服务器端。处理会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理 xhr.onerror=function(){alert('网络中断，请联网后再试')}

低版本IE浏览器的缓存问题

**问题：**在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据
**解决方案：**在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。
xhr.open('get', 'http://www.example.com?t=' + Math.random());