常見的javascript跨域通訊方法_javascript技巧
本文主要介紹幾種常見的javascript跨域通訊方法。首先講解一下JSONP。
1、JSONP
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料存取的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的伺服器溝通，而 HTML 的<script> 元素是例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這個使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。 <br />
下面我們來介紹下JSONP的具體實作。 <br />
我們知道，即使跨域js檔案中的程式碼（當然指符合web腳本安全策略的），web頁面也是可以無條件執行的。遠端伺服器remoteserver.com根目錄下有個remote.js檔案程式碼如下：<br />
<span style="color: #3366ff"><strong>alert('我是遠端檔案'); <br />
本地伺服器localserver.com下有個jsonp.html頁面程式碼如下：<br />
</script>
<!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>
毫無疑問，頁面將會彈出一個提示窗體，顯示跨域呼叫成功。
現在我們在jsonp.html頁面定義一個函數，然後在遠端remote.js中傳入資料進行呼叫。 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('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
remote.js檔案程式碼如下：
localHandler({"result":"我是遠端js帶來的資料"});
成功運行，看來跨域遠端取得資料的目的實現了，但是又一個問題出現了，我怎麼讓遠端js知道它應該呼叫的本地函數叫什麼名字呢？這時我們就需要將服務端提供的js腳本動態產生就行了，呼叫者可用透過傳參告訴服務端自己需要什麼函數，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 flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
這次的程式碼變化比較大，不再直接把遠端js檔案寫死，而是編碼實作動態查詢，而這也正是jsonp客戶端實現的核心部分，本例中的重點也就在於如何完成jsonp調用的全過程。
我們看到調用的url中傳遞了一個code參數，告訴伺服器我要查的是CA1998次航班的信息，而callback參數則告訴伺服器，我的本地回調函數叫做flightHandler，所以請把查詢結果傳入這個函數中進行調用。這個叫做flightResult.aspx的頁面產生了一段這樣的程式碼提供給jsonp.html（服務端的實作這裡就不示範了，與你選用的語言無關，說到底就是拼接字串）：
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
傳遞給flightHandler函數的是一個json，它描述了航班的基本資訊。運行一下頁面，成功彈出提示窗口，jsonp的執行全過程順利完成！
但是JSONP存在一點問題，就是由遠端服務端負責包裝json數據，並調用命名函數，這種方式存在安全隱患，在使用JSONP時，必須完全信任服務端所提供的數據，惡意腳本就可以直接接管我們的應用。所以接下來我們要介紹一種別的方式，來避免這種安全隱憂。
2、CORS
CORS(Cross OriginResource Sharing,跨來源資源共享)實作了跨來源XMLHttpRequests,跨來源HTTP請求包含一個Origin頭部，它為伺服器提供HTTP請求的來源資訊。頭部由瀏覽器保護，不能被應用程式程式碼更改。這種方式遠比評估外部輸入的方式安全。
以前的ajax只能同源請求，現在透過XMLHttpRequests二級，可以進行跨域請求。假設我們頁面或應用程式已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取資料。一般情況下，如果我們直接使用 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
跨文档信息通信。使用这个功能，只要获取到网页所在窗口对象的实例，不仅同原的web网页可以互相通信，也可以实现跨域通信。要想接受从其他窗口发送来的信息，必须对窗口对象的onmessage事件进行监听，其他窗口可以通过postmessage方法来传递数据，该方法使用两个参数：第一个参数为所发送的消息文本，但也可以是任何js对象，第二个参数为接收消息的对象窗口的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(//向子窗口发出请求
document.getElementById("message").value,//值
"http://127.0.0.1:8020"//目标域
)
}
</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="发送跨域消息" 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监听
//将从父窗口传来的数据展现出来
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(//向子窗口发出请求
document.getElementById("message").value,//值
"http://127.0.0.1:8020"//目标域
)
}
</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="发送跨域消息" 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监听
//将从父窗口传来的数据展现出来
document.getElementById("content").innerHTML+=event.data+"<br>";
},false);
</script>
</head>
<body>
信息来自于另外一个域
<div id="content">
</div>
</body>
</html>以上就是本文的全部内容，希望对大家了解熟悉常见的javascript跨域通信方法有所帮助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
