Jsonp 方式跨域获取 json 数据原理
douban网的开放api后,查了些文档,了解了一下 jsonp 跨域请求方式.跟大家分享一下。
其实 jsonp 是个很简单的一个东西。主要是利用了 <script/> 标签对 javas
来个超简单的例子:
首先是准备客户端的 代码 ,
- <!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 Jsonp</title>
- <script type="text/javas
cript">
- function jsonpCallback(result)
- {
- alert(result.msg);
- }
- </script>
- <script type="text/javas
cript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
- </head>
- <body>
- </body>
- </html>
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
这个 url 是跨域 服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为
- jsonpCallback({msg:'this is json da
ta'})
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javas
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javas