原生 js 封装 ajax的两种方式（get,post）

创建一个ajax.js文件

---

封装ajax:

/*ajax封装

           @param option:传入一个对象

           属性分别为(顺序可以打乱):

                url:请求的路径

                type:请求的不同类型get或post

                data:发送的数据,格式:key1=value1&key2=value2

                callback:回调函数,方便用户处理自己的数据,传递逻辑           

    */

    function ajax(option){

           //创建异步对象

           var xhr = new XMLHttpRequest();

           //如果是get并且有数据

           if(option.type=='get'&&option.data){

                option.url=option.url+'?'+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);

    }

get方法：

    /*ajax封装-get

       @param url:请求的路径

       @param data:发送的数据,格式:key1=value1&key2=value2

       @param callback:回调函数,方便用户处理自己的数据,传递逻辑

*/

function get(url, data, callback){

           //创建异步对象

           var xhr = new XMLHttpRequest();

           //判断data是否为空

           if(data){

               url=url+'?'+data;

           }

           //设置请求行

           xhr.open('get',url);

           //设置请求头(get可以省略)

           //注册回调函数

           xhr.onreadystatechange = function(){

                if(xhr.readyState==4&&xhr.status==200){

                    //调用传递的回调函数

                    callback(xhr.responseText);

                }

           }

           //发送请求主体

           xhr.send(null);

    }

post方法：

/*ajax封装-post

           @param url:请求的路径

           @param data:发送的数据,格式:key1=value1&key2=value2

           @param callback:回调函数,方便用户处理自己的数据,传递逻辑

    */

    function post(url, data, callback){

           //创建异步对象

           var xhr = new XMLHttpRequest();

           //设置请求行

           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);

    }