一直沒時(shí)間玩js，看到douban網(wǎng)的開放api后，查了些文檔，了解了一下 jsonp 跨域請(qǐng)求方式.跟大家分享一下。
其實(shí) jsonp 是個(gè)很簡(jiǎn)單的一個(gè)東西。
主要是利用了 <script/> 標(biāo)簽對(duì) javascript 文檔的動(dòng)態(tài)解析來實(shí)現(xiàn)。（其實(shí)也可以用eval函數(shù)）
來個(gè)超簡(jiǎn)單的例子：
首先是準(zhǔn)備客戶端的代碼，
- <!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://www.goudiannao.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
其中 jsonCallback 是客戶端注冊(cè)的，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
這個(gè) url 是跨域服務(wù)器取 json 數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為
- jsonpCallback({msg:'this is json data'})
jsonpCallback({msg:'this is json data'})
Jsonp原理：
首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。
此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。
然后以 javascript 語法的方式，生成一個(gè)function , function 名字就是傳遞上來的參數(shù) jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）
posted on 2010-07-26 23:07
sanmao 閱讀(3110)
評(píng)論(2) 編輯 收藏