使用 Ajax 获取天气预报的数据

<table id="weather" style="border: 1px solid #ff9000; margin: auto; margin-top: 100px;">

</table>
var ourXHR ;
function Sky(city) {
var uri = "http://wthrcdn.etouch.cn/weather_mini?city="+city;
ourXHR = null;
if(window.XMLHttpRequest){
ourXHR = new XMLHttpRequest();
}else if(window.ActiveXObject){
ourXHR = new ActiveXObject("Microsoft.XMLHTTP");
}else{
return "error: 该浏览器版本太低！！！";
}
ourXHR.open('GET',uri,true);
ourXHR.onreadystatechange = function () {
if (ourXHR.readyState==4&&ourXHR.status==200){
var weather = JSON.parse(ourXHR.responseText).data;
// 呈现数据
showWeather(weather);
}
};
ourXHR.send();
}

function showWeather(data) {
var city = data.city,
fiveDay = data.forecast,
weather = document.getElementById('weather');
var str = "<tr><th>日期</th><th>最高气温</th><th>最低气温</th><th>风向</th><th>天气</th></tr>"
+"<tr><th style='text-align: center;padding-left: 100px;'>"+city+" 天气预报</th></tr>";
for(var j in fiveDay){
str+="<tr><td>"+fiveDay[j].date+"</td><td>"+fiveDay[j].high+"</td><td>"+fiveDay[j].low+
    "</td><td>"+fiveDay[j].fengxiang+"</td><td>"+fiveDay[j].type+"</td></tr>";
}
weather.innerHTML = str;
}
Sky('广州');

 

 

获取的数据