Tạo module thông tin thời tiết bằng Ajax

Trên các website hiện nay tích hợp rất nhiều những module ứng dụng nhỏ như giá vàng, thời tiết, thị trường chứng khoán... Hôm nay mình sẽ giới thiệu cho mọi người tạo một module thông tin thời tiết lấy thông tin từ trang vnexpress.net.

Để tạo được module này các bạn cần có các thư viện sau AjaxRequest.js,File Ảnh(mình sẽ để trong file source cuối bài). Đầu tiên chúng ta sẽ tạo file script.js

function getWeather(sCity) {
AjaxRequest.get(
{
"url": "Services/AjaxProxy.asp?sUrl=http://vnexpress.net/ListFile/Weather/" + sCity + ".xml"
, 'onLoading': function () { }
, 'onSuccess': function (req) {
if (navigator.appVersion.indexOf("MSIE") != -1) {
var doc = new ActiveXObject("MSXML2.DOMDocument");
doc.loadXML(req.responseText);
} else {
var doc = req.responseXML;
}
var Item = doc.getElementsByTagName('Item');
var AdImg = "", AdImg1 = "", AdImg2 = "", Weather = "", strWrite = "";
AdImg = getNodeValue(doc.getElementsByTagName('Item').item(0).getElementsByTagName('AdImg'));
AdImg1 = getNodeValue(doc.getElementsByTagName('Item').item(0).getElementsByTagName('AdImg1'));
AdImg2 = getNodeValue(doc.getElementsByTagName('Item').item(0).getElementsByTagName('AdImg2'));
Weather = getNodeValue(doc.getElementsByTagName('Item').item(0).getElementsByTagName('Weather'));

strWrite += "<img src='Images/Weather/" + AdImg + "' border='0' width='36' height='35' /> ";
strWrite += "<img src='Images/Weather/" + AdImg1 + "' border='0' width='19' height='28' />";
strWrite += "<img src='Images/Weather/" + AdImg2 + "' border='0' width='19' height='28' />";
strWrite += "<img src='Images/Weather/c.gif' width='35' height='28' /><br />";
strWrite += Weather;
gmobj("divWeather").innerHTML = strWrite;
}
, 'onError': function (req) {
}
});
}

Tiếp theo trong file chúng ta cần hiển thị chúng ta thêm đoạn script này vào:

window.onload = function() {
getWeather("Hanoi");
}

Còn đây là code của selectbox các tỉnh thành phố.

<select name="cboListCity" style="width:180px;" onchange="javascript:getWeather(this.value);">
<option value="Haiphong">Hải Phòng</option>
<option value="Hanoi" selected="selected">Hà Nội</option>
<option value="Vinh">Vinh</option>
<option value="Danang">Đà Nẵng</option>
<option value="Nhatrang">Nha Trang</option>
<option value="Pleicu">Pleiku</option>
<option value="HCM">Tp HCM</option>
<option value="Viettri">Việt Trì</option>
</select>

Cuối cùng là divWeather để hiển thị bảng dự báo thời tiết: