什么是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=================================

jsonP目前被用来作为跨域的首选方案.即用动态创建的script标签去回调后端脚本，然后获取返回值并调用回调函数。但这里面有两个比较遗憾的事情：

1. 前端需要和后端提前定义好接口，而且定义接口后，如果前端回调函数要改变名字，那么后端也需要变。（比如串行化，一个接口调用不同的回调函数，那么就更麻烦了）。
2. 无法捕获错误信息。

为了处理这两点。从好奇和emu那边看到了一个比较好的解决方案。转载记录一下

var callbackJS = function () {  
    var ua = navigator.userAgent;

    if (/MSIE/.test(ua)) {
        return function (param) {
            
            charset = param.charset || 'gb2312'

            var frag = document.createDocumentFragment(), script = frag.createElement('script');
            script.charset = charset;
            frag[param.name] = function () {
                param.callback && param.callback.apply(null, arguments);
                frag = script = script.onreadystatechange = frag[param.name] = null;
            };
            script.onreadystatechange = function () {
                if (script.readyState == 'loaded') {
                    param.errorcallback && param.errorcallback();
                    frag = script = script.onreadystatechange = frag[param.name] = null;
                }
            };
            script.src = param.url;
            frag.appendChild(script);

        };

    } else {
        return function (param) {
            
            charset = param.charset || 'gb2312'

            var iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            
            iframe.callback = function () {
                param.callback && param.callback.apply(null, arguments);
                iframe.callback = iframe.errorcallback = null;
                iframe.src = 'about:blank', iframe.parentNode.removeChild(iframe), iframe = null;
            };
            iframe.errorcallback = function () {
                param.errorcallback && param.errorcallback();
                iframe.callback = iframe.errorcallback = null;
                iframe.src = 'about:blank', iframe.parentNode.removeChild(iframe), iframe = null;
            };
            try {
                if (/KHTML/.test(ua)) iframe.src = 'block.htm'; //404可以
                iframe.onload = function () {
                    
                    iframe.onload = null;
                    //iframe.src="javascript:\"<scrip"+"t>function " + param.name + "(){frameElement.callback.apply(null, arguments)};<\/scrip"+"t><scrip"+"t src='"+param.url+"'><\/scrip"+"t><scrip"+"t>setTimeout('frameElement.errorcallback()',0)<\/scrip"+"t>\"";
                    iframe.contentWindow.document.open();
                    iframe.contentWindow.document.write(
                        '<script type="text\/javascript">function ' + param.name + '() { frameElement.callback.apply(null, arguments); }<\/script>'
                        + '<script type="text\/javascript" src="' + param.url + '" charset="' + charset + '"><\/script>'
                        + '<script type="text\/javascript">window.setTimeout("try { frameElement.errorcallback(); } catch (exp) {}", 1)<\/script>'
                    );
                    iframe.contentWindow.document.close();
                };
                document.body.insertBefore(iframe, document.body.firstChild);
            } catch (exp) {}
        };
    }
}();

【使用方法】

callbackJS({
    name: 'callback', // 和后端默认的接口
    url: 'ajax.php',  // 请求地址
    callback: result, // 自定义的回调函数（这样就和后端无耦合了）
    errorcallback: error // 错误回调函数
});