Ajax四个步骤详解

Ajax简单的来说就是一个JavaScript的异步请求，用来获取后台服务端的数据。
在JS中来实现Ajax主要类就是XMLHttpRequest。
它的使用一般分为四个步骤：
1.创建XMLHttpRequest对象；2.准备发送网络请求；3.开始发送网络请求；4.指定回调函数；

一.GET请求

//1.创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  //兼容低版本IE浏览器
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//2.准备发送，true代表异步，false代表同步。如果不设置默认为异步
xhr.open("get","url",true);
//3.执行发送
xhr.send(null);
//4.设置回调函数
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        var result = xhr.responseText;
        console.log(result);
    }
  }
};

二.POST请求

//1.创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  //兼容低版本IE浏览器
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//2.准备发送，true代表异步，false代表同步。如果不设置默认为异步
xhr.open("post","url",true);
//3.执行发送
var param = "请求参数" //对于post请求，应将参数放入请求体中
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置xhr请求头信息，仅限于post请求使用
xhr.send(param);
//4.设置回调函数
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        var result = xhr.responseText;
        console.log(result);
    }
  }
};

PS : 如果不需要兼容低版本浏览器(IE6,7,8)，可以直接使用 var xhr = new XMLHttpRequest()

三.xhr.readyState参数含义

四.xhr.status常见状态码