Ajax（Asynchronous JavaScript and XML）是一種利用JavaScript和XML進行客戶端與服務器異步通信的技術。它可以實現網頁無刷新更新數據、交互式用戶界面等功能，廣泛應用于Web開發。然而，由于同源策略的限制，Ajax默認只允許在同一個域名下的頁面之間進行數據交互。本文將介紹Ajax如何通過跨域調用接口來實現跨域數據交互，并提供了豐富的示例。

在介紹如何跨域調用接口之前，我們先來了解一下什么是同源策略。同源策略是為了保護用戶隱私和安全而設計的一種安全策略。同源指的是協議、域名和端口號完全相同。舉個例子來說，如果當前頁面的域名是example.com，那么只有和example.com在協議、域名和端口號上完全相同的頁面才被認為是同源的。

然而，有時候我們需要在不同的域名下進行數據交互。例如，我們的網站需要從另一個域名的接口獲取數據。這時，就需要跨域調用接口來實現這個功能。

一種常見的跨域調用接口的方法是JSONP（JSON with Padding）。JSONP利用了HTML頁面可以引用不同域名下的JavaScript文件這一特性。通過在頁面中動態創建一個script標簽，將接口的URL作為src屬性值，并在URL中加入一個回調函數名參數，使得接口返回的數據作為回調函數的參數傳遞回來。這樣，我們就可以獲取到從其他域名返回的數據了。

<script>
function callback(data) {
// 處理返回的數據
}
</script>
<script src="http://otherdomain.com/api?callback=callback"></script>

然而，JSONP有一些局限性。首先，JSONP只支持GET請求，不支持POST請求。其次，JSONP只能獲取到接口返回的數據，無法獲取接口返回的狀態碼、響應頭等信息。最后，JSONP容易受到XSS攻擊。因為JSONP是將數據作為回調函數的參數傳遞給客戶端的，如果接口返回的數據被惡意篡改，就會導致安全問題。

另一種跨域調用接口的方法是使用CORS（Cross-Origin Resource Sharing）。CORS是一種瀏覽器機制，允許服務器通過響應頭告訴瀏覽器是否允許當前頁面跨域訪問。如果服務器設置了合適的響應頭，瀏覽器就會允許當前頁面進行跨域訪問。

在Ajax中使用CORS只需要將跨域請求的HTTP頭設置為允許跨域訪問即可。以下是一個使用Ajax實現跨域調用接口的例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://otherdomain.com/api');
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 處理返回的數據
} else {
// 處理錯誤
}
}
};
xhr.send();

在這個例子中，我們通過XMLHttpRequest對象發送了一個GET請求到http://otherdomain.com/api。其中，xhr.withCredentials = true;表示允許跨域訪問的HTTP頭已經被設置為true，這樣瀏覽器就會允許當前頁面跨域訪問。在接收到響應后，我們可以根據xhr.status獲取狀態碼，根據xhr.responseText獲取返回的數據。

總結來說，Ajax可以通過JSONP或CORS實現跨域調用接口。JSONP適用于只需要獲取數據，并且可以接受到接口返回的數據作為回調函數參數的情況。CORS適用于需要獲取接口返回的狀態碼、響應頭等信息的情況。在實際開發中，我們可以根據具體情況選擇合適的方法來實現跨域數據交互。