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

Chia sẻ: Abcdef_44 Abcdef_44 | Ngày: | Loại File: PDF | Số trang:8

Thêm vào BST

Báo xấu

38
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Xây dựng Ajax RSS Reader - Step by Step

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 if (window.XMLHttpRequest) // try to create XMLHttpRequest RSSRequestObject = new XMLHttpRequest(); if (window.ActiveXObject) // if ActiveXObject use the Microsoft.XMLHTT P RSSRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); Viết mã HTML Chỉ cần một vài dòng, 2 thẻ DIV được dùng để tạo status thông báo về tiến trình request data, và ajaxreader để chứa kết quả. Trong onload chúng ta để AJAX Reader.
AJAX RSS Reader AJAX RSS Reader AJAX Reader sẽ gửi một request tới URL được đặt sẵn, sau đó chạy function ReqChange() khi dữ liệu đã được load. Tôi đã thêm vào m ột vài hàm phụ phục vụ 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 data HideShow('status'); document.getElementById("status").innerHTML = "Requesting d ata ..."; // Prepare the request RSSRequestObject.open("GET", Backend , true); // Set the onreadystatechange function RSSRequestObject.onreadystatechange = ReqChange; // Send RSSRequestObject.send(null); } function HideShow(id){ var el = GetObject(id); if(el.style.display=="none") el.style.display=''; else el.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 đã được load hoàn chỉnh, chúng ta cần phân tích RSS data để xác định các thông tin như title, url, description ... /* * onreadystatechange function */ function ReqChange() { // If data received correctly if (RSSRequestObject.readyState==4) { // if data is valid
if (RSSRequestObject.responseText.indexOf('invalid') == -1) { // Parsing RSS var node = RSSRequestObject.responseXML.documentElement; // Get Channel information var 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 items var 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 result document.getElementById("ajaxreader").innerHTML = content; // Tell the reader the everything is done document.getElementById("status").innerHTML = "Done."; } else {
// Tell the reader that there was error requesting data document.getElementById("status").innerHTML = "Error requesting data."; } HideShow('status'); } } Cập nhật Feed Tô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 20 mins /* * Timer */ function update_timer() {
RSSRequest(); }