高級之路篇十四:Ajax

function Ajax(){

    var xmlHttp = null;

    var createXmlHttp = function(){
        if(window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
            if(xmlHttp.overrideMimeType) {
                xmlHttp.overrideMimeType("text/xml");
            }
        } else if(window.ActiveXobject) {
            var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
            for(var i = 0; i < activeName.length; i++) {
                try {
                    xmlHttp = new ActiveXobject(activeName[i]);
                    break;
                } catch(e) {}
            }
        }
    }

    var jsonToGetdata = function(json){
        var arr = [];
        for(var k in json){
            arr.push(k + '='+ json[k])
        }
        return arr.join("&")
    }

    /**
     * @param {
        * url:請求地址
        * async:是否異步,默認true
        * Content-Type:提交方式,默認application/x-www-form-urlencoded;charset=UTF-8
        * data:提交數據,get會默認轉化
        * success:ajax成功回調
        * error:ajax失敗回調
    * } object
    * @returns xmlHttp
    */
    var assignDefaultObject = function(object){
        
        return {
            url : object.url || '',
            async : object.async === false ? false : true,
            "Content-Type" : object["Content-Type"] || "application/x-www-form-urlencoded;charset=UTF-8",
            data : object.data || {},
            success : object.success || function(){ },
            error : object.error || function(){ }
        }
    }

    return {
        get: function(object){

            object = assignDefaultObject(object);

            if(!xmlHttp){
                createXmlHttp();
                if(!xmlHttp){
                    return console.error("XMLHttpRequest create error.");
                }
            }

            xmlHttp.open("get", object.url + "?"+ jsonToGetdata(object.data), object.async)
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4){ 

                    if(xmlHttp.status == 200){     
                        var responseText =xmlHttp.responseText;
                        object.success(responseText);
                    }
                    else{
                        object.error(xmlHttp);
                    }

                }
            };
            xmlHttp.send(null);

            return xmlHttp;
            
        },
        post: function(object){
            object = assignDefaultObject(object);

            if(!xmlHttp){
                createXmlHttp();
                if(!xmlHttp){
                    return console.error("XMLHttpRequest create error.");
                }
            }

            xmlHttp.open("post", object.url, object.async)
            xmlHttp.setRequestHeader("Content-Type", object["Content-Type"] )
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4){ 

                    if(xmlHttp.status == 200){     
                        var responseText =xmlHttp.responseText;
                        object.success(responseText);
                    }
                    else{
                        object.error(xmlHttp);
                    }

                }
            };
            xmlHttp.send(jsonToGetdata(object.data));

            return xmlHttp;

        }
    }

}




//用法演示

var ajax = new Ajax();

var a = ajax.post({
    url: "http://www.ylkjgz.cn/app/test",
    data: {
        name: 123
    }
});
console.log("異步, 我先走了!")
a.abort()

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章