JSONP原理及最簡單的JSONP實作

什麼是JSONP協定?

JSONP即JSON with Padding。由于同源政策的限制，XmlHttpRequest隻允許請求目前源（域名、協定、端口）的資源。如果要進行跨域請求，我們可以通過使用html的script标記來進行跨域請求，并在響應中傳回要執行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。

很明顯，JSONP是一種腳本注入(Script Injection)行為，需要特别注意其安全性。

在asp.net中實作簡單的JSONP非常簡單。我們需要兩個頁面，分别承擔協定的用戶端和伺服器端角色。

假設我們有兩個站點，http://www.baa.com.cn 和 http://www.bitauto.com

我們的用戶端頁面為 http://www.baa.com.cn/JSONPClient.aspx ；而我們的伺服器端頁面為 http://www.bitauto.com/JSONPServer.aspx 。

首先，我們來做用戶端頁面：

==========Javascript代碼段1：JSONP用戶端發送請求的方法=================

    function CallJSONPServer(url){                                 // 調用JSONP伺服器，url為請求伺服器位址

        var oldScript =document.getElementById(url);       // 如果頁面中注冊了調用的伺服器，則重新調用

        if(oldScript){

        oldScript.setAttribute("src",url);

        return;

        }

        var script =document.createElement("script");       // 如果未注冊該伺服器，則注冊并請求之

        script.setAttribute("type", "text/javascript");

        script.setAttribute("src",url);

        script.setAttribute("id", url);

        document.appendChild(script);

    }

------------------END------------------------

===========Javascript代碼段2：JSONP用戶端對伺服器開放的接口方法=======================

    function OnJSONPServerResponse(obj){

        alert(obj);

    }

------------------END------------------------

===========HTML代碼段1：JSONP用戶端向使用者提供的UI===============

<input type="button" οnclick="CallJSONPServer('http://www.bitauto.com/JSONPServer.aspx')" />

------------------END------------------------

至此，JSONP用戶端完成，接下來我們做JSONP伺服器端頁面：

============C#代碼段1：應答JSONP用戶端請求================

    protected void Page_Load(object sender, EventArgs e)

    {

        Response.DisableKernelCache();

        Response.Cache.SetNoStore();

        Response.Write("OnJSONPServerResponse('" + DateTime.Now.ToString() + "');");

        Response.End();

    }

------------------END------------------------

OK，我們現在就完成了，您不妨自己實踐一下。