第二十一章 Ajax与Comet

2017-06-22  本文已影响15人  张果果

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是个字符串,包含服务器返回的消息

}

上一篇下一篇

猜你喜欢

热点阅读