小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

深入淺出JSONP：解決AJAX跨域問題(轉(zhuǎn))

 quasiceo 2014-05-15

取不到數(shù)據(jù)！

上周客戶新買了服務(wù)器，原本在舊的服務(wù)器上放著客戶的Web主頁信息和一個后臺程序(asp.net)，在客戶的主頁中有一個動態(tài)顯示最新消息的處理，這個處理就是通過ajax異步從那個后臺程序中取得的。由于又購買了新的服務(wù)器，客戶想把web主頁和那個后臺程序分開來，后臺程序被部署到了新的服務(wù)器上。不過這個項目是我的同事小福同志開發(fā)的，也就由他來把程序分開部署，然后進行一些小改動。

"怎么最新消息取不到了，異步處理的url也已經(jīng)添加上新服務(wù)器的地址(http:///.../news.ashx)，奇怪了..."小福在一邊抱怨，我看了看IE7下還出了個腳本錯誤"アクセスが拒否されました"的錯誤(環(huán)境是日文的，意思是訪問被拒絕了)。網(wǎng)上查了下中文環(huán)境應該是"沒有權(quán)限"吧。在Firefox和Chrome上是看不到任何腳本錯誤的，不過可以通過Firebug工具測出這個錯誤（"Permission denied to call method XMLHttpRequest.open"）。

同源策略

為什么會出這樣的錯誤呢？這是因為所有支持Javascript的瀏覽器都會使用同源策略這個安全策略?？纯窗俣鹊慕忉專?/p>

同源策略，它是由Netscape提出的一個著名的安全策略?，F(xiàn)在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協(xié)議，端口相同。當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當一個百度瀏覽器執(zhí)行一個腳本的時候會檢查這個腳本是屬于哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執(zhí)行。

這就是引起為何取不到數(shù)據(jù)的原因了，那如何才能解決跨域的問題呢？沒錯，我們現(xiàn)在可以進入正題，來了解下什么是JSONP了。

JSON和JSONP

JSONP和JSON好像啊，他們之間有什么聯(lián)系嗎？

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。對于JSON大家應該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。

JSONP是JSON with Padding的略稱。它是一個非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實現(xiàn)跨域訪問（這僅僅是JSONP簡單的實現(xiàn)形式）。--來源百度

JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充)， 我們先看下面的小例子然后再詳細介紹。

跨域的簡單原理

光看定義還不是很明白，那首先我們先來手動做個簡單易懂的小測試。新建一個asp.net的web程序，添加sample.html網(wǎng)頁和一個test.js文件，代碼如下：

sample.html的代碼：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2.  <html xmlns="http://www./1999/xhtml" > 
  3.  <head> 
  4.      <title>test</title> 
  5.      <script type="text/javascript" src="test.js"></script> 
  6.  </head> 
  7.  <body> 
  8.  </body> 
  9.  </html> 

test.js的代碼：

  1. alert("success"); 

打開sample.html后會跳出"success”這樣的這樣的信息框，這似乎并不能說明什么， 跨域問題到底怎么解決呢？好，現(xiàn)在我們模擬下非同源的環(huán)境，剛才我們不是已經(jīng)用Visual Studio新建了一個Web程序嗎(這里我們叫A程序)，現(xiàn)在我們再打開一個新的Visual Studio再新建一個Web程序(B程序)，將我們的之前的test.js文件從A程序中移除然后拷貝到B程序中。兩個程序都運行起來后，Visual Studio會啟動內(nèi)置服務(wù)器，假設(shè)A程序是localhost:20001,B程序是localhost:20002，這就模擬了一個非同源的環(huán)境了(雖然域名相同但端口號不同，所以是非同源的)。

OK，我們接下來應該改下sample.html里的代碼，因為test.js文件在B程序上了，url也就變成了localhost:20002。

sample.html部分代碼：

  1. <script type="text/javascript" src="http://localhost:20002/test.js"></script> 

請保持AB兩個Web程序的運行狀態(tài)，當你再次刷新localhost:20001/sample.html的時候，和原來一樣跳出了"success"的對話框，是的，成功訪問到了非同源的localhost:20002/test.js這個所謂的遠程服務(wù)了。到了這一步，相信大家應該已經(jīng)大概明白如何跨域訪問了的原理了。

<script>標簽的src屬性并不被同源策略所約束，所以可以獲取任何服務(wù)器上腳本并執(zhí)行。

JSONP的實現(xiàn)模式：CallBack

剛才的小例子講解了跨域的原理，我們回上去再看看JSONP的定義說明中講到了javascript callback的形式。那我們就來修改下代碼，如何實現(xiàn)JSONP的javascript callback的形式。

程序A中sample的部分代碼：

  1. <script type="text/javascript">  
  2.  //回調(diào)函數(shù)  
  3.  function callback(data) {  
  4.      alert(data.message);  
  5.  }  
  6.  </script>  
  7.  <script type="text/javascript" src="http://localhost:20002/test.js"></script> 

程序B中test.js的代碼：

  1. //調(diào)用callback函數(shù)，并以json數(shù)據(jù)形式作為闡述傳遞，完成回調(diào)  
  2.  callback({message:"success"}); 

這其實就是JSONP的簡單實現(xiàn)模式，或者說是JSONP的原型：創(chuàng)建一個回調(diào)函數(shù)，然后在遠程服務(wù)上調(diào)用這個函數(shù)并且將JSON 數(shù)據(jù)形式作為參數(shù)傳遞，完成回調(diào)。

將JSON數(shù)據(jù)填充進回調(diào)函數(shù)，這就是JSONP的JSON+Padding的含義吧。

一般情況下，我們希望這個script標簽能夠動態(tài)的調(diào)用，而不是像上面因為固定在html里面所以沒等頁面顯示就執(zhí)行了，很不靈活。我們可以通過javascript動態(tài)的創(chuàng)建script標簽，這樣我們就可以靈活調(diào)用遠程服務(wù)了。

程序A中sample的部分代碼：

  1. <script type="text/javascript">  
  2.      function callback(data) {  
  3.          alert(data.message);  
  4.      }  
  5.      //添加<script>標簽的方法  
  6.      function addScriptTag(src){  
  7.      var script = document.createElement('script');  
  8.          script.setAttribute("type","text/javascript");  
  9.          script.src = src;  
  10.          document.body.appendChild(script);  
  11.      }  
  12.        
  13.      window.onload = function(){  
  14.          addScriptTag("http://localhost:20002/test.js");  
  15.      }  
  16.  </script> 

程序B的test.js代碼不變，我們再執(zhí)行下程序，是不是和原來的一樣呢。如果我們再想調(diào)用一個遠程服務(wù)的話，只要添加addScriptTag方法，傳入遠程服務(wù)的src值就可以了。這里說明下為什么要將addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，這個script標簽是被添加到body里的，由于我們寫的javascript代碼是在head標簽中，document.body還沒有初始化完畢呢，所以我們要通過window.onload方法先初始化頁面，這樣才不會出錯。

上面的例子是最簡單的JSONP的實現(xiàn)模型，不過它還算不上一個真正的JSONP服務(wù)。我們來看一下真正的JSONP服務(wù)是怎么樣的，比如Google的ajax搜索接口：http://ajax./ajax/services/search/web?v=1.0&q=?&callback=?

q=?這個問號是表示你要搜索的內(nèi)容，最重要的是第二個callback=?這個是正如其名表示回調(diào)函數(shù)的名稱，也就是將你自己在客戶端定義的回調(diào)函數(shù)的函數(shù)名傳送給服務(wù)端，服務(wù)端則會返回以你定義的回調(diào)函數(shù)名的方法，將獲取的json數(shù)據(jù)傳入這個方法完成回調(diào)。有點羅嗦了，還是看看實現(xiàn)代碼吧：

  1. <script type="text/javascript">  
  2.      //添加<script>標簽的方法  
  3.      function addScriptTag(src){  
  4.          var script = document.createElement('script');  
  5.          script.setAttribute("type","text/javascript");  
  6.          script.src = src;  
  7.          document.body.appendChild(script);  
  8.      }  
  9.        
  10.      window.onload = function(){  
  11.          //搜索apple，將自定義的回調(diào)函數(shù)名result傳入callback參數(shù)中  
  12.          addScriptTag("http://ajax./ajax/services/search/web?v=1.0&q=apple&callback=result");  
  13.            
  14.      }  
  15.      //自定義的回調(diào)函數(shù)result  
  16.      function result(data) {  
  17.          //我們就簡單的獲取apple搜索結(jié)果的第一條記錄中url數(shù)據(jù)  
  18.          alert(data.responseData.results[0].unescapedUrl);  
  19.      }  
  20.  </script> 

像這樣的JSONP服務(wù)還有很多(以下信息來自使用 JSONP 實現(xiàn)跨域通信，第 1 部分: 結(jié)合 JSONP 和 jQuery 快速構(gòu)建強大的 mashup)：

Digg API：來自 Digg 的頭條新聞：

http://services./stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?

Geonames API：郵編的位置信息：

http://www./postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr JSONP API：載入最新貓的圖片：

http://api./services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Yahoo Local Search API：在郵編為 10504 的地區(qū)搜索比薩：

http://local./LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

接下來我們自己來創(chuàng)建一個簡單的遠程服務(wù)，實現(xiàn)和上面一樣的JSONP服務(wù)。還是利用Web程序A和程序B來做演示，這次我們在程序B上創(chuàng)建一個MyService.ashx文件。

程序B的MyService.ashx代碼：

  1. public class MyService : IHttpHandler  
  2.      {  
  3.          public void ProcessRequest(HttpContext context)  
  4.          {  
  5.              //獲取回調(diào)函數(shù)名  
  6.              string callback = context.Request.QueryString["callback"];  
  7.              //json數(shù)據(jù)  
  8.              string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";  
  9.    
  10.              context.Response.ContentType = "application/json";  
  11.              //輸出：回調(diào)函數(shù)名(json數(shù)據(jù))  
  12.              context.Response.Write(callback + "(" + json + ")");  
  13.          }  
  14.    
  15.          public bool IsReusable  
  16.          {  
  17.              get  
  18.              {  
  19.                  return false;  
  20.              }  
  21.          }  
  22.      } 

程序A的sample代碼中的調(diào)用：

  1. <script type="text/javascript">  
  2.      function addScriptTag(src){  
  3.          var script = document.createElement('script');  
  4.          script.setAttribute("type","text/javascript");  
  5.          script.src = src;  
  6.          document.body.appendChild(script);  
  7.      }  
  8.        
  9.      window.onload = function(){  
  10.          //調(diào)用遠程服務(wù)  
  11.          addScriptTag("http://localhost:20002/MyService.ashx?callback=person");  
  12.            
  13.      }  
  14.      //回調(diào)函數(shù)person  
  15.      function person(data) {  
  16.          alert(data.name + " is a " + data.sex);  
  17.      }  
  18.  </script> 

這就完成了一個最基本的JSONP服務(wù)調(diào)用了，是不是很簡單，下面我們來了解下JQuery是如何調(diào)用JSONP的。

jQuery對JSONP的實現(xiàn)

jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(詳細可以參考http://api./jQuery.getJSON/)。那我們就來修改下程序A的代碼，改用jQuery的getJSON方法來實現(xiàn)(下面的例子沒用用到向服務(wù)傳參，所以只寫了getJSON(url,[callback]))：

  1. <script type="text/javascript" src="http://code./jquery-latest.js"></script>  
  2. <script type="text/javascript">  
  3.     $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){  
  4.         alert(data.name + " is a a" + data.sex);  
  5.     });  
  6. </script> 

結(jié)果是一樣的，要注意的是在url的后面必須添加一個callback參數(shù)，這樣getJSON方法才會知道是用JSONP方式去訪問服務(wù)，callback后面的那個問號是內(nèi)部自動生成的一個回調(diào)函數(shù)名。這個函數(shù)名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。

當然，加入說我們想指定自己的回調(diào)函數(shù)名，或者說服務(wù)上規(guī)定了固定回調(diào)函數(shù)名該怎么辦呢？我們可以使用$.ajax方法來實現(xiàn)(參數(shù)較多，詳細可以參考http://api./jQuery.ajax)。

先來看看如何實現(xiàn)吧：

  1. <script type="text/javascript" src="http://code./jquery-latest.js"></script>  
  2. <script type="text/javascript">  
  3.    $.ajax({  
  4.         url:"http://localhost:20002/MyService.ashx?callback=?",     
  5.         dataType:"jsonp",  
  6.         jsonpCallback:"person",  
  7.         success:function(data){  
  8.             alert(data.name + " is a a" + data.sex);  
  9.         }  
  10.    });  
  11. </script> 

沒錯，jsonpCallback就是可以指定我們自己的回調(diào)方法名person，遠程服務(wù)接受callback參數(shù)的值就不再是自動生成的回調(diào)名，而是person。dataType是指定按照JSOPN方式訪問遠程服務(wù)。

利用jQuery可以很方便的實現(xiàn)JSONP來進行跨域訪問。先暫時寫到這吧。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多