js-JavaScript高级程序设计学习笔记18

 

第21章 AJAX

4、跨域源资源共享

CORS跨域源资源共享，其背后思想，是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是否应该成功。

1、IE对CORS的实现

在IE8中引入了XDR类型，类似于XHR。所有XDR请求都是异步执行，所以open（）只接收两个参数。

2、其他浏览器对CORS的实现

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

对于本地资源，最好使用相对URL，在访问远程资源时再使用绝对URL。

3、Preflighted Requests

透明服务器验证机制。

4、带凭据的请求

withCredentials属性设置为true。如果发送的是带凭据的请求，但是服务器的响应中没有包含接受带凭据的请求的头部，那么浏览器不会把响应交给JS，所以responseText为空字符串，status为0，而且会调用onerror事件处理程序。

5、跨浏览器的CORS

检查XHR是否支持CORS的最简单方式，就是检查是否存在withCredentials属性，再结合XdomainRequest对象是否存在，就可以兼顾所有浏览器了。

5、其他跨域技术

1、图像Ping

用于浏览器与服务器间的单向通信。只能发送GET请求，无法访问服务器的响应文本。

2、JSONP

JSON with padding，填充式JSON或参数式JSON.

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，数据是传入回调函数的JSON数据。JSONP通过动态<script>元素来使用的。

3、Comet（服务器推送）

是一种服务器向页面推送数据的技术，适合处理体育比赛的分数和股票报价。

两种实现Comet的方式——长轮询和流。

短轮询：浏览器定时向服务器发送请求，看有没有更新的数据。

长轮询：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可以发送，发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求。

轮询通过XHR对象和setTimeout（）可以实现。

HTTP流，不同于轮询，它在页面的整个生命周期内只使用一个HTTP连接，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。

4、服务器发送事件（SSE）。

①SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。

②事件流。

5、Web Sockets

传递的数据包小，所以适合移动应用。

6、SSE与Web Sockets

考虑使用SSE还是WS，考虑如下几个因素：①是否有自由度建立和维护WS服务器？因为WS协议不同于HTTP，现有服务器不能用于WS通信。②是否需要双向通信，如果只需读取服务器数据，SSE可以满足，结合XHR和SSE也可以实现双向通信。

6、安全

CSRF跨站点请求伪造。