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通用方法封装

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);
    }
}

     测试的前台代码

<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>

     测试的后台代码，后台代码和前台代码在不同的域下

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提供了更方便简洁的跨域方案