[笔记]《JavaScript高级程序设计》- Ajax与Comet

Posted 2020-10-21 symind

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[笔记]《JavaScript高级程序设计》- Ajax与Comet相关的知识，希望对你有一定的参考价值。

在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。

一、XMLHttpRequest 对象

1 XHR的用法

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

要发送特定的请求，必须向下面这样调用send()方法。send()方法要接受一个参数，作为请求主体发送的数据。如果不需要通过请求主题发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。

当请求是同步时，javascript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下。

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

在接受到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。此时，状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。

XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

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

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange时间。可以利用这个事件来检测每次状态变化后readyState的值。

在接受到响应之前还可以调用abort()方法来取消异步请求，如下。

xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议从用XHR对象。

2 HTTP头部信息

XHR对象也提供了操作请求头部和响应头部信息的方法。

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

使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后切调用send()方法之前调用setRequestHeader()。

3 GET请求

对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。查询字符串中每个参数的名称和值都必须使用encodeURIComponet()进行编码，然后才能放到URL末尾；而且所有名-值对儿都必须由和号（&）分隔。

4 POST请求

使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。POST数据的格式与查询字符串相同。

二、XMLHttpRequest 2级

1 FormData

FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）。

下面的代码创建了一个FormData对象，并向其中添加了一些数据。

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

append()方法接受两个参数：键和值，分别对应表单字段的名字和字段中包含的值。可以如上这样添加任意多个键值对儿。而通过想FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对儿：

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

创建了FormData的实例后，可以将它直接传给XHR的send()方法。

使用FormData的方便之处体现在不必明确地再XHR对象上设置请求头。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。

2 超时定义

IE8为XHR对象添加了一个timeout属性，表示请求再等待响应多少毫秒后就终止。在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。这项功能后来也被收入了XMLHttpRequest 2级规范中。

3 overrideMimeType()方法

Firefox最早引入了overrideMimeType()方法，用于重写XHR响应的MIME类型。这个方法也被纳入了XMLHttpRequest 2级规范。因为返回响应的MIME类型决定了XHR对下岗你如何处理它，所以提供了一种方法能够重写服务器返回的MIME类型是很有用的。

三、进度事件

PrograssEvents规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其他API借鉴。有以下6个进度事件。

loadstart：在接收到响应数据的第一个字节时触发。
progress：在接受响应期间持续不断地触发。
error：在请求发生错误时触发。
abort：在应为调用abort()方法而终止连接时触发。
load：在接受到完整的响应数据时触发。
loadend：在通信完成或者触发error、abort或load事件后触发。

每个请求都从触发loadstart事件开始，接下来是一或多个progress事件，然后触发error、abort或者load事件中的一个，最后以触发loadend事件结束。

四、跨域资源共享

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。

CORS（Cross-Origin Resource Sharing，跨域安全资源共享）是W3C的一个工作草案，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应时应该成功，还是应该失败。

1 IE对CORS的实现

微软在IE8中引入了XDR（XDomainRequest）类型。这个对象与XHR类似，但能实现安全可靠的跨域通信。

cookie不会随请求发送，也不会随响应返回。
只能设置请求头部信息中的Conent-Type字段。
不能访问响应头部信息。
只支持GET和POST请求。

2 其他浏览器对CORS的实现

WebKit通过XMLHttpRequest对象实现了对CORS的原生支持。要请求位于另一个域中的资源，使用标准的XHR对象并在open()方法中传入绝对URL即可。

跨域XHR对象也有一些限制。

不能使用setRequestHeader()设置自定义头部。
不能发送和接受cookie。
调用getAllResponseHeaders()方法总会返回空字符串。

五、其他跨域技术

1 图像Ping

图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候接收到的。

var img = new Image();
img.onload = img.onerror = function() {
    alert(‘Done!‘);
};
img.src = ‘http://www.example.com/test?name=Nicholas‘;

Ping的两个主要的缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。因此，图像Ping只能用于浏览器与服务器间的单项通信。

图像Ping有两个主要的缺点，一是只能发送GET请求，而是无法访问服务器的响应文本。

2 JSONP

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写。JSONP看起来与JSON差不多，只不过是包含在函数调用中的JSON，如下。

callback({"name": "Nicholas"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。

JSONP是通过动态<script>元素来使用的，使用时可以为src属性指定一个跨域URL。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。

与图像Ping相比，他的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，JSONP也有两点不足。

首先JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP调用之外，没有办法追究。因此在使用不是你自己运维的Web服务时，一定要保证它安全可靠。

其次，要确定JSONP请求是否失败并不容易。虽然html5给<script>元素新增了一个onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。但就算这样也不能尽如人意，毕竟不是每个用户上网的速度和带宽都一样。

3 Comet

Comet是一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地推送到页面上，非常适合处理体育比赛分数和股票报价。

有两种实现Comet的方式：长轮询和流。长轮询是传统轮询（也称短轮询）的一个翻版，即浏览器定时发送请求，看有没有更新的数据。

短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。轮询的优势是所有浏览器都支持，因为使用XHR对象和setTimeout()就能实现。而你要做的就是决定什么是否发送。

第二种流行的Comet实现是HTTP流。流不同于上述两种轮询，因为它在页面的整个生命周期内只使用一个HTTP连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。

所有服务器端语言都支持打印到输出缓存然后刷新（将输出缓存中的内容一次性全部发送到客户端）的功能。而这正是实现HTTP流的关键所在。

通过侦听readystatechange事件及检测readyState的值是否为3，就可以利用XHR对象实现HTTP流。在上述这些浏览器中，随着不断从服务器接收数据，readyState的值会周期性地变成3。当readyState值变为3时，responseText属性中就会保存接收到的所有数据。此时，就需要比较此前接收到的数据，决定从什么位置开始取得最新的数据。使用XHR对象实现HTTP流的典型代码如下所示。

function createStreamingCilent(url, progress, finished) {
    var xhr = new XMLHttpRequest(),
        received = 0;
    xhr.open(‘get‘, url, true);
    xhr.onreadystatechange = function() {
        var result;
        if(xhr.readyState == 3) {
            result = xhr.responseText.substring(receivied);
            received += result.length;
            progress(result);
        } else if(xhr.readyState == 4) {
            finished(xhr.responseText);
        }
    };
    xhr.send(null);
    return xhr;
}
var client = createStreamingClient(‘streaming.php‘, fucntion(data) {
    alert("Received" + data);
}, function(data) {
    alert("Done!");
});