AJAX

什么是AJAX

AJAX是异步的JavaScript和XML，是一种创建交互式网页应用的网页开发技术。

---

XMLHttpRequest 是 AJAX 的基础。

var xhr = new XMLHttpRequest();

---

向服务器发送请求

xhr.open(method,url,async);
xhr.send();

• 参数1：请求数据的方式 GET / POST 等
• 参数2：请求数据的地址
• 参数3：false是同步，true是异步
  异步：请求数据和页面执行时互不干扰的

---

GET 还是 POST
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

---

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

• responseText 获得字符串形式的响应数据。
• responseXML 获得 XML 形式的响应数据。

---

创建XMLHttpRequest 对象的语法：

利用回调函数：onreadystatechange 在 准备状态 发生改变时。状态改变时，会自动调用这个函数。

xhr.onreadystatechange=function()
  {
  if (xhr.readyState==4 && xhr.status==200)
    {
    //获取数据
document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

xhr.readyState 准备状态
0 还没有发送请求
1 已经发送请求，服务器还没收到
2 服务器已经收到请求，还没有处理
3 服务器已经处理好，并发送给客户端
4 客户端已经收到数据

---

附上AJAX的封装函数

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

(function () {



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

// 增加1个方法： get方法
/*
 * 参数：
 *   obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
 *      url         请求的地址与参数
 *      data        发送的数据, 要求格式是 对象
 *                      例如  {type:"send"} ， {type:"send", msg: "GG啦~"}
 *      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 += "?";
    //  translate 自定义的函数，将对象 转换成拼接字符串
    url += translate(obj.data);
    
    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();
        }
    }
    
}

// 定义函数
function translate(obj) {
    var str = "";
    for (var i in obj) {
        
        str += i;      // 拼接属性名     type
        str += "=";    // 拼接=       =
        str += encodeURIComponent(obj[i])  // 拼接属性值     send
        str += "&";    // 拼接&       &
    }
    
    // 删除最后1个字符
    str = str.substr(0, str.length-1);
    
     return str;
}

// 调用函数，因为定义和调用在同一个空间，这是可以调用的
// translate({})

})();