第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跨站点请求伪造。