JSONP 跨域请求 - 获取JSON数据

如何用原生方式使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript">

function jsonpCallback(result) {

//alert(result);

for(var i in result) {

alert(i+":"+result[i]);//循环输出a:1,b:2,etc.

}

}

var JSONP=document.createElement("script");

JSONP.type="text/javascript";

JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";

document.getElementsByTagName("head")[0].appendChild(JSONP);

</script>

或者

Html代码 收藏代码

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script type="text/javascript">

function jsonpCallback(result) {

alert(result.a);

alert(result.b);

alert(result.c);

for(var i in result) {

alert(i+":"+result[i]);//循环输出a:1,b:2,etc.

}

}

</script>

<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

JavaScript的链接，必须在function的下面。

服务端PHP代码 （services.php）：

Php代码  收藏代码

<?php

//服务端返回JSON数据

$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

$result=json_encode($arr);

//echo $_GET['callback'].'("Hello,World!")';

//echo $_GET['callback']."($result)";

//动态执行回调函数

$callback=$_GET['callback'];

echo $callback."($result)";

　　

如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。

$.getJSON

$.ajax

$.get

1. 客户端JS代码在jQuery中的实现方式1：

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$.getJSON("http://crossdomain.com/services.php?callback=?",

function(result) {

for(var i in result) {

alert(i+":"+result[i]);//循环输出a:1,b:2,etc.

}

});

</script>

2. 客户端JS代码在jQuery中的实现方式2：

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$.ajax({

url:"http://crossdomain.com/services.php",

dataType:'jsonp',

data:'',

jsonp:'callback',

success:function(result) {

for(var i in result) {

alert(i+":"+result[i]);//循环输出a:1,b:2,etc.

}

},

timeout:3000

});

</script>

　3. 客户端JS代码在jQuery中的实现方式3：　

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');

</script>

　　
https://my.oschina.net/chinahub/blog/505123
主要提示：

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。
https://my.oschina.net/u/130771/blog/52912
JQuery的Ajax跨域请求的解决方案

今天在项目中需要做远程数据加载并渲染页面，直到开发阶段才意识到ajax跨域请求的问题，隐约记得Jquery有提过一个ajax跨域请求的解决方式，于是即刻翻出Jquery的API出来研究，发现JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的jquery.ajax jsonp格式和jquery.getScript方式。

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

客户端JQuery.ajax的调用代码示例：

$.ajax({
type : "get",
async:false,
url : "http://www.xxx.com/ajax.do",
dataType : "jsonp",
jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
jsonpCallback:"success_jsonpCallback",//callback的function名称
success : function(json){
alert(json);
alert(json[0].name);
},
error:function(){
alert('fail');
}
});

　　 服务端返回数据的示例代码：

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
String callbackFunName = context.Request["callbackparam"];
context.Response.Write(callbackFunName + "([ { name:\"John\"}])");
}

　　而jquery.getScript方式处理的原理类似，也同样需要服务端返回数据上做支持，不同的是服务端返回的结果不同。不是返回一个callback的function调用，而是直接将结果赋值给请求传递的变量名。客户端则是像引入一个外部script一样加载返回的数据。