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),从而实现了跨域.

<! DOCTYPE html PUBLIC  " -//W//DTD XHTML Transitional//EN "   " http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd " >   
< html xmlns = " http://www.worg/xhtml "   >   
< head >   
     < title > Test Jsonp < / title>  
     < script src = " http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js "  type = " text/javascript " >< / script>      
     < script type = " 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 >   
< script type = " text/javascript "  src = " http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json& jsoncallback=jsonpCallback " >< / script>   
< / body>  
< / html>

 

jQuery的解决方案：

<! DOCTYPE html PUBLIC  " -//W//DTD XHTML Transitional//EN "   " http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd " >   
< html xmlns = " http://www.worg/xhtml "   >   
< head >   
     < title > Test Jsonp < / title>  
     < script src = " http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js "  type = " text/javascript " >< / script>      
     < script type = " 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,  function (i, item) {
                    $( " <img/> " ).attr( " src " , 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