原生js封装ajax的get、post方法

 公共方法提取：

function params(json){
  let paramArr = []
  for (let p in json) {
    paramArr.push(p + '=' + json[p])
  }
  return paramArr.join('&')
}

HTTP请求过程

（1）建立TCP链接

（2）web浏览器向web服务器发送请求命令

（3）web浏览器发送请求头信息

（4）web服务器应答

（5）web服务器发送应答头信息

（6）web浏览器向浏览器发送数据

（7）web服务器关闭TCP链接

readyState 状态说明：表示请求/响应过程的当前活动阶段

readyState有五种可能的值： 
0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。 
1 (载入)：已经调用open() 方法，但尚未发送请求。 
2 (载入完成)： 请求已经发送完成。 
3 (交互)：可以接收到部分响应数据。 
4 (完成)：已经接收到了全部数据，并且连接已经关闭。
(0)未初始化 
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。 
(1)载入 
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 
(2)载入完成 
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 
(3)交互 
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。 
(4)完成 
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。 
概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段： 
创建－初始化请求－发送请求－接收数据－解析数据－完成 

xhr对象status属性：响应的HTTP状态

status的值

1XX：信息类，表示收到web浏览器请求，正在进一步处理中

2XX：成功，表示用户请求被正确接收

3XX：重定向，表示请求没成功，需要客户采取进一步的动作（304表示请求的资源未修改，可以直接使用浏览器的缓存版本）

4XX：客户端错误，表示客户端提交的请求有错误，如：404 Not Found，意味着请求中所引用的文档不存在

5XX：服务器错误，表示服务器不能完成对请求的处理

ajax封装get

/*ajax封装-get
       @param url:请求的路径
       @param data:发送的数据,格式:{key1:value1,key2:value2}
       @param callback:回调函数,方便用户处理自己的数据,传递逻辑
*/
function get(url, data, callback){
       //创建异步对象
        var xhr = null
       if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
       } else if(window.ActiveXObject) {//IE6及以下
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
       }
       //判断data是否为空
       if(data){
           url=url+'?'+params(data);
       }
       //设置请求行
       xhr.open('get',url);
       //设置请求头(get可以省略)
       //注册回调函数
       xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
                //调用传递的回调函数
                callback(xhr.responseText);
            }
       }
       //发送请求主体
       xhr.send(null);
}

调用方式：

get('url',{key1:1,key2:3},function (data){
      console.log(data);
     }
});

ajax封装post

/*ajax封装-post
       @param url:请求的路径
       @param data:发送的数据,格式:{key1:value1,key2:value2}
       @param callback:回调函数,方便用户处理自己的数据,传递逻辑
*/
function post(url, data, callback){
       //创建异步对象
        var xhr = null
       if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
       } else if(window.ActiveXObject) {//IE6及以下
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
       }
       //设置请求行
       xhr.open('post',url);
       //设置请求头(post有数据发送才需要设置请求头)
       //判断是否有数据发送
       if(data){
             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
       }
       //注册回调函数
       xhr.onreadystatechange = function(){
             if(xhr.readyState==4&&xhr.status==200){
                 //调用传递的回调函数
                 callback(xhr.responseText);
             }
       }
       //发送请求主体
       xhr.send(data);
}

调用方式：

post('url',{key1:1,key2:3},function (data){
      console.log(data);
     }
});

ajax封装

/*ajax封装
       @param option:传入一个对象
       url:请求的路径
       type:请求的不同类型get或post
       data:发送的数据,格式:{key1:value1,key2:value2}
       callback:回调函数,方便用户处理自己的数据,传递逻辑           
*/
function myAjax(option){
       //创建异步对象
       var xhr = null
       if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
       } else if(window.ActiveXObject) {//IE6及以下
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
       }
       //如果是get并且有数据
       if(option.type=='get'&&option.data){
            option.url=option.url+'?'+params(option.data);
       }
       //设置请求行
       xhr.open(option.type,option.url);
       //设置请求头(post有数据发送才需要设置请求头)
       //判断是否有数据发送
       if(option.type=='post'&&option.data){
             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
       }
       //注册回调函数
       xhr.onreadystatechange = function(){
             if(xhr.readyState==4&&xhr.status==200){
                 //接收返回的数据类型
                 var type = xhr.getResponseHeader('Content-Type');
                 //json格式
                 if(type.indexOf('json')!=-1){
                      option.callback(JSON.parse(xhr.responseText));
                 }
                 //xml格式
                 else if(type.indexOf('xml')!=-1){
                      option.callback(xhr.responseXML);
                 }
                 //普通格式
                 else{
                      option.callback(xhr.responseText);
                 }
             }
       }
       //发送请求主体
       //判断不同的请求类型
       xhr.send(option.type=='post'?option.data:null);
}

调用方式：

myAjax({
     url:'url',
     type:'post',
     data:{key1:1,key2:3},
     callback:function (data){
      console.log(data);
     }
});