Ajax是一種在網(wǎng)頁(yè)中實(shí)現(xiàn)異步數(shù)據(jù)傳輸?shù)募夹g(shù)，它可以使網(wǎng)頁(yè)能夠動(dòng)態(tài)地加載數(shù)據(jù)，而不需要重新加載整個(gè)頁(yè)面。在使用Ajax進(jìn)行數(shù)據(jù)傳輸時(shí)，有時(shí)會(huì)面臨跨域訪問的問題。為了解決這個(gè)問題，可以使用jsonp（JSON with Padding）技術(shù)。本文將介紹一個(gè)使用Ajax和jsonp的例子，通過它可以更好地理解這個(gè)技術(shù)的應(yīng)用和優(yōu)勢(shì)。
假設(shè)我們有一個(gè)網(wǎng)頁(yè)，需要從另一個(gè)域名下的服務(wù)器獲取一些數(shù)據(jù)，并將其展示在網(wǎng)頁(yè)上。一種常見的做法是通過Ajax發(fā)送GET請(qǐng)求到目標(biāo)服務(wù)器，并在服務(wù)器上設(shè)置跨域訪問允許。但是，在一些情況下，目標(biāo)服務(wù)器可能沒有設(shè)置跨域訪問的權(quán)限，這時(shí)候就需要使用jsonp了。
想象一下，我們正在編寫一個(gè)天氣預(yù)報(bào)應(yīng)用。在網(wǎng)頁(yè)上，我們需要從一個(gè)天氣數(shù)據(jù)提供者的服務(wù)器上獲取實(shí)時(shí)的天氣數(shù)據(jù)，并將其展示給用戶。服務(wù)器的數(shù)據(jù)接口是這樣的：http://api.weatherprovider.com/weather?callback=handleWeather。發(fā)起GET請(qǐng)求后，服務(wù)器會(huì)返回一個(gè)類似于handleWeather({"temperature": "25℃", "humidity": "70%"})的JSON數(shù)據(jù)，其中，handleWeather是一個(gè)回調(diào)函數(shù)。
為了在網(wǎng)頁(yè)上使用這個(gè)數(shù)據(jù)，我們需要使用Ajax和jsonp技術(shù)。首先，我們?cè)诰W(wǎng)頁(yè)的js代碼中使用Ajax發(fā)送GET請(qǐng)求到天氣數(shù)據(jù)提供者的服務(wù)器，并在URL中指定回調(diào)函數(shù)的名稱。代碼如下所示：
$.ajax({
url: "http://api.weatherprovider.com/weather",
dataType: "jsonp",
jsonpCallback: "handleWeather",
success: function(data) {
// 數(shù)據(jù)獲取成功后的處理邏輯
var temperature = data.temperature;
var humidity = data.humidity;
$("#temperature").text(temperature);
$("#humidity").text(humidity);
},
error: function(xhr, textStatus, errorThrown) {
// 數(shù)據(jù)獲取失敗后的處理邏輯
console.log("獲取天氣數(shù)據(jù)失敗：" + textStatus);
}
});