版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、发表于:2010-1-11 浏览:965 作者:转载遗失 来源:网络转载关键字:AJAX,详解,请求描述:注意：以下代码请在Firefox3.5、Chrome3.0、Safari4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。 跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、
2、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置 document.domain 属性将它们认为是同源的。随着 Web2.0 和 SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但是，在脚本中进行跨域请求是受安全性限
3、制的，Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合（Mashup）自己的 Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布了一个 Cross-Origin Resource Sharing（跨域资源共享，该规范地址：/TR/access-control/和
4、/2006/waf/access-control/） 推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似 XMLHttprequest 这样的 API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范，已经可以进行跨域请求了。Cross-Origin Resource Sharing 的工作方式是通过添加 HTTP 头的方法来判断哪些资源允许
5、Web 浏览器访问该域名下的信息。然而，对于那些 HTTP 请求导致用户数据产生副作用的请求方法（特别是对于除了GET、某些 MIME 类型的 POST 之外的 HTTP方法），该规范要求浏览器对请求进行“预先验”，通过发送 HTTP 的 OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，再使用实际的 HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息（如 Cookie 和 HTTP Authentication 数据）随同请求一起发送。下面我们就采用实际的例子说明 Cross-Origin Resource Sharing 是如何工作的。1，简单
6、请求 什么样的请求算是简单请求呢？简单请求必须满足下面2点：a，只使用 GET、POST 进行的请求，这里的POST只包括发送给服务器的数据类型（Content-Type）必须是 application/x-www-form-urlencoded、multipart/form-data 或者 text/plain中一个。b，HTTP 请求没有设置自定义的请求头，如我们常用的 X-JSON。先使用下面的代码进行测试：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN"
7、"/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <title>孟宪会之AJAX跨域请求测试</title> </head> <body> <input type=button value=开始测试 oncli
8、ck=crossDomainRequest() /> <div id="content"></div> <mce:script type="text/javascript"><!- var xhr = new XMLHttpRequest(); var url = http:/dotnet.aspx.cc/SimpleCrossSit
9、eRequests.aspx; function crossDomainRequest() document.getElementById("content").innerHTML = "开始" if (xhr)
10、 xhr.open(GET, url, true); xhr.onreadystatechange = handler; xhr.send(); else document.getE
11、lementById("content").innerHTML = "不能创建 XMLHttpRequest" function handler(evtXHR) if (xhr.readyState = 4)
12、; if (xhr.status = 200) var response = xhr.responseText; document.getElementById("content").innerHTML = "结果：" + res
13、ponse; else document.getElementById("content").innerHTML = "不允许跨域请求。" &
14、#160; else document.getElementById("content").innerHTML += "<br/>执行状态 readyState：" + xhr.readyState;
15、; / -></mce:script> </body> </html> 然后，在服务器创建 CrossDomainRequest.aspx 的内容如下：<% Page Language="C#" %> <mce:script runat="server"><!- protected void Page_Load(object sender, EventArgs
16、e) Response.AddHeader("Access-Control-Allow-Origin", "http:/www.meng_xian_:801"); Response.Write("孟宪会向各位朋友发来贺电：你的第一个跨域测试成功啦！"); / -></mce:script>&#
17、160;点击 “开始测试” 按钮，发送的请求和返回的响应信息如下：GET /SimpleCrossSiteRequests.aspx HTTP/1.1 Host: dotnet.aspx.cc User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729) Accept: text/html,application/xh
18、tml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer:
19、 http:/www.meng_xian_:801/CrossDomainAjax/SimpleCrossSiteRequests.html Origin: http:/www.meng_xian_:801 HTTP/1.x 200 OK Date: Sun, 10 Jan 2010 13:52:00 GMT Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET &
20、#160; X-AspNet-Version: 2.0.50727 Access-Control-Allow-Origin: http:/www.meng_xian_:801 Set-Cookie: ASP.NET_SessionId=wk5v5nrs5wbfi4rmpjy2jujb; path=/; HttpOnly Cache-Control: private Content-Type: text/html; charset=utf-8
21、 Content-Length: 84 需要特别注意的是：在请求信息中，浏览器使用 Origin 这个 HTTP 头来标识该请求来自于 http:/www.meng_xian_:801；在返回的响应信息中，使用 Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源。如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。如果有多个，则只需要使用逗号分隔开即可。注意：在服务器端，Access-Control-Allow-Origin 响应头 http:
22、/www.meng_xian_:801 中的端口信息不能省略。有人可能会想：自己发送请求头会如何呢？比如 xhr.setRequestHeader("Origin","http:/www.meng_xian_:801"); 实践证明，自己设置 Origin 头是不行的。是不是现在就可以采用 XMLHttpRequest 来请求任意一个网站的数据呢？还是不行的。允许哪些域名可以访问，还需要服务器来设置 Access-Control-Allow-Origin 头来进行授权，具体的代码是：Response.AddHeader("Access-Cont
23、rol-Allow-Origin", "http:/www.meng_xian_:801");这行代码就告诉浏览器，只有来自 http:/www.meng_xian_:801 源下的脚本才可以进行访问。好了，上面我们就完成了一个简单的跨域请求，怎么样？感觉还是不错的吧。下面我们进行一个“预检”请求。2，预检请求 预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。下面的2种情况需要进行预检：a，不是上面的简单请求，比如使用Content-Type 为 application/xml 或 te
24、xt/xml 的 POST 请求b，在请求中设置自定义头，比如 X-JSON、X-MENGXIANHUI 等注意：在 iis 里进行测试，必须在“应用程序扩展”里面配置 .aspx 扩展的动作允许 OPTIONS。下面我们举一个预检的请求： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
25、 <html xmlns="/1999/xhtml"> <head> <title>孟宪会之AJAX跨域请求测试</title> </head> <body> <input type=button value=开始测试 onclick=crossDomainRequest() />
26、; <div id="content"></div> <mce:script type="text/javascript"><!- var xhr = new XMLHttpRequest(); var url = http:/dotnet.aspx.cc/PreflightedRequests.aspx; function c
27、rossDomainRequest() document.getElementById("content").innerHTML = "开始进行请求" if (xhr) var xml = "<root>测试</root>" &#
28、160; xhr.open(POST, url, true); xhr.setRequestHeader("POWERED-BY-MENGXIANHUI", "Approve"); xhr.setRequestHeader("Content-Type", "application/xm
29、l"); xhr.onreadystatechange = handler; xhr.send(xml); else document.getElementById("content").innerHTML = "
30、不能创建 XMLHttpRequest。" function handler(evtXHR) if (xhr.readyState = 4) if (xhr.status = 200)
31、 var response = xhr.responseText; document.getElementById("content").innerHTML = "结果：" + response; else
32、; document.getElementById("content").innerHTML = "不能进行跨越访问。" else document.
33、getElementById("content").innerHTML += "<br/>执行状态 readyState：" + xhr.readyState; / -></mce:script> </body> </html> 上面的例子我们发送 xml
34、格式的数据，并且，发送一个非标准的HTTP头 POWERED-BY-MENGXIANHUI 来说明服务器端该如何设置响应头的。在服务器端，PreflightedRequests.aspx 的内容如下： <% Page Language="C#" %> <mce:script runat="server"><!- protected void Page_Load(object sender, EventArgs e) &#
35、160; if (Request.HttpMethod.Equals("GET") Response.Write("这个页面是用来测试跨域 POST 请求的，直接浏览意义不大。"); &#
36、160; else if (Request.HttpMethod.Equals("OPTIONS") /通知客户端允许预检请求。并设置缓存时间 Response.ClearContent(); &#
37、160; Response.AddHeader("Access-Control-Allow-Origin", "http:/www.meng_xian_:801"); Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
38、; Response.AddHeader("Access-Control-Allow-Headers", "POWERED-BY-MENGXIANHUI"); Response.AddHeader("Access-Control-Max-Age", "30");
39、 /此过程无需返回数据 Response.End(); else if (Request.HttpMethod.Equals("POST")
40、0; if (Request.Headers"Origin".Equals("http:/www.meng_xian_:801") System.Xml.XmlDocument doc = new System.Xml.XmlDocument(); &#
41、160; doc.Load(Request.InputStream); Response.AddHeader("Access-Control-Allow-Origin", "http:/www.meng_xian_:801"); &
42、#160; Response.Write("您提交的数据是：<br/><br/>" + Server.HtmlEncode(doc.OuterXml); else
43、; Response.Write("不允许你的网站请求。"); / -></mce:script> 点击“开始测试”按钮，将会执行下面的一系列请求。 OPTIONS /PreflightedRequests.aspx HTTP/1.1
44、60; Host: dotnet.aspx.cc User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-
45、cn,zh;q=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:/www.meng_xian_:801 Access-Control-Request-Method: POST
46、 Access-Control-Request-Headers: powered-by-mengxianhui HTTP/1.x 200 OK Date: Sun, 10 Jan 2010 14:00:34 GMT Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2.0.50727
47、60; Access-Control-Allow-Origin: http:/www.meng_xian_:801 Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: POWERED-BY-MENGXIANHUI Access-Control-Max-Age: 30 Set-Cookie: ASP.NET_SessionId=5npqr
48、i55dl1k1zvij1tlw3re; path=/; HttpOnly Cache-Control: private Content-Length: 0 POST /PreflightedRequests.aspx HTTP/1.1 Host: dotnet.aspx.cc User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:
49、) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7
50、 Keep-Alive: 300 Connection: keep-alive POWERED-BY-MENGXIANHUI: Approve Content-Type: application/xml; charset=UTF-8 Referer: http:/www.meng_xian_:801/CrossDomainAjax/PreflightedRequests.html
51、Content-Length: 19 Origin: http:/www.meng_xian_:801 Pragma: no-cache Cache-Control: no-cache <root>测试</root> HTTP/1.x 200 OK Date: Sun, 10 Jan 2010 14:00:34 GMT Server:
52、 Microsoft-IIS/6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2.0.50727 Access-Control-Allow-Origin: http:/www.meng_xian_:801 Set-Cookie: ASP.NET_SessionId=byvose45zmtbqy45d2a1jf2i; path=/; HttpOnly Cache-Control:
53、 private Content-Type: text/html; charset=utf-8 Content-Length: 65 以上的代码反映了预检请求的执行过程：首先发送 OPTIONS 请求头，用来向服务器咨询服务器的更多信息，以便为后续的真实请求做准备。比如是否支持 POST 方法等。值得注意的是：浏览器还发送 Access-Control-Request-Method: POST 和 Access-Control-Request-Headers: powered-by-mengxian
54、hui 请求头。注意：以上过程是第一次请求的时候的过程，如果在 30 秒内重复点击按钮，你可以看不到 OPTIONS 这一过程。则执行过程是这样的： POST /PreflightedRequests.aspx HTTP/1.1 Host: dotnet.aspx.cc User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729) &
55、#160; Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Conne
56、ction: keep-alive POWERED-BY-MENGXIANHUI: Approve Content-Type: application/xml; charset=UTF-8 Referer: http:/www.meng_xian_:801/CrossDomainAjax/PreflightedRequests.html Content-Length: 19 Origin: http:/www.men
57、g_xian_:801 Pragma: no-cache Cache-Control: no-cache <root>测试</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
58、 X-AspNet-Version: 2.0.50727 Access-Control-Allow-Origin: http:/www.meng_xian_:801 Set-Cookie: ASP.NET_SessionId=qs1c4urxywdbdx55u04pvual; path=/; HttpOnly Cache-Control: private Content-Type: text/html; charse
59、t=utf-8 Content-Length: 65 为什么会这样？细心的童鞋可能注意到了，在服务器端有一行代码 Response.AddHeader("Access-Control-Max-Age", "30"); 它是用来设置预检的有效时间的，单位是秒。这一点要特别注意。3，带验证信息的请求身份验证是Web开发中经常遇到的问题，在跨域请求中，默认情况下是不发送验证信息的。要想发送验证信息，需要进行withCredentials 属性，下面就是一个简单请求的例子： <!DOCT
60、YPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <title>孟宪会之AJAX跨域请求测
61、试</title> </head> <body> <input type=button value=开始测试 onclick=crossDomainRequest() /> <div id="content"></div> <mce:script type="text/javascript"><!-
62、0; var xhr = new XMLHttpRequest(); var url = http:/dotnet.aspx.cc/RequestsWithCredentials.aspx; function crossDomainRequest() document.getElement
63、ById("content").innerHTML = "开始进行请求" if (xhr) xhr.open(GET, url, true); xhr.onreadystatechange = handler;
64、60; xhr.withCredentials = "true" xhr.send(); else document.getE
65、lementById("content").innerHTML = "不能创建 XMLHttpRequest。" function handler(evtXHR) if (xhr.readyState = 4)
66、 if (xhr.status = 200) var response = xhr.responseText; document.getElementById("conte
67、nt").innerHTML = "结果：" + response; else document.getElementById("content").innerHTML += "<br/>执行状态 status：" + xhr.status;
68、60; else document.getElementById("content").innerHTML += "<br/>
69、;执行状态 readyState：" + xhr.readyState; / -></mce:script> </body> </html> 点击“开始测试”，我们可以检测到下面的请求执行过程： GET /RequestsWithCredentials.
70、aspx HTTP/1.1 Host: dotnet.aspx.cc User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Acce
71、pt-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http:/www.meng_xian_:801/CrossDomainAjax/RequestsWithCredenti
72、als.html Origin: http:/www.meng_xian_:801 HTTP/1.x 200 OK Date: Sun, 10 Jan 2010 14:12:26 GMT Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET X-AspNet-Version: 2.0.50727 Acce
73、ss-Control-Allow-Origin: http:/www.meng_xian_:801 Access-Control-Allow-Credentials: true Set-Cookie: ASP.NET_SessionId=fn2zf0zq1cuwgf45fm5fw145; path=/; HttpOnly Set-Cookie: visit=1; expires=Sun, 10-Jan-2010 14:12:56 GMT; path=/
74、 Cache-Control: no-cache Pragma: no-cache Expires: -1 Content-Type: text/html; charset=utf-8 Content-Length: 1 从上面的响应中可以看出，Cookie 是会随请求一起发送的。如果我们多次点击测试按钮，则可以看到请求和响应的结果是这样的： GET /RequestsWithCredentials.aspx HTTP/1.1&#
75、160; Host: dotnet.aspx.cc User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh
76、-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Referer: http:/www.meng_xian_:801/CrossDomainAjax/RequestsWithCredentials.html &
77、#160; Origin: http:/www.meng_xian_:801 Cookie: ASP.NET_SessionId=fn2zf0zq1cuwgf45fm5fw145; visit=2 HTTP/1.x 200 OK Date: Sun, 10 Jan 2010 14:13:58 GMT Server: Microsoft-IIS/6.0 X-Powered-By: ASP.NET
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 旅行社团队旅游管理预案
- 新零售门店促销活动策划及执行方案
- 拔牙术后的个案护理
- 广东省汕头市潮南区陈店实验学校2024-2025学年七年级9月月考道德与法治试题（原卷版）
- 提升解决问题能力的教学设计
- 爱岗敬业的演讲稿范文合集六篇
- 下册第3单元 布篇谋局2023-2024学年九年级上下册语文写作易点通教学设计
- 培优课：直线与双曲线 教学设计-2024-2025学年高二上学期数学苏教版（2019）选择性必修第一册
- 宝宝水痘发烧护理方法
- 我居住的地方-幼儿园中班主题教案
- 无违法犯罪记录证明申请表（个人）
- 第3课 秦统一多民族封建国家的建立 课件共33张PPT 高中历史统编版（部编版）必修 中外历史纲要（上）
- 护坡植物组字施工方案
- WS 400-2023 血液运输标准
- 历年高中数学联赛真题分类汇编33不等式
- 读书笔记《框架思维》PPT模板思维导图下载
- GB/T 42437-2023南红鉴定
- 邳州市国企招聘考试真题及答案
- 苏少版六年级上册综合实践活动成长手册第12课《我是小小消防员》教案
- 施工方案合同
- 渠道混凝土衬砌施工方案(21.12.1)
评论
0/150
提交评论