自封装 ajax 函数,ajax原理

// ajax 原理  以拨打电话为例

function ajaxFn(obj) {

    var url = obj.url;  // url 是必选参数

    // 以下都是可选参数

    var type = obj.type || “get”;

    // 不区分大小写的

    var type = type.tolowerCase();

    var data = obj.data || {};

    var success = obj.success || false;

    var fail = obj.fail || false;

 

    // 先实例出一个 ajax 对象

 

    // 1.先有个手机

    if(window.XMLHttpRequest){  // 现代浏览器, 智能手机

        var ajax = new XMLHttpRequest;

    } else {

        var ajax = ActiveXObject(“Microsoft.XMLHTTP”);

    }

 

 

// 2. 拨号

var datas = toData(data);  // toData是下面封装的函数  

if(type==“get”) {

    ajax.open(“get”,”api.php”);  // 指定请求类型   指定请求的地址

 

    // get 发送

    ajax.send(null);

} else {   // post 提交

    ajax.open(“post”,url);

    ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);  // post提交,需要设置头信息

    ajax.send(datas);  // post 发送

}

// 4.检测状态

ajax.onreadystatechange = function() {

    // 4.1 发送的状态

    if(ajax.readyState==4) {  // 发送成功条件

        if(ajax.status>=200 && ajax.status<=207 || ajax.status==304){   // 通话成功了

            success(JSON.parse(ajax.responseText));

        }

    } else{

            if(fail){    

                fail(ajax.status);

            }

        }

}

 

}

 

// 处理 url 的函数

 

function toData(data) {      // data是对象, {"username":zhangsan,"passWord":123}

    var arr = [];

    for(var i in data)

        arr.push(i+”=“+data[i]);

    }

    return arr.join(“&”) ;     // userName=xiaowangzi&password=123

 

}

 

 

ajaxFn({

    url:”api.php”,

    type:”post”,

    data:{

        userName:”xiaowangzi”,

        passWord: “123"

    },

    success: function(data) {

        console.log(data);

    }

})