近年來，隨著互聯網的發展和應用的普及，跨域請求成為了一個熱門話題。在這個信息爆炸的時代，我們經常會遇到不同域名之間需要進行數據交互的情況，而Ajax的出現為我們提供了一種解決方案。本文將深入探討Ajax中的GET跨域請求，并通過舉例子來解釋其工作原理和實現方法。

Ajax是一種基于JavaScript和XML的網絡數據交互技術，它通過在后臺與服務器進行少量數據交換，而不影響當前頁面的加載和顯示，從而實現異步更新頁面內容的效果。然而，由于瀏覽器的安全機制限制，當我們使用Ajax進行跨域請求時，常常會遭遇到一些問題。

舉個例子來說明這個問題。假設我們有一個網站A，它的域名是www.example.com，而我們想從這個網站獲取另一個域名為www.example-api.com的API的數據。由于瀏覽器的同源策略限制，直接使用Ajax進行跨域請求是不允許的，這是因為瀏覽器只允許在相同域名下進行數據交互。

然而，我們可以通過一些方法來實現Ajax的跨域請求。其中一種常見的方法是使用JSONP（JSON with Padding）技術。JSONP是通過動態創建script標簽，并指定src屬性為目標API的URL，然后在URL中添加一個回調函數參數，使得服務器返回的數據作為參數傳遞給回調函數，從而繞過瀏覽器的同源策略。下面的例子演示了如何使用JSONP進行跨域請求：

// 定義一個回調函數
function processData(data) {
// 處理返回的數據
console.log(data);
}
// 創建script標簽，并指定src屬性為目標API的URL
var script = document.createElement('script');
script.src = 'https://www.example-api.com/data?callback=processData';
// 將script標簽添加到頁面中
document.body.appendChild(script);

這段代碼中，我們定義了一個回調函數processData，它用于處理返回的數據。然后，我們創建了一個script標簽，并將src屬性設置為目標API的URL，同時在URL中添加了一個名為callback的參數，值為我們定義的回調函數名processData。最后，我們將script標簽添加到頁面中，瀏覽器就會自動請求該URL，并將返回的數據作為參數傳遞給回調函數。

除了JSONP，還有另一種常見的跨域請求方法是CORS（Cross-Origin Resource Sharing）技術。CORS是一種在瀏覽器和服務器之間進行跨域通信的標準，它允許服務器聲明哪些跨域請求是被允許的。通過在服務器的響應頭中添加Access-Control-Allow-Origin字段，我們可以指定允許訪問的域名。下面的例子演示了如何使用CORS進行跨域請求：

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 初始化請求
xhr.open('GET', 'https://www.example-api.com/data', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 發送請求
xhr.send();
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 處理返回的數據
console.log(xhr.responseText);
}
};

在這個例子中，我們使用XMLHttpRequest對象創建了一個GET請求，并指定目標API的URL。然后，我們可以設置請求頭，如Content-Type等。最后，我們發送請求，并通過監聽請求狀態變化來處理返回的數據。需要注意的是，服務器需要在響應頭中添加Access-Control-Allow-Origin字段，來指定允許訪問的域名。

綜上所述，Ajax的GET跨域請求是通過使用JSONP或CORS技術來實現的。通過動態創建script標簽并使用回調函數，或者使用XMLHttpRequest對象并在服務器的響應頭中添加Access-Control-Allow-Origin字段，我們可以繞過瀏覽器的同源策略，實現跨域請求。這為我們在不同域名之間進行數據交互提供了一種有效的解決方案。