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

Jsonp 跨域的原理以及Jquery的解决方案

猜你在找的Json相关文章