欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

常見的javascript跨域通信方法

 更新時間：2015年12月31日 15:09:40   投稿：lijiao  
這篇文章主要介紹了常見的javascript跨域通信方法

本文主要介紹幾種常見的javascript跨域通信方法。首先講解一下JSONP。
1、JSONP
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。
下面我們來介紹下JSONP的具體實現(xiàn)。
我們知道，哪怕跨域js文件中的代碼（當然指符合web腳本安全策略的），web頁面也是可以無條件執(zhí)行的。遠程服務器remoteserver.com根目錄下有個remote.js文件代碼如下：
alert('我是遠程文件'); 
本地服務器localserver.com下有個jsonp.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></title> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

毫無疑問，頁面將會彈出一個提示窗體，顯示跨域調(diào)用成功。

現(xiàn)在我們在jsonp.html頁面定義一個函數(shù)，然后在遠程remote.js中傳入數(shù)據(jù)進行調(diào)用。jsonp.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></title> 
 <script type="text/javascript"> 
 var localHandler = function(data){ 
  alert('我是本地函數(shù)，可以被跨域的remote.js文件調(diào)用，遠程js帶來的數(shù)據(jù)是：' + data.result); 
 }; 
 </script> 
 <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> 
</head> 
<body> 
 
</body> 
</html>

remote.js文件代碼如下：
localHandler({"result":"我是遠程js帶來的數(shù)據(jù)"}); 
成功運行，看來跨域遠程獲取數(shù)據(jù)的目的實現(xiàn)了，但是又一個問題出現(xiàn)了，我怎么讓遠程js知道它應該調(diào)用的本地函數(shù)叫什么名字呢？這時我們就需要將服務端提供的js腳本動態(tài)生成就行了，調(diào)用者可用通過傳參告訴服務端自己需要什么函數(shù)，jsonp.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></title> 
 <script type="text/javascript"> 
 // 得到航班信息查詢結果后的回調(diào)函數(shù) 
 var flightHandler = function(data){ 
  alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 張。'); 
 }; 
 // 提供jsonp服務的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼） 
 var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; 
 // 創(chuàng)建script標簽，設置其屬性 
 var script = document.createElement('script'); 
 script.setAttribute('src', url); 
 // 把script標簽加入head，此時調(diào)用開始 
 document.getElementsByTagName('head')[0].appendChild(script); 
 </script> 
</head> 
<body> 
 
</body> 
</html>

這次的代碼變化比較大，不再直接把遠程js文件寫死，而是編碼實現(xiàn)動態(tài)查詢，而這也正是jsonp客戶端實現(xiàn)的核心部分，本例中的重點也就在于如何完成jsonp調(diào)用的全過程。
我們看到調(diào)用的url中傳遞了一個code參數(shù)，告訴服務器我要查的是CA1998次航班的信息，而callback參數(shù)則告訴服務器，我的本地回調(diào)函數(shù)叫做flightHandler，所以請把查詢結果傳入這個函數(shù)中進行調(diào)用。這個叫做flightResult.aspx的頁面生成了一段這樣的代碼提供給jsonp.html（服務端的實現(xiàn)這里就不演示了，與你選用的語言無關，說到底就是拼接字符串）：

flightHandler({ 
 "code": "CA1998", 
 "price": 1780, 
 "tickets": 5 
});

傳遞給flightHandler函數(shù)的是一個json，它描述了航班的基本信息。運行一下頁面，成功彈出提示窗口，jsonp的執(zhí)行全過程順利完成！
但是JSONP存在一點問題，就是由遠程服務端負責包裝json數(shù)據(jù)，并調(diào)用命名函數(shù)，這種方式存在安全隱患，在使用JSONP時，必須完全信任服務端所提供的數(shù)據(jù)，惡意腳本就可以直接接管我們的應用。所以接下來我們要介紹一種別的方式，來避免這種安全隱患。
2、CORS
CORS(Cross OriginResource Sharing,跨源資源共享)實現(xiàn)了跨源XMLHttpRequests,跨源HTTP請求包括一個Origin頭部，它為服務器提供HTTP請求的源信息。頭部由瀏覽器保護，不能被應用程序代碼更改。這種方式遠比評估外部輸入的方式安全。
以前的ajax只能同源請求，現(xiàn)在通過XMLHttpRequests二級，可以進行跨域請求。假設我們頁面或者應用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取數(shù)據(jù)。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤，"跨域"也就以此由來。
利用 CORS，http://www.test2.com 只需添加一個標頭，就可以允許來自 http://www.test1.com 的請求。php代碼如下：

header("Access-Comtrol-Allow-Origin:*");<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

其中*表示允許任何域向我們的服務端提交請求。也可以設置指定的域名，代碼如下：

header("Access-Control-Allow-Origin:http://www.test2.com");

設置好頭信息之后，其他域就可以進行請求了。
        使用"跨域資源共享"的前提，是瀏覽器必須支持這個功能，而且服務器端必須同意這種"跨域"。如果能夠滿足上面的條件，則代碼的寫法與不跨域的請求完全一樣。
xhr.open('GET', ' http://www.test2.com '); 
 接下來介紹另外一種實時通信方式：
3、Cross-document messaging
跨文檔信息通信。使用這個功能，只要獲取到網(wǎng)頁所在窗口對象的實例，不僅同原的web網(wǎng)頁可以互相通信，也可以實現(xiàn)跨域通信。要想接受從其他窗口發(fā)送來的信息，必須對窗口對象的onmessage事件進行監(jiān)聽，其他窗口可以通過postmessage方法來傳遞數(shù)據(jù)，該方法使用兩個參數(shù)：第一個參數(shù)為所發(fā)送的消息文本，但也可以是任何js對象，第二個參數(shù)為接收消息的對象窗口的url地址。
下面進行試驗，主頁面index.html代碼如下：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
 </head> 
<script type="text/javascript"> 
 function sendIt(){ 
  document.getElementById("otherPage").contentWindow 
  .postMessage(//向子窗口發(fā)出請求 
   document.getElementById("message").value,//值 
   "http://127.0.0.1:8020"http://目標域 
  ) 
 } 
</script> 
 <body> 
  <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe> 
  <br /><br /> 
  <input type="text" name="message" id="message" value="" /> 
  <input type="button" name="" id="" value="發(fā)送跨域消息" onclick="sendIt();" /> 
 </body> 
</html>

 窗口所引用頁面other.html代碼如下：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title></title> 
<script type="text/javascript"> 
 window.addEventListener("message",function(event){//通過onmessage監(jiān)聽 
  //將從父窗口傳來的數(shù)據(jù)展現(xiàn)出來 
  document.getElementById("content").innerHTML+=event.data+"<br>"; 
 },false); 
</script> 
 </head> 
 <body> 
  信息來自于另外一個域 
  <div id="content"> 
    
  </div> 
 </body> 
</html>

試驗結果如下：


可以看到在81端口服務器中的index.html和8020端口的服務器中的other.html進行的通信。
完整代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
<script type="text/javascript">
 function sendIt(){
 document.getElementById("otherPage").contentWindow
 .postMessage(//向子窗口發(fā)出請求
 document.getElementById("message").value,//值
 "http://127.0.0.1:8020"http://目標域
 )
 }
</script>
 <body>
 <iframe src="http://127.0.0.1:8020/test2/JS/jstest/Cross-document-messaging/other.html" id="otherPage" width="" height=""></iframe>
 <br /><br />
 <input type="text" name="message" id="message" value="" />
 <input type="button" name="" id="" value="發(fā)送跨域消息" onclick="sendIt();" />
 </body>
</html>

CrossDocumentMessaging_index.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
<script type="text/javascript">
 window.addEventListener("message",function(event){//通過onmessage監(jiān)聽
 //將從父窗口傳來的數(shù)據(jù)展現(xiàn)出來
 document.getElementById("content").innerHTML+=event.data+"<br>";
 },false);
</script>
 </head>
 <body>
 信息來自于另外一個域
 <div id="content">
 
 </div>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家了解熟悉常見的javascript跨域通信方法有所幫助。

相關文章

最新評論