ajax

AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式[网页]
应用的网页开发技术。
AJAX = 异步 [JavaScript]和[XML]（[标准通用标记语言])的子集）。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。[1]

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

// 函数封装的是代码，采用面向对象的形式封装

(function () {

var a = 100;


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

// 增加1个方法： get方法
/*
 * 参数：
 *   obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
 *      url         请求的地址与参数
 *      data        发送的数据
 *      async       是否是同步,  true / false
 *      fail        失败的处理回调函数
 *      success     成功的处理回调函数
 */
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 += encodeURIComponent(obj[i])
                    str += "&"
                }
                str = str.substring(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方法
/*
 * 参数：
 *   obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
 *      url         请求的地址与参数
 *      data        发送的数据
 *      async       是否是同步,  true / false
 *      fail        失败的处理回调函数
 *      success     成功的处理回调函数
 */
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();
        }
    }
    
}

})();