基于Jquery的跨域传输数据(JSONP)

151 阅读 0 评论 100 点赞

我是靠谱客的博主精明小伙，最近开发中收集的这篇文章主要介绍基于Jquery的跨域传输数据(JSONP)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

后端:

复制代码代码如下:

 
<?php 
$json_str = json_encode(array("ddd"=>"11111111")); 
echo $_GET['ja'].'('.$json_str.')'; 
?> 

前端:

复制代码代码如下:

 
$.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){ 
alert(json); 
}); 

纯JS实现(JSONP):

复制代码代码如下:

 
//server return aa({'ddd':'ddd'}) callback function name: $_GET['callback'] 
//author:lonely 
(function(w){ 
function getjson(){} 
getjson.prototype.set=function(url,callback,callbackname){ 
this.callfn=callbackname||'urlcallback'; 
this.url=url+"?callback="+this.callfn; 
try{ 
eval(this.callfn+"=function(data){n"+ 
"callback(data);n"+ 
'delete '+this.callfn+';}'); 
}catch(e){return;} 
this.request(); 
delete this.url; 
} 
getjson.prototype.request=function(){ 
var script=document.createElement("script"); 
script.src=this.url; 
var load=false; 
script.onload = script.onreadystatechange = function() { 
if(this.readyState === "loaded" || this.readyState === "complete"){ 
load=true; 
script.onload = script.onreadystatechange=null; 
} 
}; 
var head=document.getElementsByTagName("head")[0]; 
head.insertBefore(script,head.firstChild); 
} 
w.getjson=getjson; 
})(window) 
//使用DOME 
new getjson().set("http://www.test.cn/test.php",function(data){ 
alert(data.ddd); 
}); 

另一个:getScript

复制代码代码如下:

 
jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ 
$("#go").click(function(){ 
$(".block").animate( { backgroundColor: 'pink' }, 1000) 
.animate( { backgroundColor: 'blue' }, 1000); 
}); 
});//CHM帮助文件示例 