ajax请求的封装

1、原生的ajax

/**
 *
 * @param callback  回调函数，处理响应结果
 * @param method   请求方式
 * @param url    请求地址
 * @param async  同步/异步（true:异步，false:同步）
 * @param params  参数(`txtUser=xxx&txtPwd=xxx`)
 */
function ajax(obj) {
    obj.method = (obj.method || 'get').toLowerCase();//忽略请求方式的大小写
    //设置同步异步值，如果没有，则为true
    obj.async=obj.async||true;
   //    1、创建一个XMLHttpRequest对象（考虑了兼容性）
    let xhttp = new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
    //    2、设置事件处理程序
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            obj.callback(xhttp.responseText);
        }
    };

    if (obj.method == 'get' && obj.params) {
        obj.url=obj.url+'?'+obj.params
    }
    //3、设置请求相关的数据
    xhttp.open(obj.method, obj.url, obj.async);
    if (obj.method == 'post') {
        //设置请求头
        xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        //4、发送请求
        xhttp.send(obj.params);//post请求
    }else {
        //4、发送请求
        xhttp.send()
    }
}

2、jquery封装ajax

在原生的ajax基础上：
1、支持用户传输数据时可以传对象
2、响应回来的数据，转成json对象

/**
 *
 * @param callback  回调函数
 * @param method   请求方式
 * @param url    请求地址
 * @param async  同步/异步（true:异步，false:同步）
 * @param params  参数(`txtUser=xxx&txtPwd=xxx`)，可以传字符串，也可以是对象
 */
function ajax(obj) {
    obj.method = (obj.method || 'get').toLowerCase();//忽略请求方式的大小写
    //设置同步异步值，如果没有，则为true
    obj.async=obj.async||true;
    //    1、创建一个XMLHttpRequest对象（考虑了兼容性）
    let xhttp = new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
    //    2、设置事件处理程序
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
       	 //将返回结果转为json对象
            let jsonObj=JSON.parse(xhttp.responseText);
            obj.callback(jsonObj);
        }
    };
    //判断参数是否为对象，如果是对象，需要转为字符串
    if(typeof obj.params=='object'){
        obj.params=objectToString(obj.params);
    }

    if (obj.method == 'get' && obj.params) {
        obj.url=obj.url+'?'+obj.params
    }
    //3、设置请求相关的数据
    xhttp.open(obj.method, obj.url, obj.async);
    if (obj.method == 'post') {
        //设置请求头
        xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        //4、发送请求
        xhttp.send(obj.params);//post请求
    }else {
        //4、发送请求
        xhttp.send()
    }
}

function objectToString(obj){
    let arr=[];
    //通过for in枚举对象
    for(let key in obj){
        arr.push(`${key}=${obj[key]}`);
    }
    return arr.join('&');
}

3、jquery中的ajax

$.ajax({
//    常用参数
    url:'',//请求服务器的地址
    data:{},//向服务器发送数据
    type:'',//请求类型
    async:true,//是否异步，false为同步
    timeout:1000,//请求超时时间，此设置覆盖全局设置
    dataType:'json',//服务器返回的数据类型，可以是html,script,json,text,jsonp.xml
    success:function (){},//成功回调函数
    error:function (){},//失败回调函数
})