ajax的原理和使用步骤（兼容性写法）

Ajax是前后台交互的方式，在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
Ajax是异步请求，在请求接口的同时，页面不卡死，回调处理接口返回的后续任务
XMLHttpRequest 对象用于在后台与服务器交换数据。
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
创建Ajax的步骤：
1、创建一个XMLHttpRequest异步对象

var xhr;
if (window.XMLHttpRequest){
   xhr=new XMLHttpRequest();
}else{
   xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

2、设置请求方式和请求地址
方法 xhr.open()
xhr.open()方法有三个参数
第一个参数：发送请求所使用的方法（GET 还是 POST）。
GET比POST 更简单也更快，并且在大部分情况下都能用。
在以下情况中，需要使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
第二个参数：服务器端脚本的 URL地址，可以是任何类型的文件
第三个参数：同步异步的设置 (true（异步）或 false（同步）)。
//get

xhr.open("get", "getPage.json", true)

// post 方式发送数据需要设置请求头

xhr.open("post", "getPage.json", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

如果是post方法，需要设置Content-Type，默认就是www-form
3、用send发送请求
xhr.send() 方法可将请求送往服务器。
// get 不需要传递参数

xhr.send(null)

// post 需要传递参数

xhr.send("pageSize=20&currentPage=1")

4、监听状态变化

onreadystatechange	每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化
	0: 请求未初始化
	1: 服务器连接已建立
	2: 请求已接收
	3: 请求处理中
	4: 请求已完成，且响应已就绪
status	状态码 200：成功

xhr.onreadystatechange = function() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText//返回的数据
      // 解析数据
      res = JSON.parse(res)
    }
  }
}