一直没时间玩js,看到douban网的开放api后,查了些文档,了解了一下 jsonp 跨域请求方式.跟大家分享一下。
其实 jsonp 是个很简单的一个东西。
主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。(其实也可以用eval函数)
来个超简单的例子:
首先是准备客户端的代码,
-
<!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>
<!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 数据的接口,参数为回调函数的名字,返回的格式为
-
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 函数里.(动态执行回调函数)
分享到:
相关推荐
JS跨域访问解决
js跨域访问解决方案总结,不同域名下cookie相互操作
JS跨域访问解决方案总结! JS跨域访问解决方案总结 JS跨域访问解决方案总结
JS跨域访问解决方案总结[参照].pdf
js解决跨域访问问题,在用js访问web后台方法的时候,有时候会遇到跨域访问的问题。文档中介绍了跨域访问产生的原因以及相应的解决办法及代码示例。
文档内容详细,只需要负责粘贴,并替换url即可使用
JS跨域访问解决方案总结.pdf
javascript 跨域访问 综合解决方案
js_跨域访问[参照].pdf
Javascript跨域访问解决方案 个人在网上搜集的资料,用于传输信息,不提倡下载
服务器端用可控js跨域访问服务器端用可控js跨域访问
本demo为通过jquery 来进行json的跨域访问的小例子。简单易懂!
不同软件系统下 js 实现跨域访问
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
JS跨域访问解决方案的总结.doc跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script ...
解决Openfire strophejs网站 跨域访问问题,文件中有flXHR.js、strophe.flxhr.js跨域脚本,有个具体实例basic.html供参考