本文將介紹一個(gè)使用Ajax和JSONP的案例，通過該案例可以實(shí)現(xiàn)跨域請求數(shù)據(jù)的功能。通過使用Ajax和JSONP，可以輕松地獲取其他域上的數(shù)據(jù)，并動(dòng)態(tài)地更新到我們的頁面上。

假設(shè)我們的網(wǎng)站需要顯示天氣信息，但是天氣數(shù)據(jù)并沒有存儲(chǔ)在我們的服務(wù)器上，而是存儲(chǔ)在一個(gè)外部的天氣API上。這就需要我們使用Ajax和JSONP來請求和獲取這些數(shù)據(jù)。

首先，我們需要引入jQuery庫，因?yàn)樗峁┝朔奖愕腁jax和JSONP的接口。然后我們可以使用下面的代碼來獲取天氣數(shù)據(jù)：

$.ajax({
url: "http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London",
dataType: "jsonp",
success: function(response) {
// 處理返回的數(shù)據(jù)
console.log(response);
},
error: function() {
console.log("請求失敗");
}
});

在上面的代碼中，我們使用了$.ajax()方法來發(fā)送一個(gè)GET請求到天氣API的URL。我們通過設(shè)置dataType為"jsonp"來告知服務(wù)器我們希望使用JSONP來獲取數(shù)據(jù)。并且，還需要提供一個(gè)回調(diào)函數(shù)來處理返回的數(shù)據(jù)。

回調(diào)函數(shù)是一個(gè)在獲取數(shù)據(jù)成功后被調(diào)用的函數(shù)。在上面的代碼中，我們簡單地使用console.log()來輸出返回的數(shù)據(jù)。可以根據(jù)實(shí)際情況來添加更多的處理邏輯，比如將數(shù)據(jù)動(dòng)態(tài)地顯示在頁面上。

在這個(gè)例子中，我們請求的URL是"http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London"。其中，"YOUR_API_KEY"是我們在天氣API上注冊并獲得的API密鑰，"London"是要查詢的城市。根據(jù)實(shí)際情況，我們可以修改這些參數(shù)來獲取其他城市的天氣信息。

總結(jié)來說，通過使用Ajax和JSONP，我們可以輕松地跨域獲取數(shù)據(jù)，并將其動(dòng)態(tài)地更新到我們的頁面上。這在很多場景中非常有用，比如獲取天氣信息、股票行情、新聞等。