Xây dựng Ajax RSS Reader - Step by Step

Chuẩn bị XMLHttpRequest Object Trong bước đầu tiên chúng ta cần chuẩn bị XMLHttpRequest object sử dụng để load remote RSS. Tôi đã kiểm tra và phát hiện ra đoạn mã này chỉ hoạt động với Firefox, vì thế tôi đã thêm ActiveXObject phục vụ cho IE. var RSSRequestObject = false; // XMLHttpRequest Object
Nội dung trích xuất từ tài liệu:
Xây dựng Ajax RSS Reader - Step by Step Xây dựng Ajax RSS Reader - Step by StepChuẩn bị XMLHttpRequest ObjectTrong bước đầu tiên chúng ta cần chuẩn bị XMLHttpRequest object sử dụngđể load remote RSS. Tôi đã kiểm tra và phát hiện ra đoạn mã này chỉ hoạt độngvới Firefox, vì thế tôi đã thêm ActiveXObject phục vụ cho IE.var RSSRequestObject = false; // XMLHttpRequest Objectif (window.XMLHttpRequest) // try to create XMLHttpRequestRSSRequestObject = new XMLHttpRequest();if (window.ActiveXObject) // if ActiveXObject use the Microsoft.XMLHTT PRSSRequestObject = new ActiveXObject(Microsoft.XMLHTTP);Viết mã HTMLChỉ cần một vài dòng, 2 thẻ DIV được dùng để tạo status thông báo về tiếntrình request data, và ajaxreader để chứa kết quả. Trong onload chúng ta đểAJAX Reader.AJAX RSS ReaderAJAX RSS ReaderAJAX Reader sẽ gửi một request tới URL được đặt sẵn, sau đó chạy functionReqChange() khi dữ liệu đã được load. Tôi đã thêm vào m ột vài hàm phụ phụcvụ cho việc ẩn/hiện kết quả...var Backend = http://ajax.phpmagazine.net/index.xml; // Backend url/** Main AJAX RSS reader request*/function RSSRequest() {// change the status to requesting dataHideShow(status);document.getElementById(status).innerHTML = Requesting d ata ...;// Prepare the requestRSSRequestObject.open(GET, Backend , true);// Set the onreadystatechange functionRSSRequestObject.onreadystatechange = ReqChange;// SendRSSRequestObject.send(null);}function HideShow(id){var el = GetObject(id);if(el.style.display==none)el.style.display=;elseel.style.display=none;}function GetObject(id){var el = document.getElementById(id);return(el);}Trình bày kết quảCuối cùng chúng ta chỉ cần hiện ra kết quả đã load vè. Nếu như data đã đượcload hoàn chỉnh, chúng ta cần phân tích RSS data để xác định các thông tinnhư title, url, description .../** onreadystatechange function*/function ReqChange() {// If data received correctlyif (RSSRequestObject.readyState==4) {// if data is validif (RSSRequestObject.responseText.indexOf(invalid) == -1){// Parsing RSSvar node = RSSRequestObject.responseXML.documentElement;// Get Channel informationvar channel = node.getElementsByTagName(channel ).item(0);var title = channel.getElementsByTagName(title).item(0).firstChild.data;var link = channel.getElementsByTagName(link).item(0).firstChild.data;content = +title+;// Browse itemsvar items = channel.getElementsByTagName(item);for (var n=0; n [+items[n].getElementsByTagName(pubDate).item(0).firstChild.data+];}catch (e){var itemPubDate = ;}content += +itemPubDate++itemTitle+;}content += ;// Display the resultdocument.getElementById(ajaxreader).innerHTML = content;// Tell the reader the everything is donedocument.getElementById(status).innerHTML = Done.;}else {// Tell the reader that there was error requesting datadocument.getElementById(status).innerHTML = Errorrequesting data.;}HideShow(status);}}Cập nhật FeedTôi đặt khoảng thời gian chờ để cập nhật feed là 20 phút.window.setInterval(update_timer(), 1200000); // update the data every 20mins/** Timer*/function update_timer() {RSSRequest();}