| 众所周知，Ajax不能进行跨域请求，但是却可以远程跨域请求文件，比如<script>请求远程文件，这样我们就可以在远程服务器将数据装进js格式文件里，供客户端调用，因为json的格式简单明了，客户端也方便处理，为了客户端便于使用数据，于是便出了JSONP协议，JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。 该协议的特点是客户端传递一个callback函数给服务器端处理json数据。如下： <script type="text/javascript">
function jsonpCallback(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://www.codetc.com/jsonp.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>jQuery提供了对jsonp协议的支持：例如远程获取flickr jsonp api四张关于猫的图片地址：<script type="text/javascript" src="http://www.codetc.com/template/iwcode/style/js/jquery.min.js"></script>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
alert(item.media.m);
if ( i == 3 ) return false;
});
});
</script>总的来说jsonp的核心是动态添加<script>标签来调用服务器提供的js脚本。类似jQuery框架提供了很好用的封装方法。 由于jquery ajax封装了jsonp协议，使用jquery其实很简单就能实现跨域请求： $.ajax({
type : "post",
url : "http://www.codetc.com/ajax/test",
dataType : "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
success : function(json){
alert('success');
},
error:function(){
alert('fail');
}
});服务器端处理如下：$data = .......
$callback = $_GET['callback'];
echo $callback.'('.json_encode($data).')';
exit;当使用jsonp时，使用 jsonp 形式调用函数时，如 "myurl?callback=?" jQuery 将会自动替换 ? 为正确的函数名，以执行回调函数。
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-64-1.html
|