Ajax与comet

2018-03-07

第21章 Ajax和Comet

Ajax,Asynchronous Jacascript+XML的缩写，这一技术能够向服务器请求额外的数据而无须卸载页面。

核心是XMLHttpRequest对象，简称（XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能以异步方式从服务器取得更多信息，意味着用户单击后可以不必刷新页面也能取得新数据。

也就是说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

用法：

1、先创建XHR对象。

var xhr=new XMLHttpRequest();

2、调用open方法，接受三个参数：要发送的请求类型，请求的URL和是否异步发送。调用open()只是启动一个请求以备发送，还没真正发送

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

3、send() 一个参数: 请求主体发送的数据，不需要通过请求主体发送数据则传入null。

调用send()后，请求被分派到服务器。

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

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

responseText：作为响应的主体被返回的文本；

responseXML：若响应的内容类型”text/xml”或”application/xml”，此属性保存响应数据XML DOM文档

status：响应的HTTP状态；用以确认响应是否成功返回。

statusText：HTTP状态的说明。

无论什么内容类型，响应主体的内容都会保存在responseText属性中。对于非XML数据，responseXML属性值为null。

5、HTTP状态代码：

200：响应有效，responseText属性已就绪，内容类型正确下的responseXML也可访问。

304：响应有效，只是请求的资源并为修改，可直接使用浏览器中缓存的版本。

正确检查上述2种状态代码:

status判断

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

6、readystate属性

该属性存储请求/响应过程的当前活动状态。

0 : 未初始化，未调用open()；
1 : 启动，调用了open()；
2 : 发送，调用了send()，未接受响应；
3 : 接受，已接受部分响应；
4 : 完成，已接受全部响应，且可在客户端使用。

7、readystatechange事件（用于异步）

该事件，在readystate属性值改变时触发。

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