手写ajax

躲避坑

不做兼容性处理（即不考虑运行的环境问题），使用new XMLHTTPRequest()进行创建对象，但是这个创建方式在IE6中不支持，所以就出现Microsoft设置的插件，必须使用如下方式进行创建这个xhr请求对象。

/**
    正常创建的方式
    var OAjax = new XMLHttpRequest();
*/
// IE6
var oAjax = null;
if (window.XMLHttpRequest){
    oAjax = new XMLHttpRequest();
}else{
    oAjax = new ActiveXObjext("Microsoft.XMLHttpRequest");
}

创建方式

刚才的创建方式为:

• 第一步: 创建xhr的请求对象。
• 第二部：使用oAjax.open('GET',URL,是否异步); //此步骤为连接服务器 --- 同步：具备同时进行。异步：有先后顺序（把大象装进冰箱的过程）。
• 第三步：发送请求。oAjax.send();
• 第四部: 接受返回。

// 整个过程进行封装
function ajax(url,success,failed){
    /**
    正常创建的方式
    var OAjax = new XMLHttpRequest();
    */
    // IE6
    var oAjax = null;
    if (window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveXObjext("Microsoft.XMLHttpRequest");
    }
    
    oAjax.open('GET',url,true);
    oAjax.send();
    
    oAjax.onreadystatechange = function(){
        //使用oAjax.readyState 的值来判断返回的状态，返回的状态为0,1,2,3,4的过程。当OAjax.readyState == 4的情况下，意味着第一步到第四步全部完成。
        // 使用oAjax.status == 200的情况下表示返回成功。
        if(oAjax.readystate == 4){
            if(oAjax.status == 200){
                console.log("返回成功");//在浏览器开发情况下查看(F12)
                console.log("返回的信息"+oAjax.responseText);//oAjax.responseText是从服务器进行返回的信息
                // 返回成功执行的函数处理
                success(oAjax.responseText){ //一般情况下写成success(data),为了方便使用操作返回的数据
                //对返回的oAjax.responseTest的数据进行操作
                    
                };
            }else{
                console.log("返回失败");
                // 如果返回失败
                if(failed){
                    // 当传入错误函数的参的时候进行执行
                    failed();
                }
            }
        }
    }
}