Jsonp 方式跨域获取 json 数据原理

Jsonp 方式跨域获取 json 数据原理

转自：http://blog.163.com/diaochongzhe@126/blog/static/16328604200910139418714/?fromdm&fromSearch&isFromSearchEngine=yes

douban网的开放api后，查了些文档，了解了一下 jsonp 跨域请求方式.跟大家分享一下。

其实 jsonp 是个很简单的一个东西。
主要是利用了 <script/> 标签对 javas<wbr style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">cript 文档的动态解析来实现。（其实也可以用ev</span><wbr style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">al</span><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">函数</span><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">）</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">来个超简单的例子：</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">首先是准备客户端的</span><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">代码</span><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">，</span> <div style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"> <div> <ol style="margin-top:5px; margin-right:0px; margin-bottom:5px; margin-left:40px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"> <li>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br> </li> <li>&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;<br> </li> <li>&lt;head&gt;<br> </li> <li> &lt;title&gt;Test Jsonp&lt;/title&gt;<br> </li> <li>&lt;script type="text/javas<wbr>cript"&gt;<br></wbr> </li> <li> function jsonpCallback(result)<br> </li> <li> {<br> </li> <li> alert(result.msg);<br> </li> <li> }<br> </li> <li> &lt;/script&gt;<br> </li> <li>&lt;script type="text/javas<wbr>cript" src="http://crossdomain.com/json<span>Server</span>Response?jsonp=jsonpCallback"&gt;&lt;/script&gt;<br></wbr> </li> <li>&lt;/head&gt;<br> </li> <li>&lt;body&gt;<br> </li> <li>&lt;/body&gt;<br> </li> <li>&lt;/html&gt;&amp;nbsp;</li> </ol> </div> <em>复制代码</em> </div> <span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">其中 jsonCallback 是客户端注册的，</span><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">获取</span><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">跨域</span><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">服务器</span><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">上的json</span><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">数据</span><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">后，回调的函数。</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">这个 url 是跨域</span><span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">服务</span><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">器取 json 数据的接口，参数为回调函数的名字，返回的格式为</span> <div style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"> <div> <ol style="margin-top:5px; margin-right:0px; margin-bottom:5px; margin-left:40px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px"><li>jsonpCallback({msg:'this is json da<wbr>ta'})</wbr> </li></ol> </div> <em>复制代码</em> </div> <span style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left">Jsonp原理：</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">首先在客户端注册一个callback, 然后把callback的名字传给服务器。</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">此时，服务器先生成 json 数据。</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">然后以 javas</span><wbr style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">cript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。</span><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><br style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">客户端浏览器，解析script标签，并执行返回的 javas</span><wbr style="line-height:25px; color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; text-align:left"><span style="color:rgb(97,34,18); font-family:Arial,Helvetica,simsun,u5b8bu4f53; font-size:14px; line-height:25px; text-align:left">cript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）</span> </wbr></wbr></wbr></wbr>