AJAX（Asynchronous JavaScript and XML）是一種通過使用JavaScript和XML來實現數據異步加載的技術。通常，AJAX可以通過同域請求數據，但當需要從不同域請求數據時，跨域請求就成為一個問題。本文將介紹如何使用AJAX實現異步跨域請求數據，并通過舉例說明其應用。

跨域請求常常發生在多個域名的網頁之間，例如，我們的網站A需要從網站B獲取數據。在傳統的同域請求中，可以直接通過AJAX發送請求并獲取數據。然而，在跨域請求中，由于瀏覽器的同源策略（Same-Origin Policy），請求被限制只能發送給同一個域名下的服務器。假設我們的網站A的域名是www.exampleA.com，而網站B的域名是www.exampleB.com，瀏覽器會阻止A的JS代碼直接向B的服務器發送請求。

解決這個問題的一種常見方法是通過JSONP（JSON with Padding）技術。JSONP允許在不同域之間請求數據，并通過動態地創建一個<script>標簽來加載數據。考慮以下示例，我們的網站A需要獲取網站B上的數據：

<script>
function processData(data) {
// 在這里處理獲取的數據
}
function getData() {
var script = document.createElement('script');
script.src = 'http://www.exampleB.com/data.php?callback=processData';
document.body.appendChild(script);
}
</script>
<button onclick="getData()">獲取數據</button>

在上述代碼中，我們定義了一個名為getData的函數，在該函數中，我們通過創建一個新的<script>標簽，并將其src屬性設置為網站B上的數據接口URL。而在data.php中，我們使用callback參數來指定回調函數的名稱：

$currentData = array(1, 2, 3, 4, 5);
$callback = $_GET['callback'];
echo $callback . '(' . json_encode($currentData) . ')';

當點擊“獲取數據”按鈕時，getData函數被觸發，從而向網站B發送請求，并將回調函數名稱傳遞給服務器。服務器返回的數據將通過回調函數processData進行處理。

然而，JSONP存在一些安全問題。由于JSONP請求是通過<script>標簽加載的，它不受瀏覽器的同源策略限制。這意味著，如果我們接受到惡意代碼，它可能會在我們的頁面中執行。因此，需要確保只從可信任的源獲取JSONP數據。另外，JSONP只支持GET請求，這意味著無法使用POST或其他HTTP方法來發送數據。

為了解決這些問題，我們可以使用CORS（Cross-Origin Resource Sharing，跨域資源共享）技術。CORS允許在瀏覽器中發送跨域請求，同時提供了一些安全機制來限制對數據的訪問。我們可以通過以下方式在AJAX中使用CORS來請求數據：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.exampleB.com/data.php', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 在這里處理獲取的數據
}
};
xhr.send();

在上述代碼中，我們首先創建一個XMLHttpRequest對象，并使用open方法指定請求的URL和HTTP方法。接著，我們設置withCredentials屬性為true，以便允許跨域請求攜帶身份憑證（如Cookies）。然后，我們通過設置onreadystatechange事件來監聽服務器響應，當請求狀態為4（已完成）并且HTTP狀態碼為200（成功）時，我們可以處理獲取的數據。

總之，通過JSONP和CORS技術，我們可以在AJAX中實現異步跨域請求數據。JSONP是一種簡單的方法，但存在安全問題，并且僅支持GET請求。而CORS提供了更多的安全機制，同時支持各種HTTP方法。根據具體的應用場景和需求，我們可以選擇適合的方法來實現跨域請求。