jsonp 解决跨域问题

跨域问题

当一个页面向其他域名发送ajax请求时,取不到数据。

这是同源策略所决定的。

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

解决方法:JSONP

JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

简单原理

<!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</title>

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

 </head>

 <body>

 </body>

 </html>

我们发现<script type="text/javascript" src="test.js"></script>是不受跨域限制的。

test.js换成 http://www.acb.com/test.js 也能返回数据,只要这个js真实存在。

所以只要把  http://www.acb.com/test.js 替换成了 http://xxx.html 、 http://xxx.jsp 、 http://xxx.php 、 http://xxx.action

都能返回数据,当然返回的数据要符合一定的格式。

返回数据格式

callback(jsonObject)

callback 是 回调的 js 方法名

jsonObject是 符合json格式数据对象,用于作为回调方法的参数使用。

例如

<!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</title>

     <script type="text/javascript">

function methodA(data){

alert(data.message);

}

     </script>

     <script type="text/javascript" src="http://www.abc.com/test.action"></script>

 </head>

 <body>

 </body>

 </html>

http://www.abc.com/test.action 返回的数据格式必须

methodA({

   "message":"someMessage";

})

相当于返回一段 js 代码,直接触发methodA方法。

其他说明

1.有时候其他告诉别人必须回调哪个方法,可以在<script type="text/javascript" src="http://www.abc.com/test.action?callback=methodA"></script>

通过callback=methodA 告诉对方返回的数据的时候 把 methodA 包在最外面。

2.当自己不确定对方返回的json格式时候,可以用

for(var i in data){  

        alert(data[i]);  

}  

循环json在查看到底返回了什么数据

3.JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

4.jquery提供了功能更为完善的jsonp请求方法。

猜你喜欢

转载自yangyangmilan.iteye.com/blog/1844335