一直沒時間玩js,看到douban網的開放api后,查了些文檔,了解了一下 jsonp 跨域請求方式.跟大家分享一下。
其實 jsonp 是個很簡單的一個東西。
主要是利用了 <script/> 標簽對 javascript 文檔的動態解析來實現。(其實也可以用eval函數)
來個超簡單的例子:
首先是準備客戶端的代碼,
- <!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/javascript">
- function jsonpCallback(result)
- {
- alert(result.msg);
- }
- </script>
- <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
- </head>
- <body>
- </body>
- </html>
<!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/javascript">function jsonpCallback(result){alert(result.msg);}</script><script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script></head><body></body></html>
其中 jsonCallback 是客戶端注冊的,獲取跨域服務器上的json數據后,回調的函數。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
這個 url 是跨域服務器取 json 數據的接口,參數為回調函數的名字,返回的格式為
- jsonpCallback({msg:'this is json data'})
jsonpCallback({msg:'this is json data'})
Jsonp原理:
首先在客戶端注冊一個callback, 然后把callback的名字傳給服務器。
此時,服務器先生成 json 數據。
然后以 javascript 語法的方式,生成一個function , function 名字就是傳遞上來的參數 jsonp.
最后將 json 數據直接以入參的方式,放置到 function 中,這樣就生成了一段 js 語法的文檔,返回給客戶端。
客戶端瀏覽器,解析script標簽,并執行返回的 javascript 文檔,此時數據作為參數,傳入到了客戶端預先定義好的 callback 函數里.(動態執行回調函數)
本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請
點擊舉報。