Jsonp 跨域的原理以及Jquery的解决方案
转自:http://www.cnblogs.com/DanielChow/archive/2010/05/17/1737070.html 原理:JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。 个人理解: 就是在客户端动态注册一个函数function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的function a(data),从而实现了跨域.
<!
DOCTYPEhtmlPUBLIC
"
-//W//DTDXHTMLTransitional//EN
"
"
http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd
"
>
< htmlxmlns = " http://www.worg/xhtml " > < head > < title > TestJsonp < / title> < scriptsrc = " http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type = " text/javascript " >< / script> < scripttype = " text/javascript " > function jsonpCallback (result) { $.each(result.items, function (i,item){ $( " <img/> " ).attr( " src " ,item.media.m).appendTo( " body " ); if (i == 3 ) return false ; }); } < / script> < / head> < body > < scripttype = " text/javascript " src = " http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json& jsoncallback=jsonpCallback " >< / script> < / body> < / html> jQuery的解决方案:
<!
DOCTYPEhtmlPUBLIC
"
-//W//DTDXHTMLTransitional//EN
"
"
http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd
"
>
< htmlxmlns = " http://www.worg/xhtml " > < head > < title > TestJsonp < / title> < scriptsrc = " http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type = " text/javascript " >< / script> < scripttype = " text/javascript " > $( function (){ $.getJSON( " http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json& jsoncallback=? " , function (data){ $.each(data.items,item.media.m).appendTo( " body " ); if (i == 3 ) return false ; }); }); }); < / script> < / head> < body >< / body> < / html> jquery 的jsoncallback是动态生成的,真正请求服务器的地址:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |