JSONP跨域访问使用

最新推荐文章于 2025-08-08 12:35:56 发布

原创最新推荐文章于 2025-08-08 12:35:56 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #json #JavaScript #浏览器 #ASP.net #ViewUI

javascript 专栏收录该内容

138 篇文章

订阅专栏

1) 什么是JSONP?
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是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);
}

Javascript代码段2：JSONP客户端对服务器开放的接口法

function OnJSONPServerResponse(obj){
alert(obj);
}

===========HTML代码段1：JSONP客户端向用户提供的UI===============

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

至此，JSONP客户端完成，接下来我们做JSONP服务器端页面：
protected void Page_Load(object sender, EventArgs e)
{
Response.DisableKernelCache();
Response.Cache.SetNoStore();
Response.Write("OnJSONPServerResponse('" + DateTime.Now.ToString()+ "');");
Response.End();
}

其实 jsonp 是个很简单的一个东西。

主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。（其实也可以用eval函数）

来个超简单的例子：

首先是准备客户端的代码，

Html代码

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" >
3. <head>
4. <title>Test Jsonp</title>
5. <script type="text/javascript">
6. function jsonpCallback(result)
7. {
8. alert(result.msg);
9. }
10. </script>
11. <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
12. </head>
13. <body>
14. </body>
15. </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>

其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。

http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback

这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为

Js代码

1. jsonpCallback({msg:'this is json data'})

jsonpCallback({msg:'this is json data'})

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）