什么是JSONP协议及对JSONP的改进

最新推荐文章于 2024-10-15 21:35:30 发布

weixin_30371875

最新推荐文章于 2024-10-15 21:35:30 发布

阅读量104

点赞数

文章标签： javascript 后端 json ViewUI

原文链接：http://www.cnblogs.com/janey/archive/2011/03/31/2001093.html

版权

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===============

------------------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标签去回调后端脚本，然后获取返回值并调用回调函数。但这里面有两个比较遗憾的事情：

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

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

【使用方法】

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

转载于:https://www.cnblogs.com/janey/archive/2011/03/31/2001093.html