原生Javascript 封装 ajax ----五部曲

/*原生js ajax begin*/
//ajax get五部曲
function ajax_get(url,data){
    // 异步对象
    var ajax=new new XMLHttpRequest();

    //url方法
    //如果是get发送数据，发送的格式为xxx.php?name=jack&age=18
    //so这里需要拼接url
    if(data){
        //如果有值 需要拼接字符串
        url+='?';
        url+=data;
    }
    ajax.open("get", url);

    //发送
    ajax.send();
    //注册事件
    ajax.onreadystatechange=function(){
        //在事件中获取数据并修改界面显示
        if(ajax.readyState==4&&ajax.status==200){
            console.log(ajax.responseText);
        }
    }
}
//ajax post五部曲
function ajax_post(url,data){
    var ajax=new new XMLHttpRequest();

    ajax.open('post', url);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    if (data) {
        ajax.send(data);
    }else {
        ajax.send();
    }

    ajax.onreadystatechange=function(){
        if (ajax.readyState==4&&ajax.status==200) {
            console.log(ajax.responseText);
        }
    }
}

//method --post or get
//url  --请求地址
//data --传数据给服务器
//callback --成功回调函数
//eg:ajax_tool("xx.php","name=nihao","get",function(a){console.log(data)});

function ajax_tool(url,data,method,callback){
    var ajax=new new XMLHttpRequest();

    //get 跟post 需要分别写不同的代码
    if(method=='get'){
        if(data){
            url+='?';
            url+=data;
        }else {

        }
        ajax.open(method, url);
        ajax.send();
    }else {
        ajax.open(method,url);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if (data) {
            ajax.send(data);
        }else {
            ajax.send();
        }
    }

    ajax.onreadystatechange=function(){
        if (ajax.readyState==4&&ajax.status==200) {
            callback(ajax.responseText);
        }
    }
}
//升级版
//eg:ajax_tool1({method:"get",success:function(data){console.log(data);},data:undefined,url:"xx.php"})
function ajax_tool1(option){
    var ajax=new XMLHttpRequest();

    //get 跟post 需要分别写不同的代码
    if(option.method=='get'){
        if(option.data){
            option.url+='?';
            option.url+=option.data;
        }else {

        }
        ajax.open(option.method, option.url);
        ajax.send();
    }else {
        ajax.open(option.method,option.url);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if (option.data) {
            ajax.send(option.data);
        }else {
            ajax.send();
        }
    }

    ajax.onreadystatechange=function(){
        if (ajax.readyState==4&&ajax.status==200) {
            option.success(ajax.responseText);
        }
    }
}


/*原生js ajax end*/

//jq 获取数据
//method --post or get
//url  --请求地址
//datat --数据类型
//callback --成功回调函数
function jqData(method, url, datat, callback) {
    $.ajax({
        type: method,
        url: url,
        dataType: datat,
        success: callback,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
}