第二十一章 Ajax与Comet

1. 在发送XHR请求的同时，还会发送以下头部信息：

① Accept：浏览器能够处理的内容类型

② Accept-Charset：浏览器能够显示的字符集

③ Accept-Encoding：浏览器能够处理的压缩编码

④ Accept-Language：浏览器当前设置的语言

⑤ Connection：浏览器与服务器之间连接的类型

⑥ Cookie：当前页面设置的任何Cookie

⑦ Host：发出请求的页面所在的域

⑧ Referer：发出请求的页面的URI

⑨ User-Agent：浏览器的用户代理字符串

---

2. GET请求的查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；并且所有名-值对都必须由和号（&）分隔

---

3. XMLHttpRequest 2级中定义了FormData类型，用于序列化表单以及创建与表单格式相同的数据。

---

4. 微软在IE8中引入了XDR（XDomainRequest）类型，这个对象与XHR类似，但是能实现安全可靠的跨域通信。XDR与XHR相比的的不同之处：

① XDR的cookie不会随请求发送，也不会随请求返回。 

② XDR只能设置请求头部信息中的Content-Type字段.

③ XDR不能访问响应头部信息

④ XDR只支持GET请求和POST请求

XDR的这些变化使CSRF（Cross-Site Request Forgery，跨站点请求伪造）和XSS（Cross-Site Scripting，跨站点脚本）的问题得到了缓解。

---

5. 跨域XHR对象为了安全所做的限制：

① 不能使用setRequestHeader()设置自定义头部；

② 不能发送和接收cookie

③ 调用getAllResponseHeaders()方法总会返回空字符串

---

6. 检测XHR是否支持CORS（Cross-Origin Resource Sharing，跨源资源共享）的最简单方式，就是检查是否存在withCredentials属性，同时结合检测XDomainRequest对象是否存在。

---

7. 其他跨域技术：

① 图像Ping：与服务器进行简单、单向的跨域通信的一种方式。请求的数据通过查询字符串形式发送，而响应式任意内容。浏览器得不到任何具体的数据，但通过监听load和error事件判断服务器何时接收到请求。

    其最常用于跟踪用户点击页面或动态广告曝光次数。

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

② JSONP：包括回调函数和数据两个部分。

    两个主要缺点：一是如果JSONP加载代码的来源域不安全，很可能会在响应中夹杂一些恶意代码，此时只能完全放弃JSONP调用；二是要确定JSONP请求是否失败并不容易。

③Comet：是一种服务器向页面推送数据的技术。有长轮询和HTTP流这两种方式实现。

    长轮询：浏览器在接收数据之前，先发起对服务器的连接，使用XHR对象和setTimeout()就能实现；

    HTTP流：浏览器想服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。 

④ SSE：SSE（Server-Sent Events,服务器发送事件）是围绕只读Comet交互推出的API或者模式。SSE API用于创建到服务器的单向连接，服务器响应的MIME类型必须是text/event-stream

⑤ Web Socket：在JavaScript中创建Web Socket后，会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议。

---

8. 创建Web Socket步骤：

① 实例一个WebSocket对象并传入要连接的URL（绝对URL）：

var socket = new WebSocket("ws://www. example.com/server. php");

② 发送数据（只能发送纯文本数据）：

socket.send("Hello WebSocket");

③ 接收数据，当服务器向客户端发来消息时，WebSocket对象就会触发message事件（返回的数据保存在event.data属性中）：

socket. onmessage = function (event){

        var data = event. data;

}

④ open事件，在成功建立连接时触发：

socket. onopen = function(){

        console.log("此时连接已经成功建立");

}

⑤ error事件，在发生错误时触发，连接不能持续：

socket. onerror = function(){

        console.log("连接发生错误，快看看什么问题");

}

⑥ close事件，在连接关闭时触发：

socket. onclose = function(event){

        console.log(event. wasClean);    // wasClean是个布尔值，表示连接是否已经明确地关闭

        console.log(event. code);            // code是服务器返回的数值状态码

        console.log(event. reason);// reason是个字符串，包含服务器返回的消息

}