本文將介紹Ajax和JSONP的概念以及它們之間的關系。AJAX（Asynchronous JavaScript and XML）是一種用于在Web應用程序中異步獲取數據的技術。而JSONP（JSON with Padding）是一種克服跨域訪問的限制的解決方案。通過結合使用Ajax和JSONP，我們可以實現同步獲取跨域數據的功能。

假設我們正在開發一個電商網站，我們需要從另一個域中獲取商品的價格和庫存信息以便顯示在我們的網頁上。由于瀏覽器的同源策略限制，我們無法直接從其他域名獲取數據。在這種情況下，我們可以使用JSONP來解決這個問題。

首先，我們需要在HTML頁面中引入jQuery庫，這將幫助我們使用Ajax和JSONP的功能。通過以下代碼片段：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

現在我們可以使用以下代碼來獲取商品的價格和庫存信息：

<script>
$.ajax({
url: 'https://example.com/product',
type: 'GET',
dataType: 'jsonp',
success: function(data) {
// 在這里處理返回的數據
console.log(data);
},
error: function(xhr, status, error) {
// 處理錯誤情況
console.log(error);
}
});
</script>

在上面的代碼中，我們使用了$.ajax函數來發送一個GET請求到'https://example.com/product'這個URL，設置dataType為'jsonp'以告訴jQuery我們希望使用JSONP來獲取數據。在成功回調函數中，我們可以處理返回的數據，而在錯誤回調函數中，我們可以處理可能出現的錯誤情況。

服務器端的響應將需要使用JSONP的格式，這意味著它應該是一個函數調用，而不是一個簡單的JSON對象。例如，服務器端可以返回以下內容：

callbackFunction({
"price": 9.99,
"stock": 100
});

在這個例子中，服務器端返回的數據會被包裝在名為callbackFunction的函數調用中。當瀏覽器接收到響應后，它會執行這個函數調用，并將數據作為參數傳遞給它。這樣，我們就可以在success回調函數中訪問到返回的數據。

通過使用Ajax和JSONP，我們可以輕松地解決跨域訪問的問題，并從其他域名獲取數據。這對于開發多域應用程序非常有用，因為我們可以在一個域中獲取另一個域的數據并在我們的網頁上顯示。

總之，Ajax和JSONP是非常有用的技術，可以幫助我們在Web應用程序中異步獲取數據并克服跨域訪問的限制。它們的結合使用使得我們能夠實現同步獲取跨域數據的功能，可以大大提高我們的開發效率。