/p>
margin: 0;
padding: 0;
}
#weather {
width: 800px;
height: 500px;
margin: 0 auto;
}
.div {
width: 150px;
height: 200px;
background: deepskyblue;
display: inline-block;
line-height: 33px;
text-align: center;
}
/**
* Created by Administrator on 2016/9/3.
*/
function ajaxFun(obj) {
//1.创建请求对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(“Microsoft.XMLHTTP”);
//2.判断请求方法
var method = obj.method.toUpperCase();
if (method == “GET”) {
xhr.open(method, obj.url + “?” + obj.data, true);
xhr.send(null);
} else if (method == “POST”) {
xhr.open(method, obj.url, true);
xhr.send(obj.data);
} else {
console.error(“请求方式有误,请选择get/post中的一种”);
}
//3.监听服务器返回事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
obj.successFun(xhr.responseText);
} else {
obj.failFun(“请求数据失败”);
console.warn(xhr.status);
}
}
};
}
var divs = document.getElementsByClassName(“div”);
var obj = {
method: “Get”,
url: “http://wthrcdn.etouch.cn/weather_mini?city=北京”,
data: “”,
successFun: successFun,
failFun: failFun
};
ajaxFun(obj);
function successFun(data) {
var resultObj = JSON.parse(data).data;
var forecastArray = resultObj.forecast;
for (var i in forecastArray) {
var array = forecastArray[i];
divs[i].innerHTML = array.date + “
” + array.type + “
” + array.high + “
” + array.low + “
” + array.fengli + “
” + array.fengxiang;
}
}
function failFun(data) {
alert(data);
}