日期:2014-05-16  浏览次数:20536 次

对jsonp的理解

?? ?这两天在工作中,内部系统要访问网上另外一个系统,传递一个用户名进行网站注册,最终将注册结果传递到本地,开始想这用xml-rpc什么的来做,最后想想这个功能太简单了,用不着这样麻烦,想这那就用jsonp来做吧,这样可以解决跨域访问。

?

?? JSON 是用于在浏览器和服务器之间交换信息的轻量级数据格式(与 XML 相比)。?

?

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。

看了看jsonp的文章后,感觉很简单,我有理解这是样的。

我们在做页面时,想引入js文件,是这样写的<script type="text/javascript" src="www.klmama.com/jquery-1.4.4.min.js"></script>?

这个js文件中,无非就全部是js脚本,那我们把这个脚本换成其它动态页面,在执行过多业务后,让输出js代码不就好了,这样就可以从其它系统获得返回的数据,如:?

//以下是一段php代码,假如文件名是test.php 在www.klmama.com网站下放这 
$id = urlencode(iconv('gb2312', 'utf-8', $_GET['id'])); 
$jsonData = json_encode(array("a"=>$id)); 
echo $_GET['callback'] . '(' . $jsonData . ');'; 

以上是服务端代码,我们在页面可以这样调用?

?

?

<script type="text/javascript" src="http://www.klmama.com/test.php?id=测试&&callback=test"></script> 
<script language="javascript">
 //这个函数名必须和我们上面调用页面传递的参数callback的值要一样
function test(data){ 
    //在这处理返回的数据就可以了 
   alert(decodeURI(data.a)); 
} 
</script>

?

?PHP中生成json数据时,对中文只支持utf-8,所以才做了处理,以上就是jsonp的基本原理,关键是我们要动态的页面中插入<script type="text/javascript" src="http://www.klmama.com/test.php?id=测试&&callback=test"></script>

我们可以这样做

<script language="javascript"> 
// 调用JSONP服务器,url为请求服务器地址 
function CallJSONPServer(url){ 
    // 如果页面中注册了调用的服务器,则重新调用 
   var oldScript =document.getElementById(url); 
   if(oldScript){ 
      oldScript.setAttribute("src",url); return; 
   } 
   // 如果未注册该服务器,则注册并请求之 
   var script =document.createElement("script"); 
   script.setAttribute("type", "text/javascript"); 
   script.setAttribute("src", url); 
   script.setAttribute("id", url); 
   document.appendChild(script); 
} 
function test(data){ 
    alert(decodeURI(data.a)); 
} 
</script> 
<a href="javascript:void(0)" onClick="CallJSONPServer('http://www.klmama.com/test.php?id=汉字&callback=test');">注册用户</a>

?这样就可以动态插入了,对动态js代码,是支持跨域操作的。

其实上面的代码,在jquery中可能更简单的处理,不用在写上面这么多js代码

?

?

<script type="text/javascript" src="jquery-1.4.4.min.js"></script> 
<script language="javascript"> 
function regist(name){ 
    $.getJSON("http://www.klmama.com/test.php?id="+name+"&callback=?", 
function(data) { 
alert(decodeURI(data.a)); }); 
} 
</script> 
<a href="javascript:void(0)" onClick="regist('汉字')">注册用户</a>

?

?以上写法更加简单一点,总之一点就是动态插入<script src='其它系统页面地址'></