javascript跨域以及html5跨域交互
跨域使用普通ajax,异步向主站发送请求,在IE中出现:拒绝访问的相关异常提示。
查询了一些资料,主要有几个知识点
1. 同源策略:同源策略又名同域策略是浏览器中的主要安全措施。这里的“源”指的是主机名、协议和端口号的组合;我们可以把一个“源”看作是某个web页面或 浏览 器所浏览的信息的创建者。 同源策略,简单地说就是要求动态内容(例如,JavaScript或者VBScript)只能阅读与之同源的那些HTTP应答和cookies,而不能阅 读来自不同源的内容。 (http://hi.baidu.com/strugglesmen/blog/item/f5c9fd80ab96b4ba0df4d25d.html)
2. JsonP: JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问.
3. 跨域交互时,需要客户端和服务器端协同合作才能完成。
不同子域的页面跨域技术:
在需要交互的两个页面的都加上如下的JavaScript代码片段:
document.domain = "example.com";
这样,两个页面就变为同域了。
跨域请求的几种方法的测试代码:
javascript:HttpRequest通用方法封装
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var gloHttp = function () { this.method = ""; this.url = ""; this.data = ""; } gloHttp.prototype.init = function (v) { this.method = v.method || "get"; this.url = v.url || ""; this.data = v.data || null; this.cross = v.cross || false; //跨域 } gloHttp.prototype.xmlHttpRequest = function (v) { this.init(v); var xmlobj = this.xmlHttpobj(v.cross || false); xmlobj.onreadystatechange = function () { if (xmlobj.readyState == 4 && xmlobj.status == 200) { v.success(this.responseText); } } xmlobj.open(this.method, this.url, true); xmlobj.send(this.data); } gloHttp.prototype.xmlHttpobj = function (cross) { var xmlHttp = null; try { // Firefox, Opera 8.0+, Safari // if (cross && window.navigator.userAgent.indexOf("MSIE 8.0") > 0) // xmlHttp = new XDomainRequest(); // else xmlHttp = new XMLHttpRequest(); } catch (e) { try { if (cross) xmlHttp = new XDomainRequest(); else xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { alert('Your browser does not support AJAX!'); return false; } } return xmlHttp; } var gloScript = { anyscAppend: function (src) { var h = document.getElementsByTagName('head')[0]; var s = document.createElement('script'); s.type = 'text/javascript'; s.src = src; h.appendChild(s); } }
测试的前台代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script> //jquery function ajaxGetdata() { $.ajax({ type: "get", dataType: "jsonp", url: "http://6.com/Handler/JsonPHandler.ashx?action=jsonp", jsonp: "jsonp", success: function (data) { alert(data.m); } }); } //script function appendScript() { gloScript.anyscAppend("http://6.com/Handler/JsonPHandler.ashx?action=jsonp&jsonp=callbackFunction") } function callbackFunction(result) { alert(result.m); } //normal-addheader:access function httpRequest() { var httpRequest = new gloHttp(); httpRequest.xmlHttpRequest({ cross: true, method: "get", url: "http://6.com/Handler/JsonPHandler.ashx?action=normal", success: function (r) { alert(r); } }); } </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="body" runat="Server"> <input onclick="ajaxGetdata();" value="jsonp(ajax)" type="button" /><br /> <input onclick="appendScript()" value="jsonp(appendSrcipt)" type="button" /><br /> <!--<script type="text/javascript" src="http://6.com/Handler/JsonPHandler.ashx?action=jsonp&jsonp=callbackFunction"></script> --> <input onclick="httpRequest()" value="normal" type="button" /> <!--ie8 使用XDomainRequest 对象跨域 --> </asp:Content>
测试的后台代码,后台代码和前台代码在不同的域下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Web; public class JsonpHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string callback = context.Request["jsonp"]; string ss = context.Request["action"]; string rstr = string.Empty; switch (ss) { case "jsonp": rstr = callback + "({'m':'success'})"; break; case "normal": rstr = "normal"; context.Response.AddHeader("Access-Control-Allow-Origin", "*"); break; default: break; } context.Response.Write(rstr); context.Response.End(); } public bool IsReusable { get { return false; } } }
html5推出了新的跨域交互标准,区别于jsonp,跨域交互更加方便安全。
1.客户端求情:
使用html5跨域交互时,http请求头会带有Origin信息,来标识请求来源网站。
2.服务器端:
服务器端在处理跨域请求时,返回数据可按照普通请求的方式处理,只需要添加http头信息:context.Response.AddHeader("Access-Control-Allow-Origin", "*");//星号表示允许所有站点跨域请求
,不用像使用jsonp时,返回特定格式的数据,javascript才能处理。
3.客户端:
客户端接收到Access-Control-Allow-Origin头信息,判断允许跨域交互后,可处理返回数据。
相对传统的jsonp,html5提供了更方便简洁的跨域方案