原生AJAX

1、AIJAX简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

AJAX不是新的编程语言，而是将现有的标准组合在一起使用的新方法

2、XML简介

XML可扩展标记语言

XML被设计用来传输和储存数据

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

如，说我有一个学生数据：

name = “孙悟空”；age = 18；gender = “男”；

用XML表示：

<student>
   <name>孙悟空</name>
   <age>18</age>
   <gender>男</gender>
</student>

现在JSON取代了

用JSON表示：

{"name":"孙悟空","age":"18","gender":"男”}  //json
{name:"孙悟空",age:18,gender:"男“}  //abjec

3、AJAX的特点

3.1、AJAX的优点

• 可以无需刷新页面而与服务器端进行通信
• 允许你根据用户事件来更新部分页面内容

3.2、AJAX的缺点

• 没有浏览历史
• 存在跨域问题
• SEO不友好

4、AJAX的使用

4.1、核心对象

XMLHttpREequest，AJAX的所有操作都是通过该对象进行的

4.2使用步骤

• 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest

• 设置请求信息 

xhr.open(method,url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type',
'spplication/x-www-form-urlencoded);

• 发送请求

xhr.send(body)  //get请求不传body参数，只有post请求使用

• 接收响应

//xhr.responseXML 接收xml格式的响应数据
//xhr.responseXML 接收文本格式的响应数据
xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
      var text = xhr.responseText;
      console.log(teat);
   }
}

4.3、解决IE缓存问题

问题：

     在一些浏览器中（IE），由于缓存机制的存在，AJAX只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中数据

解决方式：

     浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址即可避免缓存问题

xhr.open("get","/textAJAX?t="+Date.now());

4.4AJAX请求状态

xhr.readyState可以用来查看请求当前的状态

• 0：表示XMLHttpPequest实例已经生成，但是open()方法还没有被调用
• 1：表示send（）方法还没有被调用，仍然可以使用setRequestHesder()，设定HTTP请求的头信息
• 2：表示send（）方法已经执行，并且头信息和状态码已经收到
• 3：表示正在接受服务器传来的body部分的数据
• 4：表示服务器数据已经完全接收，或者本次接收已经失败了