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