介紹JSONP之前，先簡(jiǎn)單的介紹一些JSON。JSON是JavaScript Object Notation的縮寫，是一種輕量的、可讀的基于文本的數(shù)據(jù)交換開放標(biāo)準(zhǔn)。源于JavsScript編程語言中對(duì)簡(jiǎn)單數(shù)據(jù)結(jié)構(gòu)和關(guān)聯(lián)數(shù)組的展示功能。它是僅含有數(shù)據(jù)對(duì)和簡(jiǎn)單括號(hào)結(jié)構(gòu)的純文本，因此可通過許多途徑進(jìn)行JSON消息的傳遞。
1. JSONP定義
JSONP是英文JSON with Padding的縮寫，是一個(gè)非官方的協(xié)議。它允許在服務(wù)器端生成script tags返回至客戶端，通過javascript callback的形式來實(shí)現(xiàn)站點(diǎn)訪問。 JSONP是一種script tag的注入，將server返回的response添加到頁面實(shí)現(xiàn)特定功能。
2.JSONP由來
要解釋JSONP的來由，先要說一下瀏覽器的“同源策略(SOP:Same Origin Policy)”。 簡(jiǎn)而言之，就是瀏覽器限制腳本程序只能和同協(xié)議、同域名、同端口的腳本進(jìn)行交互，這包括共享和傳遞變量等。cookie的傳遞也是遵從同樣策略。這就造成一些涉及到多個(gè)服務(wù)器的應(yīng)用在整合時(shí)一些麻煩。跨域訪問的問題造成A站點(diǎn)的Ajax代碼無法訪問B站點(diǎn)的數(shù)據(jù)。
如何解決跨域訪問呢？那就要借助瀏覽器的一個(gè)特性：盡管瀏覽器不允許頁面中的腳本程序跨域讀取數(shù)據(jù)，但卻允許HTML引用跨域的資源，如圖片，CSS和腳本程序。對(duì)于腳本程序的引用比較特殊，它被瀏覽器解析以后，就和本地的腳本程序別無二致且可立即進(jìn)行解釋并執(zhí)行。如在B站點(diǎn)的一個(gè)js文件，一個(gè)簡(jiǎn)單的提示框：alert（“This is Victor！”）;。在A站點(diǎn)引用這個(gè)js，這個(gè)腳本就會(huì)在B站點(diǎn)的應(yīng)用中執(zhí)行，顯示一個(gè)alert信息。由于站外腳本的引用是通過script tag來實(shí)現(xiàn)的，而腳本程序又可通過DOM的方式可以對(duì)HTML頁面的所有標(biāo)簽進(jìn)行控制（包括動(dòng)態(tài)的創(chuàng)建script標(biāo)簽），這就可以實(shí)現(xiàn)通過調(diào)用站外程序?qū)Ρ镜刭Y源進(jìn)行更改了。另外，通過<script> 標(biāo)記的使用，就可從服務(wù)端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JSON數(shù)據(jù)。
3. JSONP原理與實(shí)現(xiàn)
首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。此時(shí)，服務(wù)器先生成 JSON數(shù)據(jù)。然后以JavaScript 語法的方式，生成一個(gè)function, function名字就是傳遞上來的參數(shù)jsonp.
然后，將JSON數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫絝unction中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
最后，在客戶端瀏覽器中解析script標(biāo)簽，并執(zhí)行返回的JavaScript文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的回調(diào)函數(shù)里(動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)) 。
其實(shí) JSONP是個(gè)很簡(jiǎn)單的一個(gè)東西。主要是利用了 <script/>標(biāo)簽對(duì)javascript文檔的動(dòng)態(tài)解析來實(shí)現(xiàn)。（其實(shí)也可以用eval函數(shù)） 。
4.下面分別用js和jquery實(shí)現(xiàn)代碼如下：
test.jsp中的js代碼：
js：
- <script type="text/javascript">
- function jsonpCallback(result){
- alert(result[1].name);
- }
- </script>
- <script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>
或jquery代碼：
- <script type="text/javascript">
- $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){
- alert(json[0].name);
- });
- </script>
jsonp.jsp代碼：
- <%
- String callback = request.getParameter("callback");
- out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
- out.print(callback);
- %>
當(dāng)然，后臺(tái)可以用action或servlet等實(shí)現(xiàn)。
最后，只要是瀏覽器輸入http://localhost:8080/Jsonp/test.jsp就會(huì)彈出John了。
posted on 2011-12-10 19:14
RoyPayne 閱讀(585)
評(píng)論(0) 編輯 收藏 所屬分類:
javascript