Jsonp 方式跨域获取 json 数据原理
http://galaxystar.iteye.com/blog/169765
关键字: json javascript
一直没时间玩js，看到douban网的开放api后，查了些文档，了解了一下 jsonp 跨域请求方式.跟大家分享一下。
其实 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 函数里.（动态执行回调函数）
分享到：
相关推荐
NULL 博文链接：https://8366.iteye.com/blog/744057
利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
html通过 ajax jsonp跨域请求接收和传送数据 使用HTML页面与后台跨域交互,获得后台数据或传输数据给后台
跨域_jsonp_原理，了解json的原理，等于我们掌握json的技术有帮助
1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等
JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是...
前端使用jquery，datatype采用jsonp，服务端采用C#编写的webService
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
PHP AJAX JSONP实现跨域请求使用范例
Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 这篇文章主要介绍了AJAX跨域请求JSONP获取JSON数据的实例代码,需要的朋友可以参考下
很多开发人员在使用jquery在前端和服务器端进行数据交互，所以很容易会认为在前端...1、通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。 jsonp是英文json with padding的缩写。它允许在服务器端生成
本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法。分享给大家供大家参考，具体如下： 第一种方法是在ajax函数中设置dataType为’jsonp’ $.ajax({ dataType: 'jsonp', url: '...
主要给大家介绍了关于利用jsonp解决js读取本地json跨域的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JSONP是一种通过脚本标记注入的方式，它是可以引用跨域URL的js脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果。 让我们看看JSONP的是怎么在jQuery，MooTools的，Dojo Toolkit中...
ajax jsonp 跨域处理
基于jQuery的jsonp ajax跨域请求，
本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的...
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
var jsonp = function(url, data, callback) { //1、挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; /...