AJAX（Asynchronous JavaScript and XML）是一種在網頁上創建交互式應用程序的技術。通過使用AJAX，可以在更新網頁內容的同時不需要重新加載整個頁面。JSONP（JSON with Padding）是一種允許從不同域之間跨域請求數據的技術。API（Application Programming Interface）是一種允許不同應用程序之間進行數據交互的接口。結合AJAX、JSONP和API，可以實現在網頁上動態獲取和顯示來自不同域的數據。

舉例說明，假設有一個名為Weather API的接口，它提供了從不同城市獲取即時天氣信息的功能。我們可以使用AJAX和JSONP來在網頁上獲取并展示這些數據。首先，在網頁上創建一個按鈕，然后使用AJAX發送一個GET請求到Weather API的地址，并傳遞城市名稱作為查詢參數。當用戶點擊按鈕時，AJAX請求會被觸發，然后接口會返回城市的天氣數據。使用JSONP，我們可以跨域獲取這些數據，并將其顯示在網頁上。

// HTML部分
<button onclick="getWeather('New York')">Get Weather for New York</button>
<div id="weatherInfo"></div>
// JavaScript部分
function getWeather(city) {
var httpRequest = new XMLHttpRequest();
var url = 'https://weather-api.com/city/' + city;
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var weatherData = JSON.parse(httpRequest.responseText);
document.getElementById('weatherInfo').innerHTML = 'Current temperature in ' + weatherData.city + ' is ' + weatherData.temperature + '°C';
} else {
console.log('Error:', httpRequest.status);
}
}
};
httpRequest.open('GET', url, true);
httpRequest.send();
}
// JSONP的callback函數
function showWeatherData(weatherData) {
document.getElementById('weatherInfo').innerHTML = 'Current temperature in ' + weatherData.city + ' is ' + weatherData.temperature + '°C';
}

從上面的代碼中可以看到，當用戶點擊按鈕時，JavaScript函數getWeather被調用。該函數首先創建一個XMLHttpRequest對象，然后使用其open方法打開與Weather API的連接，并設置請求的目標URL。接下來，我們將回調函數onreadystatechange設置為處理HTTP請求的狀態變化。

當請求的readyState狀態為XMLHttpRequest.DONE時，我們檢查請求的status是否為200。如果是200，表示請求成功，并從響應中獲取天氣數據。然后，我們可以將數據渲染到網頁上的weatherInfo元素中。否則，表示請求失敗，我們將錯誤信息記錄在控制臺上。

為了能夠支持跨域請求，Weather API的響應必須是一個函數調用。在上面的例子中，我們可以將回調函數名作為查詢參數傳遞給API，例如：https://weather-api.com/city/New York?callback=showWeatherData。當API收到請求后，將返回一個調用名為showWeatherData的JavaScript函數的響應。我們需要在網頁上定義這個函數，它將用來處理從API返回的數據，然后更新網頁上的天氣信息。

總結來說，AJAX和JSONP是實現網頁動態獲取和顯示跨域數據的技術。通過使用AJAX發送HTTP請求，并通過JSONP接收返回的數據，我們可以在網頁上實時更新和展示來自不同域的內容，提供更豐富和交互性的用戶體驗。