PHP编程实战15.2.3 Ajax的同步和异步事件

<!--PHP编程实战-->
<!--JSON & Ajax -->
<!--15-3-->
<!--在JavaScript中创建XMLHttpRequest对象-->
<script type="text/javascript">
    var xhr=new XMLHttpRequest();
</script>

• 请求方法: {"GET", "POST", "HEAD", "PUT", "DELETE", "OPTIONS"}之一
• URL: 请求的URL. 可以是PHP JavaScript HTML i纯文本或者其他的文件类型
• 异步的(可选): 默认为true,表示非阻塞调用.
• 用户名(可选): 请求的服务器需要验证身份时候的用户名.
• 密码(可选): 请求的服务器需要验证身份时候的密码.

同步调用

没有监听,JavaScript代码会等到服务器响应之后再继续执行。在收听到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下：

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

应该像下面这样检查同步请求的状态码

xhr.open("get", "example.txt", false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {    
  alert(xhr.statusText);
} else {    
  alert("Request was unsuccessful: " + xhr.status);
}

通过检测status来解决下一步的操作，不要依赖statusText，因为后者在跨浏览器使用时不太可靠。

异步调用 onreadystatechange回调函数监听

检测XHR对象的readyState属性

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

必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。这里采用跨浏览器安全的DOM0级方法

var xhr = createXHR();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.statusText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

参考: http://www.w3cmm.com/ajax/xmlhttprequest.html