隨筆-59  評論-31  文章-0  trackbacks-0

          介紹JSONP之前,先簡單的介紹一些JSON。JSON是JavaScript Object Notation的縮寫,是一種輕量的、可讀的基于文本的數(shù)據(jù)交換開放標準。源于JavsScript編程語言中對簡單數(shù)據(jù)結(jié)構(gòu)和關(guān)聯(lián)數(shù)組的展示功能。它是僅含有數(shù)據(jù)對和簡單括號結(jié)構(gòu)的純文本,因此可通過許多途徑進行JSON消息的傳遞。

           

          1. JSONP定義
              JSONP是英文JSON with Padding的縮寫,是一個非官方的協(xié)議。它允許在服務(wù)器端生成script tags返回至客戶端,通過javascript callback的形式來實現(xiàn)站點訪問。 JSONP是一種script tag的注入,將server返回的response添加到頁面實現(xiàn)特定功能。

          2.JSONP由來

              要解釋JSONP的來由,先要說一下瀏覽器的“同源策略(SOP:Same Origin Policy)”。 簡而言之,就是瀏覽器限制腳本程序只能和同協(xié)議、同域名、同端口的腳本進行交互,這包括共享和傳遞變量等。cookie的傳遞也是遵從同樣策略。這就造成一些涉及到多個服務(wù)器的應(yīng)用在整合時一些麻煩。跨域訪問的問題造成A站點的Ajax代碼無法訪問B站點的數(shù)據(jù)。

               如何解決跨域訪問呢?那就要借助瀏覽器的一個特性:盡管瀏覽器不允許頁面中的腳本程序跨域讀取數(shù)據(jù),但卻允許HTML引用跨域的資源,如圖片,CSS和腳本程序。對于腳本程序的引用比較特殊,它被瀏覽器解析以后,就和本地的腳本程序別無二致且可立即進行解釋并執(zhí)行。如在B站點的一個js文件,一個簡單的提示框:alert(“This is Victor!”);。在A站點引用這個js,這個腳本就會在B站點的應(yīng)用中執(zhí)行,顯示一個alert信息。由于站外腳本的引用是通過script tag來實現(xiàn)的,而腳本程序又可通過DOM的方式可以對HTML頁面的所有標簽進行控制(包括動態(tài)的創(chuàng)建script標簽),這就可以實現(xiàn)通過調(diào)用站外程序?qū)Ρ镜刭Y源進行更改了。另外,通過<script> 標記的使用,就可從服務(wù)端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JSON數(shù)據(jù)。

           

          3. JSONP原理與實現(xiàn)
              首先在客戶端注冊一個callback, 然后把callback的名字傳給服務(wù)器。此時,服務(wù)器先生成 JSON數(shù)據(jù)。然后以JavaScript 語法的方式,生成一個function, function名字就是傳遞上來的參數(shù)jsonp.  

              然后,將JSON數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫絝unction中,這樣就生成了一段 js 語法的文檔,返回給客戶端。 

              最后,在客戶端瀏覽器中解析script標簽,并執(zhí)行返回的JavaScript文檔,此時數(shù)據(jù)作為參數(shù),傳入到了客戶端預(yù)先定義好的回調(diào)函數(shù)里(動態(tài)執(zhí)行回調(diào)函數(shù)) 。

           

           

          其實 JSONP是個很簡單的一個東西。主要是利用了 <script/>標簽對javascript文檔的動態(tài)解析來實現(xiàn)。(其實也可以用eval函數(shù)) 。

           

          4.下面分別用js和jquery實現(xiàn)代碼如下:

          test.jsp中的js代碼:

           

          js:

          1. <script type="text/javascript">    
          2.     function jsonpCallback(result){     
          3.        alert(result[1].name);     
          4.     }     
          5. </script>  
          6. <script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>  

           

           或jquery代碼:

           

          1. <script type="text/javascript">     
          2.     $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?"function(json){      
          3.         alert(json[0].name);     
          4.     });     
          5. </script>  

           

           

          jsonp.jsp代碼:

          1. <%  
          2.      String callback = request.getParameter("callback");  
          3.      out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");  
          4.      out.print(callback);  
          5. %>  

           

          當然,后臺可以用action或servlet等實現(xiàn)。

           

          最后,只要是瀏覽器輸入http://localhost:8080/Jsonp/test.jsp就會彈出John了。

           

          posted on 2011-12-10 19:14 RoyPayne 閱讀(578) 評論(0)  編輯  收藏 所屬分類: javascript
          主站蜘蛛池模板: 牟定县| 遵化市| 新巴尔虎左旗| 吉林市| 宜章县| 南皮县| 德令哈市| 宿迁市| 澄城县| 金溪县| 报价| 松江区| 锦屏县| 正蓝旗| 神池县| 商都县| 讷河市| 周口市| 乃东县| 吴川市| 云林县| 南漳县| 平武县| 武城县| 安岳县| 昌图县| 双城市| 美姑县| 上饶市| 左权县| 高平市| 岗巴县| 泰兴市| 洱源县| 虞城县| 五大连池市| 新营市| 新昌县| 聊城市| 淮阳县| 舞钢市|