js学习总结----ajax兼容处理及惰性思想

Posted 2020-09-30

封装代码如下:

// var xhr = null;
// //为了兼容IE6及更低的版本：如果第一个不支持，则浏览器会报错，后面就不在执行了
// try{
//     xhr = new ActiveXObject("Microsoft.XMLHTTP");
// }catch(e){

// }
// if(new ActiveXObject("Microsoft.XMLHTTP")){
//     xhr = new ActiveXObject("Microsoft.XMLHTTP");
// }else if(new ActiveXObject("Msxm12.XMLHTTP")){
//     xhr = new ActiveXObject("Msxm12.XMLHTTP");
// }else if(new ActiveXObject("Msxm13.XMLHTTP")){
//     xhr = new ActiveXObject("Msxm13.XMLHTTP");
// }
//JS高阶编程技巧之"惰性思想":能够执行一次就搞定的不会执行多次
//createXHR:创建AJAX对象，兼容所有的浏览器
function createXHR(){
    var xhr = null,
        flag = false,
        ary = [
            function(){
                return new XMLHttpRequest;
            },
            function(){
                return new ActiveXObject("Microsoft.XMLHTTP");
            },
            function(){
                return new ActiveXObject("Msxm12.XMLHTTP")
            },
            function(){
                return new ActiveXObject("Msxm13.XMLHTTP");
            }
        ];
    for(var i = 0,len = ary.length;i<len;i++){
        var curFn = ary[i];
        try{
            xhr = curFn();
            //本次循环获取的方法执行没有出现错误:说明此方法是我想要的，我们下一次直接执行这个小方法即可，这就需要我们把createXHR重写为小方法即可(完成后不需要判断下面的，直接退出循环即可)
            createXHR = curFn;
            flag = true;
            break;
        }catch(e){
            //本次循环获取的方法执行出现错误:继续执行下一次的循环
        }
        

    }
    if(!flag){
        throw new Error("your brower is not support ajax,please change your brower,try again!")
    }
    return xhr;
}