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

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=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback與上面的jsonp值一致
            success: function (json) {
                alert(json.Name);
                alert(json.Email);
            }
        });

        // 第二種方式
        $.getJSON("http://localhost:9524/Home/ProcessCallback?name=xiaoqiang&email=jxqlovejava@gmail.com&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=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback與上面的jsonp值一致

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

   咱們能夠推斷這麼作之後，jQuery內部機制就幫咱們繞過了瀏覽器的跨域訪問限制，而後就能夠像正常請求同域Action同樣請求跨域Action了。

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

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

   這樣返回給前端的就是相似這種jQuery17104721....('{Name:"jxq", Email:"feichexia@yahoo.com.cn"}')，它一返回到前端就會執行，獲得的是一個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中的函數或變量了。