AJAX的特點

1.短連接。
2.請求 ，響應(yīng)的方式
3.無刷新接受數(shù)據(jù)
4.速度快

AJAX的代碼4.0

// 函數(shù)封裝的是代碼，采用面向?qū)ο蟮男问椒庋b




(function () {




// 暴露出ajax接口
ajax = window.ajax = {}

// 增加1個方法： get方法
/*
 * 參數(shù)：
 *   obj 是1個對象，代表參數(shù)的集合，里面有很多參數(shù)，如下所示：
 *      url         請求的地址與參數(shù)
 *      data        發(fā)送的數(shù)據(jù)
 *      async       是否是同步,  true / false
 *      fail        失敗的處理回調(diào)函數(shù)
 *      success     成功的處理回調(diào)函數(shù)
 */
ajax.get = function(obj) {
    
    if (obj.async == undefined) {
        obj.async = true;
    }
    
    if (obj.data == undefined) {
        obj.data = "";
    }
    
    var xhr = new XMLHttpRequest();
    
    var url = obj.url;
    url += "?"
    
    
    url += translate(obj.data)
    
    function translate(obj){
                var str =""
                for(var i in obj){
                    str += i;
                    str += "=";
                    str += obj[i];
                    str += "&"
                    
                    
                    
                }
                str = str.substr(0,str.length - 1)
                return str 
    
            };
    
    xhr.open("GET", url, obj.async);
    
    xhr.send()
    
    if (obj.async == true) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                
                if (xhr.status == 200) {
                    
                    var str = xhr.responseText;
                    obj.success && obj.success(str);
                } else {
                    obj.fail && obj.fail();
                }
                
            }
            
        }
    } else {
        // 同步方式
        if (xhr.status == 200) {
            var str = xhr.responseText;
            obj.success && obj.success(str);
        } else {
            obj.fail && obj.fail();
        }
    }
    
}



// 增加1個方法： post方法
/*
 * 參數(shù)：
 *   obj 是1個對象，代表參數(shù)的集合，里面有很多參數(shù)，如下所示：
 *      url         請求的地址與參數(shù)
 *      data        發(fā)送的數(shù)據(jù)
 *      async       是否是同步,  true / false
 *      fail        失敗的處理回調(diào)函數(shù)
 *      success     成功的處理回調(diào)函數(shù)
 */
ajax.post = function(obj) {
    
    if (obj.async == undefined) {
        obj.async = true;
    }
    
    if (obj.data == undefined) {
        obj.data = "";
    }
    
    var xhr = new XMLHttpRequest();
    
    var url = obj.url;
    
    xhr.open("POST", url, obj.async);

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(obj.data)
    
    if (obj.async == true) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                
                if (xhr.status == 200) {
                    
                    var str = xhr.responseText;
                    obj.success && obj.success(str);
                } else {
                    obj.fail && obj.fail();
                }
                
            }
            
        }
    } else {
        // 同步方式
        if (xhr.status == 200) {
            var str = xhr.responseText;
            obj.success && obj.success(str);
        } else {
            obj.fail && obj.fail();
        }
    }
    
}

})();

AJAX的學習

還需加強記憶，多加練習、