Successfully reported this slideshow.
跨域 XHR你不知道的 HTTP  RDSS 小组   2012-04
作者     沉鱼     fool2fish@gmail.com     http://fool2fish.cn
关于RDSSResearch on Domain Specific Solution我们致力于已有的规范、解决方案、产品等研究并实践到工作中
演示http://fool2fish.aliapp.com/rdss/http/xhr.  html服务器端源码http://fool2fish.aliapp.com/rdss/http/ser  ver.js
目录•   Ajax 结构•   参考资料•   简单请求•   Preflight 请求•   带验证的请求•   兼容性
Ajax 结构                    Ajax  getScript         jsonp           Xhr                    Same                        Cros...
参考资料• Cross-Origin Resource Sharing – w3c• Cross-domain Ajax with Cross-Origin  Resource Sharing - ncz• HTTP access contro...
• Cross-Origin Resource Sharing  (CORS)是W3c工作草案,它定义了在  跨域访问资源时浏览器和服务器之间  如何通信。CORS背后的基本思想是  使用自定义的HTTP头部允许浏览器和  服务器相互了解对方,...
简单请求
浏览器• 对一个简单的请求,没有自定义头部,  要么使用GET,要么使用POST,它的  Content-type为text/plain,请求会发送  一个名叫Orgin的额外的头部。例:Origin: http://fool2fish.cnR...
服务器• 如果服务器确定请求被通过,它将发  送一个Access-Control-Allow-Origin头  部响应发送请求的同一个源,如果是  一个公共资源,则返回“*”。例:Access-Control-Allow-Origin: htt...
• 注意,请求和响应都不包括cookie信  息。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
• FF3.5 +,Safari 4和chrome通过使用  XMLHttpRequest对象支持其使用。在  IE8中也是一样,用同样的方式你需要  使用XDomainRequest对象。Refer: Cross-domain Ajax wi...
Preflight 请求
Browser• 除了GET或POST,通过一种称之为  preflighted请求的服务器透明验证机制,  CORS允许使用自定义的头部和方法,以  及不同主体内容类型。当你尝试使用高级  选项中的一个来试着建立一个请求时,这  时就建立了一...
Server• 在请求期间,服务器能决定是否允许  这类请求。服务器通过在响应中发送  以下头部来与浏览器通信。   – Access-Control-Allow-Origin   – Access-Control-Allow-Methods ...
• preflighted 请求一旦作出,结果将按  响应中规定的时间缓存下来;第一次  做出这样的请求,你将引发一次额外  的HTTP请求。• Firefox 3.5+, Safari 4+和Chrome都支  持preflighted 请求...
带验证的请求
Browser• 默认状态下,跨域请求不提供证书  (cookie、HTTP身份验证、客户端SSL  证书)。你可以规定一个请求应该通过设  置withCredentials属性为true来发送证书。  如果服务器允许credentialed请...
Server• 如果一个credentialed请求被发送,而  这个头部没在响应头中相应的返回,  浏览器不会将响应传递给  JavaScript(responseText是一个空字  符串,状态为0,onerror()被调用)。Refer:...
• IE8不支持withCredentials属性,irefox  3.5+, Safari 4+和Chrome都支持它。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing -...
兼容性                ie6   ie7   ie8      ie9   chrom   firefox   safari                                           exd xhr  ...
Upcoming SlideShare
Loading in …5
×

你不知道的HTTP 之 跨域XHR

30,383 views

Published on

RDSS:
特定领域解决方案研究。
我们致力于已有的规范、解决方案、产品等研究,
并实践到工作中。

本章讲述了跨域XHR的实现。

  • Be the first to comment

你不知道的HTTP 之 跨域XHR

  1. 1. 跨域 XHR你不知道的 HTTP RDSS 小组 2012-04
  2. 2. 作者 沉鱼 fool2fish@gmail.com http://fool2fish.cn
  3. 3. 关于RDSSResearch on Domain Specific Solution我们致力于已有的规范、解决方案、产品等研究并实践到工作中
  4. 4. 演示http://fool2fish.aliapp.com/rdss/http/xhr. html服务器端源码http://fool2fish.aliapp.com/rdss/http/ser ver.js
  5. 5. 目录• Ajax 结构• 参考资料• 简单请求• Preflight 请求• 带验证的请求• 兼容性
  6. 6. Ajax 结构 Ajax getScript jsonp Xhr Same Cross origin domain Get post Get post
  7. 7. 参考资料• Cross-Origin Resource Sharing – w3c• Cross-domain Ajax with Cross-Origin Resource Sharing - ncz• HTTP access control (CORS) – mdn• http://arunranga.com/examples/acces s-control/ (demo)
  8. 8. • Cross-Origin Resource Sharing (CORS)是W3c工作草案,它定义了在 跨域访问资源时浏览器和服务器之间 如何通信。CORS背后的基本思想是 使用自定义的HTTP头部允许浏览器和 服务器相互了解对方,从而决定请求 或响应成功与否。
  9. 9. 简单请求
  10. 10. 浏览器• 对一个简单的请求,没有自定义头部, 要么使用GET,要么使用POST,它的 Content-type为text/plain,请求会发送 一个名叫Orgin的额外的头部。例:Origin: http://fool2fish.cnRefer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  11. 11. 服务器• 如果服务器确定请求被通过,它将发 送一个Access-Control-Allow-Origin头 部响应发送请求的同一个源,如果是 一个公共资源,则返回“*”。例:Access-Control-Allow-Origin: http://fool2fish.cnRefer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  12. 12. • 注意,请求和响应都不包括cookie信 息。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  13. 13. • FF3.5 +,Safari 4和chrome通过使用 XMLHttpRequest对象支持其使用。在 IE8中也是一样,用同样的方式你需要 使用XDomainRequest对象。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  14. 14. Preflight 请求
  15. 15. Browser• 除了GET或POST,通过一种称之为 preflighted请求的服务器透明验证机制, CORS允许使用自定义的头部和方法,以 及不同主体内容类型。当你尝试使用高级 选项中的一个来试着建立一个请求时,这 时就建立了一个preflighted请求。该请求 使用可选的方法,并发送如下头部: – Origin – Access-Control-Request-Method – Access-Control-Request-HeadersRefer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  16. 16. Server• 在请求期间,服务器能决定是否允许 这类请求。服务器通过在响应中发送 以下头部来与浏览器通信。 – Access-Control-Allow-Origin – Access-Control-Allow-Methods – Access-Control-Allow-Headers – Access-Control-Max-AgeRefer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  17. 17. • preflighted 请求一旦作出,结果将按 响应中规定的时间缓存下来;第一次 做出这样的请求,你将引发一次额外 的HTTP请求。• Firefox 3.5+, Safari 4+和Chrome都支 持preflighted 请求,IE8则不支持。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  18. 18. 带验证的请求
  19. 19. Browser• 默认状态下,跨域请求不提供证书 (cookie、HTTP身份验证、客户端SSL 证书)。你可以规定一个请求应该通过设 置withCredentials属性为true来发送证书。 如果服务器允许credentialed请求,那么 它将用下面的头部作出响应:例:Access-Control-Allow-Credentials: trueRefer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  20. 20. Server• 如果一个credentialed请求被发送,而 这个头部没在响应头中相应的返回, 浏览器不会将响应传递给 JavaScript(responseText是一个空字 符串,状态为0,onerror()被调用)。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  21. 21. • IE8不支持withCredentials属性,irefox 3.5+, Safari 4+和Chrome都支持它。Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
  22. 22. 兼容性 ie6 ie7 ie8 ie9 chrom firefox safari exd xhr no no XDom yes yes yes yes ainReq uestwithCredentia no no no yes yes yes Yeslssolution swf swf swf xhr xhr xhr xhr

×