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" onclick="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，我们现在就完成了，您不妨自己实践一下。