跨域处理之Jsonp

一、认识Jsonp

　　JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法，以活动为中心，一连串的活动的顺序组合成一个完整的工作进程。

　　之所以会有跨域这个问题的产生根本原因是浏览器的同源策略限制，理解同源策略的限制同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。

　　解决这个限制的一个相对简单的办法就是在服务器端发送请求，服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。

　　另一个办法就是使用框架(frames)，将第三方站点的资源包含进来，但是包含进来的资源同样要受到同源策略的限制。

　　有一个很巧妙的办法就是在页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败，幸运的是，我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

二、Jsonp工作原理

　　jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.
这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.
如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，
我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。
这种跨域的通讯方式称为JSONP。

jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数

三、注意点

　　首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）

 可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

四、代码展示

//web02：helper
public static class JsonHelper
{
public static string ToJson(this object obj)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(obj);
}

    public static string ToJson(this object obj, int count)
    {
        string template = ""total":{0},"rows":{1}";
        if (count == 0)
        {
            return "{" + string.Format(template, 0, "[]") + "}";
        }
        else
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return "{" + string.Format(template, count, serializer.Serialize(obj)) + "}";
        }
    }
}

// ajax方法
// web01：controller
 public ActionResult Index()
 {
     return View();
 }

// // web01：view
<script type="text/javascript">
    $(function () {
        var userName = "admin";
        var password = "zyxx..000";
        var mydata = { Ecom_User_ID: userName, Ecom_Password: password };
        $.ajax({
            async: true,
            url: 'http://localhost:61038/home/Jsonp',  // 跨域URL
            type: 'get',
            dataType: 'jsonp',
            jsonp: 'jsoncallback', //默认callback
            data: mydata, //{ data: "abc" },
            timeout: 5000,
            beforeSend: function () {
            },
            success: function (json) {
                if (json == "success") {
                    window.location.href = "http://www.baidu.com";
                }
                alert(json);
            },
            complete: function (XMLHttpRequest, textStatus) {
                // $.unblockUI({ fadeOut: 10 });
            },
            error: function (a,b,c) {
                //jsonp 方式此方法不被触发
                alert("请求出错(请检查相关度网络状况.)" + b);
            }
        });
    })
</script>

// web02：controller
public ActionResult Jsonp(string Ecom_User_ID, string Ecom_Password)
{
    string success = "success";
    string jsoncallback = Request.QueryString["jsoncallback"];
    if (string.IsNullOrEmpty(jsoncallback))
    {
        success = "fail";
        return Json(success, JsonRequestBehavior.AllowGet);
    }
    // return Json(new { jsoncallback = data });
    return Content(string.Format("{0}({1})", jsoncallback, success.ToString().ToJson()), "text/plain", System.Text.Encoding.UTF8);
}

// javascript方法

// web01：controller
public ActionResult Index2()
{
    return View();
}

// web01：view
<script>
    function callbackFunction(res) {
        alert(res)
    }
</script>
<script src="http://localhost:61038/home/Jsonp?jsoncallback=callbackFunction"></script>