Javascript学习笔记（十）——Ajax与Comet

Ajax与Comet

Ajax技术的核心是XMLHttpRequest对象（简称XHR）

XMLHttpRequest对象

新建XMLHttpRequest对象

let xhr = new XMLHttpRequest();

XHR的用法

使用XHR 对象要调用open()方法，它接受3 个参数：要发送的请求的类型（“get”、"post"等）、请求的URL 和表示是否异步发送请求的布尔值

xhr.open("get", "example.php", false);

调用open()方法并不会真正发送请求，只是启动请求以备发送

xhr.send(null);//发送特定请求

在收到响应后，响应的数据会自动填充XHR对象的属性：

• responseText：作为响应主体被返回的文本。
• responseXML：如果响应类型是"text/xml"或"application/xml"，这个属性中保存包含着响应数据的XML DOM 文档。
• status：响应的HTTP 状态。
• statusText：HTTP 状态的说明。

接收响应之后第一步需检查status属性，以确定响应已成功返回

    if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
   
        alert(xhr.responseText);
    }else{
   
        alert("Request was unsuccessful: " + xhr.status);

发送异步请求，让Javascript继续执行而无需等待响应。可通过检测XHR对象的readyState属性，可能值：

• 0：未初始化。尚未调用open()方法。
• 1：启动。已经调用open()方法，但尚未调用send()方法。
• 2：发送。已经调用send()方法，但尚未接收到响应。
• 3：接收。已经接收到部分响应数据。
• 4：完成。已经接收到全部响应数据，可以在客户端使用了。

readyState属性的变化会触发readyStatechange事件。

	let xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function (e) {
   
        if(xhr.readyState === 4){
   
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
   
                alert(xhr.responseText);
            }else{
   
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    }