在Web開發(fā)中，獲取天氣預(yù)報(bào)數(shù)據(jù)是一個(gè)非常實(shí)用的功能。通過CSS獲取天氣預(yù)報(bào)數(shù)據(jù)可以讓網(wǎng)站更加智能化和用戶友好化。

借助CSS瀏覽器支持編寫的JavaScript程序可以獲取數(shù)據(jù)，然后動態(tài)地將數(shù)據(jù)渲染到頁面中。為了解決跨域問題，可以使用JSONP來異步獲取天氣預(yù)報(bào)數(shù)據(jù)。JSONP（JSON with Padding）是JSON的一個(gè)非標(biāo)準(zhǔn)用法，使用script標(biāo)簽來加載數(shù)據(jù)，實(shí)現(xiàn)了跨域。

以下代碼展示了如何使用JSONP獲取北京天氣預(yù)報(bào)數(shù)據(jù)：

function getWeatherData(cityName) {
var url = 'http://wthrcdn.etouch.cn/weather_mini?city=' + cityName + '&callback=showWeatherInfo';
var script = document.createElement('script');
script.setAttribute('src', url);
document.body.appendChild(script);
}
function showWeatherInfo(data) {
var city = data.data.city;
var wendu = data.data.wendu;
var ganmao = data.data.ganmao;
var forecast = data.data.forecast;
var weatherInfo = document.getElementById('weatherInfo');
weatherInfo.innerHTML = '城市：' + city + '
' + '溫度：' + wendu + '℃' + '
' + '感冒提醒：' + ganmao + '

' + '未來5天天氣預(yù)報(bào)：' + '
';
for (var i = 0; i< forecast.length; i++) {
weatherInfo.innerHTML += forecast[i].date + '：' + forecast[i].type + '，' + forecast[i].low + '~' + forecast[i].high + '
';
}
}
getWeatherData('北京');

此代碼將向頁面中添加一個(gè)script標(biāo)簽，加載天氣預(yù)報(bào)數(shù)據(jù)，當(dāng)數(shù)據(jù)加載成功后，回調(diào)函數(shù)showWeatherInfo被調(diào)用，展示數(shù)據(jù)到頁面中。為了兼容跨域，JSONP請求的URL將回調(diào)函數(shù)名作為一個(gè)參數(shù)，即“&callback=showWeatherInfo”。