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

module thong tin thoi tiet 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' />&nbsp;";
            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:
<div id="divWeather"></div>
 Bước cuối cùng là chạy thử ứng dụng.
module thong tin thoi tiet ajax
Đây là code của module: Module thời tiết bằng ajax
P/s: cách này hay bị lỗi services.
Bạn có thể tham khảo thêm cách làm khác tại đây

5 nhận xét:

Bạn ơi link down source bị die rồi . Bạn cho mình xin link down mới đi . Cảm ơn bạn trước nhé

Anonymous
lúc 01:24 11 tháng 10, 2012 comment-delete

@Nặc danh
Sáng mai mình sẽ update lại. Cảm ơn bạn đã thông báo ^_^!

lúc 08:35 11 tháng 10, 2012 comment-delete

@Nặc danh
Mình đã cập nhật lại rồi. Bạn có thể download ^_^!

lúc 17:49 11 tháng 10, 2012 comment-delete

sao mình copy về rùi làm theo như trên mà nó ko chịu chạy ra kq, chỉ hiển thị dc cái combobox để chọn tỉnh thành thôi

Anonymous
lúc 00:49 26 tháng 11, 2012 comment-delete

@Nặc danhMình sẽ kiểm tra lại đoạn code này sau, thanks bạn ^_^!

lúc 01:44 7 tháng 12, 2012 comment-delete

Đăng nhận xét