在CORS(Cross-Origin Resource Sharing,跨域資源共享)出現以前,要實現跨域Ajax通信是很難的.
可以利用DOM中能夠執行跨域請求的功能,來實現跨域通信:

瀏覽器到服務器的單向通信:
此項技術稱為圖像Ping,利用的是img.src的跨域事件
img.src只能通過偵聽load和error事件來確定瀏覽器數據是否到達服務器,而無法獲取服務器的任何內容

// 圖片Ping var img = new Image(); img.onload = img.onerror = function() {alert("Done!"); }; img.src = "http://www.example.com/test?name=Nicholas"; // 由于是單向,因此最常用于跟蹤用戶點擊頁面或動態廣告的曝光次數

使用回調函數的雙向通信:
此項技術被稱為JSONP(JSON with padding,參數式JSON).
JSONP利用了動態<script>的src屬性
使用JSONP首先得確定一個回調函數(如:handleResponse)
然后在將回調函數用?callback = handleResponse的形式拼進請求url中

// JSONP function handleResponse(response) { // 回調函數alert("You`re at IP address " + response.ip + ", which is in " + resonse.city + ", " +response.region_name); } var script = document.createElement("script"); script.src = "http://freegeoip.net/json/?callback=handleResponse"; // 帶回調函數的url路勁放入src屬性中 document.body.insertBefore(script, document.body.firstChild);// 注1: response是請求freegeoip.net主機,端口80,json文件的數據返回的,使用的是http協議

服務器向頁面推送數據的技術:
Comet:是一種服務器向頁面推送數據的技術,它引入了2個概念:長輪詢和流 的實現方式

// 長輪詢: // 頁面發起一個到服務器的請求,然后服務器一直保持連接打開,直到有數據可以發送 // 發送完畢后,瀏覽器關閉連接,隨即又發起一個新的連接并等待 // 此項技術可以通過XHR對象和setTimeout事件實現.// 流 // 使用HTTP流實現:在頁面的整個生命周期內只使用一個HTTP連接 // 具體來說,就是瀏覽器向服務器發送一個請求,然后與服務器保持連接打開狀態,周期性的向瀏覽器發送數據 // 在Firefox、Safari、Opera和Chrome中,通過偵聽readystatechange事件及檢測readyState的值是否為3(接收到部分數據) // 就可以利用XHR對象實現HTTP流// 使用XHR 對象實現HTTP流 function createStreamingClient(url, progress, finished) {var xhr = new XMLHttpRequest,received = 0;xhr.open("get", url, true);xhr.onreadystatechange = function() {var result;if( xhr.readyState == 3) {// 只取得最新數據并調整計數器result = xhr.responseText.substring(received);received += result.length;// 調用progress回調函數progress(result);} else if ( xhr.readyState == 4) {finished(xhr.responseText)}xhr.send(null);return xhr; } // 調用 var client = createStreamingClient("streaming.php", function(data) {alert("Received: " + data);}, function(data){alert("Done!"); });

參考《JavaScript高級程序設計》(第3版)P586~P589

總結

以上是生活随笔為你收集整理的javascript --- 几个其他的跨域技术(图像Ping、JSONP、Comet)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。