第二十一章 Ajax与Comet

hghh
145 阅读4分钟

XMLHttpRequest对象

var xhr = new XMLHttpRequest();
xhr.open();
xhr.setRequestHeader();
xhr.send();

readyState 属性的可能值：

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

HTTP头部信息

默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

  • Accept：浏览器能够处理的内容类型
  • Accept-Charset：浏览器能够显示的字符集
  • Accept-Encoding：浏览器能够处理的压缩编码
  • Accept-Language：浏览器当前设置的语言
  • Connection：浏览器与服务器之间的连接类型
  • Cookie：当前页面设置的任何Cookie
  • Host：发出请求的页面所在的域
  • Referer：发出请求的页面的URI
  • User-Agent：浏览器的用户代理字符串

使用 setRequestHeader() 方法可以设置自定义的请求头信息，这个方法接收两个参数：头部字段的名称、头部字段的值，该方法调用时机在 open() 和 send() 之间

使用 getResponseHeader() 方法可以取得响应头部信息，这个方法接收一个参数：头部字段名称

使用 getAllResponseHeaders() 方法可以取得一个包含所有头部信息的长字符串

XMLHttpRequest 2级

FormData

FormData 是 XMLHttpRequest 2级定义的表单数据序列化功能，可以通过 append() 方法（接收两个参数：键、值）添加键值对，也可以直接在 FormData 构造函数中传入表单元素。

var data = new FormData();
data.append("name", "chen");

var data = new FormData(document.forms[0]);

超时设定

XMLHttpRequest 2 级为 XHR 对象添加了一个 timeout 属性，表示请求在等待响应多少毫秒之后就终止。如果在规定的时间内浏览器还没有接收到响应，就会触发 timeout 事件，进而调用 ontimeout 事件处理程序

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    try {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
      } else {
        alert("Request was unsuccessful: " + xhr.status);
      }
    } catch (ex) {
      //假设由 ontimeout 事件处理程序处理
    }
  }
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //将超时设置为 1 秒钟
xhr.ontimeout = function () {
  alert("Request did not return in a second.");
};
xhr.send(null);

overrideMimeType() 方法

overrideMimeType() 方法用于重写 XHR 响应的 MIME 类型，调用时机在 open() 和 send() 之间。服务器返回的 MIME 类型是 text/plain， 可以通过该方法修改为 text/xml

var xhr = new XMLHttpRequest();
xhr.open();
xhr.overrideMimeType("text/xml");
xhr.send(null);

进度事件

进度事件有6个：

  • loadstart：在接收到响应数据的第一个字节时触发
  • progress：在接收响应期间持续不断地触发。 onprogress 事件处理程序会接收到一个 event 对象，其 target 属性是 XHR 对象，但包含三个额外的属性： lengthComputable（表示进度学习是否可用的布尔值）、position（以及接收的字节数） 和 totalSize（根据 Conten-Length 响应头部确定的预期字节数）。需要在 open() 方法之前添加 onprogress 事件处理程序
  • error：在请求发生错误时触发
  • abort：在调用 abort() 方法而终止连接时触发
  • load：在接收完整的响应数据时触发
  • loadend：在通信完成或者触发 error 、 abort 或者 load 事件后触发

跨域源资源共享

CORS（跨源资源共享），定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。 比如一个简单的使用， GET 或 POST 发送的请求，它没有自定义的头部，而主体内容是 text/plain。在发送该请求时，需要给它附加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。如下：

Origin: www.nczonline.net

如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源信息（公共资源可以回发"*"）。例如：

Access-Control-Allow-Origin: www.nczonline.net

如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。

注意：请求和响应都不包含 cookie 信息

带凭证的请求

默认情况下，跨源请求不提供凭据（cookie、HTTP 认证及客户端 SSL 证明 等 ）。 通过将 withCredentials 属性设置为 true，可以指定某个请求应该发送凭据。如果服务器接受带凭据的请求，会用该 HTTP 头部来响应：Access-Control-Allow-Credentials: true

avatar
文章
阅读
粉丝