ASP.NET中JSONP的兩種實現以及其他跨域解決方案的簡單實現

   jQuery中JSONP的兩種實現方式：

   都很簡單，所以直接上代碼！

   前台代碼如下：

<script type="text/javascript">
    $(function () {
        alert("start...");
        
        // 第一種方式
        $.ajax({
            type: "get",
            url: "http://localhost:9524/Home/ProcessCallback", // 這個就是不同於當前域的一個URL地址，這里單純演示，所以同域
            dataType: "jsonp",
            jsonp: "jsonpcallback",  // 指定回調函數，這里名字可以為其他任意你喜歡的，比如callback，不過必須與下一行的GET參數一致
            data: "name=jxq&email=[e-mail]&jsonpcallback=?", // jsonpcallback與上面的jsonp值一致
            success: function (json) {
                alert(json.Name);
                alert(json.Email);
            }
        });

        // 第二種方式
        $.getJSON("http://localhost:9524/Home/ProcessCallback?name=xiaoqiang&email=[e-mail]&jsonpcallback=?",
            function(json) {
                alert(json.Name);
                alert(json.Email);
            }
        );

        alert("end...");
    });
</script>

   后台Action代碼如下：

public string ProcessCallback(string name, string email)
{
   if (Request.QueryString != null)
   {
       string jsonpCallback = Request.QueryString["jsonpcallback"];
       var user = new User
       {
            Name = name,
            Email = email
       };
       

       return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
   }

   return "error";
}

   運行后就可以看到結果了。我追蹤了下后台ProcessCallback代碼，如下圖：

   可以看到jsonCallback的值為"jQuery17104721...."，它是前端傳給遠程服務器后台Action的。這里jQuery171..表示的是jQuery的版本，可以簡單地將這個理解為JSONP類型請求回調函數，jQuery在我們每次指定Ajax請求方式為JSONP時都會生成這么一個JSONP回調函數。雖然jQuery會自動幫我們生成一個回調函數，但是我們也可以通過設置jsonpCallback參數為jsonp請求定制一個我們自己的回調函數。

   第一種方式下面這三行代碼設定了JSONP請求方式：

dataType: "jsonp",
jsonp: "jsonpcallback",  // 指定回調函數，這里名字可以為其他任意你喜歡的，比如callback，不過必須與下一行的GET參數一致
data: "name=jxq&email=[e-mail]&jsonpcallback=?", // jsonpcallback與上面的jsonp值一致

   第二種方式則直接在GET參數后面帶上jsonpcallback=?來標識。

   我們可以推斷這么做以后，jQuery內部機制就幫我們繞過了瀏覽器的跨域訪問限制，然后就可以像正常請求同域Action一樣請求跨域Action了。

   最后返回的是一個函數表達式：

return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";

   這樣返回給前端的就是類似這種jQuery17104721....('{Name:"jxq", Email:"[e-mail]"}')，它一返回到前端就會執行，得到的是一個JavaScript對象，對象有兩個屬性：Name和Email，所以我們可以直接調用json.Name和json.Email。

   上面return時千萬別忘了圓括號，原因不多說，看看下面的例子就明白了：

var response = "{'foo' : 'bar'}";
var json = eval(response);  // Invalid label
var json = eval("(" + response + ")"); // OK

   此外也可以通過動態創建Script、內嵌iframe方式實現跨域。動態創建script的簡單代碼如下：

$(function() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://otherdomain/script.js";
            
    // 異步加載腳本
    script.onload = script.onreadystatechange = function(){
       if(!script.readyState || script.readyState == 'loaded') {  // 加載完畢
          add(1, 99); // 直接調用跨域js中的函數
       }
    };

    document.getElementsByTagName('head')[0].appendChild(script);
    // add(1, 99); // 這樣會出錯，因為腳本還沒加載完畢
});

// script.js代碼如下
function add(a, b) {
　　alert("Add: " + a + "+" + b + "=" + (a+b));
}

   當然還可以通過jQuery的getScript方法來跨域請求一個js文件或者包含js代碼的文本文件（比如test.js.txt），直接貼代碼：

$.getScript("http://otherdomain/test.js", function(){
   alert("Script loaded and executed."); // 腳本加載完畢后會直接執行
});

    這種方式加載完成后，就能和使用同域JS一樣使用跨域JS中的函數或變量了。