ajax跨域请求

1、发表于:2010-1-11浏览:965 作者: 32 / 32 转载遗失来源 : 网络转载 关键字 : AJAX详解请求 描述: 以下代码请在 Firefox 3. I! 5、 Chrome 3. I! 0、Safari4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域 请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资 源。 这种情况很常见 以下代码请在 Firefox 3. 5、 Chrome 3. 0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同 跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站 点上的资源。这种情况很常

2、见，比如说通过 style 标签加载外部样式表文件、通 过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略 （ Same origin policy）。 那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同 的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本 访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相 同，则还可以通过设置 document.domain 属性将它们认为是同源的。 随着 Web 2.0和SNS的兴起，Web应用对跨

3、域访问的需求也越来越多，但是，在脚 本中进行跨域请求是受安全性限制的， Web 开发人员迫切需要提供一种更安 全、方便的跨域请求方式来融合（Mashup）自己的Web应用。这样做的一个好 处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速 度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负 载。 值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一 标准。W3C工作组中的 WebApplicationsWorking Group（Web应用工作组）发布 了一个 Cross-Origin Resource Sharin（g 跨域资源共享，该规范地址：

4、http: 3.org/TR/access-c on trol/和 http: /dev.w 该规范只能应用在类似 XMLHttprequest这样的API容器内。IE 8、 Firefox 3.5及其以后的版本、Chrome浏览器、Safari 4等已经实现了 Cross-Origin Resource Shari ng规范，已经可以进行跨域请求了。 Cross-Origin Resource Shari ng勺工作方式是通过添加 HTTP头的方法来判断 哪些资源允许 Web浏览器访问该域名下的信息。然而，对于那些HTTP请求导 致用户数据产生副作用的请求方法（特别是对于除了GET某些MIM

5、E类型的 POST之外的HTTP方法），该规范要求浏览器对请求进行预先验”通过发送 HTTP的OPTIONS请求头询问服务器有哪些支持的方法，在征得服务器的同意 后，再使用实际的HTTP请求方法发送实际的请求。服务器也可以通知客户端是 否需要将验证信息（如Cookie和HTTP Authentication数据）随同请求一起发 送。 下面我们就采用实际的例子说明 Cross-Origin Resource Shari n是如何工作 的。 1，简单请求 什么样的请求算是简单请求呢？简单请求必须满足下面 2 点： b, HTTP请求没有设置自定义的请求头，如我们常用的X-JSON 先使用下面的代码

6、进行测试： 孟宪会之AJAX跨域请求测试 !- var xhr = new XMLHttpRequest(); var url = ,http: function crossDomainRequest() docume nt.getEleme ntByld(co nte nt).i nn erHTML =开始; if (xhr) xhr.open(,GET, url, true); xhr.onreadystatechange = handler; xhr.send(); else document.getElementByld(content).innerHTML = 不能创建 XMLHtt

7、pRequest;function handler(evtXHR) if (xhr.readyState = 4) if (xhr.status = 200) var response = xhr.responseText; document.getElementByld(content).innerHTML = 结果： + response; else document.getElementById(content).innerHTML = 不允许跨域请求。 ; else document.getElementById(content).innerHTML += 执行状态 readyStat

8、e： +xhr.readyState; / - 然后，在服务器创建 CrossDoma in Request.aspX勺内容如下： 点击“开始测试 ”按钮，发送勺请求和返回勺响应信息如下： GET /SimpleCrossSiteRequests.aspx HTTP/ Host: User-Agent: Mozilla/ 5.0 (Windows; U;Windows NT 5.2; zh-CN; rv: 1. 9. 1.7) Gecko/Firefox/ 3. I! 5.7 (.NET CLR 3. 5.30729) Accept: text/html,application/xhtml+x

9、ml,application/xml;q= 0.9,*/*;q= 0.8 Accept-Language: 0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q= 0.7,*;q= 0.7 Keep-Alive: 300 Connection: keep-alive Refer: http: http: HTTP/ 1.x 200 OK Date: Sun, 10 Jan 2010 13:52:00 GMT Server: Microsoft-IIS/ 6.0 X-Powered-By: ASP.NET X-AspNe

10、t-Version: I! 0.50727 Access-Control-Allow-Origin: http: Set-Cookie: ASP.NET_SessionId=wk5v5nrs5wbfi4rmpjy2jujb; path=/; HttpOnlyCache- Control: private Content-Type: text/html; charset=utf-8 Content-Length: 84 需要特别注意的是： 在请求信息中，浏览器使用 Origin这个HTTP头来标识该请求来自于http: *，则允许所有域名的脚本访问该资源。如果有多个，则只需要使用逗号 分隔开即可

11、。 在服务器端，Access-Control-Allow-Origin响应头 http: 有人可能会想： 自己发送请求头会如何呢？比如 xhr.setRequestHeader(Origin,http: Response.AddHeader(Access-Control-Allow-Origin, http: 这行代码就告诉浏览器，只有来自 http: 好了，上面我们就完成了一个简单的跨域请求，怎么样？感觉还是不错的 吧。下面我们进行一个 “预检 ”请求。 2，预检请求 预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTION请求头, 其目的就是为了判断实际发送的请求是否是安全的。

12、下面的 2 种情况需要进行 预检： a，不是上面的简单请求，比如使用 Content-Type为application/xml或 text/xml的POST请求b,在请求中设置自定义头，比如 X-JSON X- MENGXIANHU 等 在iis里进行测试，必须在应用程序扩展”里面配置.aspx扩展的动作允许 OPTIONS。 下面我们举一个预检的请求： vtitle孟宪会之AJAX夸域请求测试 !- var xhr = new XMLHttpRequest(); var url = ,http: function crossDomainRequest() document.getElemen

13、tByld(content).innerHTML =开始进行请求”； if (xhr) var xml = 测试 ; xhr.open(,POST, url, true)； xhr.setRequestHeader(POWERED-BY-MENGXlANHUl, Approve); xhr.setRequestHeader(Content-Type, application/xml); xhr.onreadystatechange = handler; xhr.send(xml); else document.getElementById(content).innerHTML = 不能创建 X

14、MLHttpRequesl ;function handler(evtXHR) if (xhr.readyState = 4) if (xhr.status = 200) var response = xhr.responseText; document.getElementById(content).innerHTML = 结果： + response; else document.getElementById(content).innerHTML = 不能进行跨越访问。 ;else docume nt.getEleme ntByld(co nten t).i nn erHTML += 执行

15、状态 readyState： +xhr.readyState; / - 上面的例子我们发送xml格式的数据，并且，发送一个非标准的HTTP头 POWERED-B Y-MENGXIANH来说明服务器端该如何设置响应头的。 在服务器端，PreflightedRequests.aspx的内容如下： !- protected void Page_Load(object sender, EventArgs e)if (Request.HttpMethod.Equals(GET)Resp on se.Write(这个页面是用来测试跨域 POST青求的，直接浏览意义不大。); else if (Reques

16、t.HttpMethod.Equals(OPTIONS)/通知客户端允许预检请 求。并设置缓存时间 Response.ClearContent(); Response.AddHeader(Access-Control-Allow-Origin, http: Response.AddHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS);Response.AddHeader(Access-Control-Allow-Headers, POWERED-BY-MENGXIANHUI); Response.AddHeader(Access-Co

17、ntrol-Max-Age, 30); / 此过程无需返回数据 Response.End();else if (Request.HttpMethod.Equals(POST)if (Request.HeadersOrigin.Equals(http: System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); doc.Load(Request.InputStream); Response.AddHeader(Access-Control-Allow-Origin, http: Resp on se.Write(您提交的数据是： + sc

18、ript OPTIONS 点击 “开始测试 ”按钮，将会执行下面的一系列请求。 /PreflightedRequests.aspx HTTP/ A II A Host: User-Agent: Mozilla/ 5.0 (Windows; U;Windows NT 5.2; zh-CN; rv: 1. 9. 1.7) Gecko/Firefox/ 3. I! 5.7 (.NET CLR 3. I! 5.30729) Accept: text/html,application/xhtml+xml,application/xml;q= 0.9,*/*;q= 0.8 Accept-Language:

19、 0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q= 0.7,*;q= 0.7 Keep-Alive: 300 Connection: keep-alive Origin: http: Access-Control-Request-Method: POST Access-Control-Request-Headers: powered-by-mengxianhui HTTP/ 1.x 200 OK Date: Sun, 10 Jan 2010 14:00:34 GMT Server: Microsoft-IIS/

20、6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2. 0.50727 Access-Control-Allow-Origin: http: Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: POWERED-BY-MENGXIANHUI Access-Control-Max-Age: 30 Set-Cookie: ASP.NET_SessionId=5npqri55dl1k1zvij1tlw3re; path=/; HttpOnlyCache-Con

21、trol: private Content-Length: 0 POST /PreflightedRequests.aspx HTTP/ Host: User-Agent: Mozilla/ 5.0 (Windows; U;Windows NT 5.2; zh-CN; rv: 1. 9. 1.7) Gecko/Firefox/ 3. I! 5.7 (.NET CLR 3. 5.30729) Accept: text/html,application/xhtml+xml,application/xml;q= 0.9,*/*;q= 0.8 Accept-Language: 0.5 Accept-E

22、ncoding: gzip,deflate Accept-Charset: GB2312,utf-8;q= 0.7,*;q= 0.7 Keep-Alive: 300 Connection: keep-alive POWERED-BY-MENGXIANHUI: Approve Content-Type: application/xml; charset=UTF-8 Refer: http: 19 Origin: http: Pragma: no-cache Cache-Control: no-cache 测试 v/root HTTP/ 1.x 200 OK Date: Sun, 10 Jan 2

23、010 14:00:34 GMT Server: Microsoft-IIS/ 6.0 X-Powered-By: ASP.NET X-AspNet-Version: 0.50727 Access-Control-Allow-Origin: http: Set-Cookie: ASP.NET_SessionId=byvose45zmtbqy45d2a1jf2i; path=/; HttpOnlyCache- Control: private Content-Type: text/html; charset=utf-8 Content-Length: 65 以上的代码反映了预检请求的执行过程：

24、浏览器还发送 Access-Control-Request-Method: POST和 Access-Control-Request-Headers: powered-by-mengxianhui 请求头。 以上过程是第一次请求的时候的过程，如果在 30 秒内重复点击按钮，你可 以看不到OPTIONS这一过程。则执行过程是这样的： POST /PreflightedRequests.aspx HTTP/ 1.1 Host: User-Agent: Mozilla/ 5.0 (Windows; U;Windows NT 5.2; zh-CN; rv: A II 9. 1.7) Gecko/Fir

25、efox/ O H 5.7 (.NET CLR I! 5.30729) Accept: text/html,application/xhtml+xml,application/xml;q= 0.9,*/*;q= 0.8 Accept-Language: 0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q= 0.7,*;q= 0.7 Keep-Alive: 300 Connection: keep-alive POWERED-BY-MENGXIANHUI: Approve Content-Type: applicati

26、on/xml; charset=UTF-8 Refer: http: 19 Origin: http: Pragma: no-cache Cache-Control: no-cache 测试 v/root HTTP/ 1.x 200 OK Date: Sun, 10 Jan 2010 14:06:32 GMT Server: Microsoft-IIS/ 6.0 X-Powered-By: ASP.NET X-AspNet-Version: I! 0.50727 Access-Control-Allow-Origin: http: Set-Cookie: ASP.NET_SessionId=q

27、s1c4urxywdbdx55u04pvual; path=/; HttpOnlyCache- Control: private Content-Type: text/html; charset=utf-8 Content-Length: 65 为什么会这样？细心的童鞋可能注意到了，在服务器端有一行代码 Response.AddHeader(Access-Control-Max-Age, 30)它; 是用来设置预检的有 效时间的，单位是秒。这一点要特别注意。 3，带验证信息的请求 身份验证是 Web 开发中经常遇到的问题，在跨域请求中，默认情况下是不 发送验证信息的。要想发送验证信息，需要进行

28、 withCredentials 属性，下面就 是一个简单请求的例子： vtitle孟宪会之AJAX夸域请求测试 !- var xhr = new XMLHttpRequest(); var url = ,http: function crossDomainRequest() document.getElementByld(content).innerHTML =开始进行请求”； if (xhr) xhr.open(,GET, url, true)； xhr.onreadystatechange = handler； xhr.withCredentials = true； xhr.send()

29、； else document.getElementById(content).innerHTML = 不能创建 XMLHttpRequesl ;function handler(evtXHR) if (xhr.readyState = 4) if (xhr.status = 200) var response = xhr.responseText; document.getElementById(content).innerHTML = 结果： + response; else document.getElementByld(content).innerHTML += 执行状态 status

30、： +xhr.status; else docume nt.getEleme ntByld(co nten t).i nn erHTML += 执行状态 readyState： +xhr.readyState; / - 点击“开始测试 ”，我们可以检测到下面的请求执行过程： GET /RequestsWithCredentials.aspx HTTP/ 1.1 Host: User-Agent: Mozilla/ 5.0 (Windows; U;Windows NT 5.2; zh-CN; rv: A II 9. 1.7) Gecko/Firefox/ O I! 5.7 (.NET CLR 3

31、. 5.30729) Accept: text/html,application/xhtml+xml,application/xml;q= 0.9,*/*;q= 0.8 Accept-Language: 0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q= 0.7,*;q= 0.7 Keep-Alive: 300 Connection: keep-alive Refer: http: http: HTTP/ 1.x 200 OK Date: Sun, 10 Jan 2010 14:12:26 GMT Server:

32、Microsoft-IIS/ 6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2. 0.50727 Access-Control-Allow-Origin: http: Access-Control-Allow-Credentials: true Set-Cookie: ASP.NET_SessionId=fn2zf0zq1cuwgf45fm5fw145; path=/; HttpOnlySet-Cookie: visit=1; expires=Sun, 10-Jan-2010 14:12:56 GMT; path=/ Cache-Control: no-cache Pragma: no-cache Expires: -1 Content-Type: text/html; charset=utf-8 Content-Length: 1 从上面的响应中可以看出， Cookie 是会随请求一起发送的。如果我们多次 点击测试按钮，则可以看到请求和响