我理解的ajax

　　看了两天的AJAX，说下自己对AJAX的理解。

　　AJAX无需重新加载整个页面，来实现部分网页的更新。可以带来更好的用户体验。

 

正文：

　　一：在使用AJAX时首先建一个 XMLHttpRequest 对象(简称 XHR ):

let xhr = new XMLHttpRequest();//使用于IE7+和其他浏览器

　　　　XHR 是 AJAX 的核心技术，用于在后台与服务器交换数据。

 

　　二：定义了 XHR 对象之后，我们可以使用 XHR 的 open() 和 send() 方法，open() 方法会启动一个请求，调用 send() 方法后，请求会被分派到服务器。

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

 　　    open() 方法中有三个参数：

　　　　　　method：请求的类型，get 或 post；

　　　　      url：文件在服务器的位置；

　　　　　　async：true (异步) 或 false (同步);

　　     send() 方法中有一个参数，仅用于 post 请求；

 

　　三：当服务器响应请求后，响应的数据会自动填充 XHR 对象的属性，相关属性如下：

• responseText：保存字符串形式的返回文本；
• responseXML：保存 XML 形式的返回数据；
• status：响应HTTP状态；
• onreadystatechange：当 readyState 的值改变时，会调用该函数；
• readyState：表示请求或响应过程的当前活动阶段。有五个值：
  • 0：尚未调用 open() 方法。
  • 1：调用了 open() 方法，尚未调用send()方法。
  • 2：调用了 send() 方法，未接收到响应。
  • 3：接受到部分的响应数据。
  • 4：数据接受完成。

 　　收到响应后，先检查 status 和 readyState  属性，一般将 status = 200 且 readyState = 4，作为成功的标志。此时，responseText 或 responseXML 已经获取服务器返回的数据。书上说，在调用 open() 之前，需指定 onreadystatechange(),才能确保跨浏览器的兼容性。在实际验证中 (IE8+, firefox, chrome) ，open() 和 onreadystatechange()的前后顺序并无影响。

　　

　　四：具体示例（点这点这），完整代码如下：

//html代码
<input type="button" value="点这点这">
<p id="hint">这是一个p</p>

//js代码
let hint = document.getElementById('hint');
let input = document.getElementsByTagName('input');
if (input[0].addEventListener) {
    input[0].addEventListener('click', function() {        
        loadXHR();
    });
} else {
    input[0].attachEvent('onclick', function() {
        loadXHR();
    });
}
function loadXHR() {
    let xhr = new XMLHttpRequest();            
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            hint.innerHTML = xhr.responseText;
        }
    }
    xhr.open('get', 'ajax.php', true);
    xhr.send();    
}