如何用原生JS封装AJAX

1.AJAX是什么？

ajax全称为Aysnchronous JavaScript And XML,即异步JavaScript+XML，是一种无需重新加载，就可以实现网页部分更新的技术

2.创建一个AJAX的基本步骤

1. 创建一个XMLHttpRequest对象
   XMLHttpRequest简称(XMR)用于在后台与服务器交换数据，所有现代浏览器均支持XMR对象（IE5,IE6使用ActiveXObject）

   创建一个异步对象

   var xhr=null
   

创建ajax需要考虑兼容性处理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject(“Microsoft XMLHTTP”)

if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xhr=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

2. 连接服务器

创建ajax对象xhr，使用xhr.open("请求方式(get/post)",url路径，"异步/同步")

第三个参数：true—>同步、false—>同步
当请求方式为POST的时候，代码如上；
当请求方式为GET的时候，使用xhr.open(“请求方式(GET/POST)”,url路径+"?"请求数据+,"异步/同步’)

3. 发送请求
   使用xhr.send()发送请求
   当请求方式为GET的时候，发送请求为xhr.send(null)
   当请求方式为POST的时候，发送请求为xhr.send(请求数据)
   在使用POST的时候必须xhr.send（请求数据）上面添加

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4. 接受返回值
   使用ajax会有一个readystatechange事件：当请求被发送到服务器时，执行一些基于响应的操作
   当readystatechange改变时，就会触发这个事件执行
   readyState：请求的状态，返回的时状态码(0-4)：

 0（未初始化）open还没有调用
 1（载入）已经调用send()正字发送请求
 2（载入完成）send方法已经完成，已经收到全部响应内容
 3（解析）正在解析响应内容
 4（内容）吸纳应内容解析完成，可以在客户端使用

responseText：返回请求的内容
status：返回请求的结果码：返回200(成功)、返回404(未找到)、返回5**（5开头）（服务器错误）

3.封装AJAX

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
 
}
 
ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})