Lessons XXXIV : Xây dựng Ajax RSS Reader – Step by Step

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

Thứ bảy, 06 Tháng 9 2008 12:30 Sơn Tùng Hướng dẫn lập trình Ajax-JavaScript
Email In

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.XMLHTTP
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.

<body onload=”RSSRequest();”>
<h2><acronym title=”Asynchronous Javascript And XML”>AJAX</acronym> <acronym title=”Rich Site Summary”>RSS</acronym> Reader</h2>
<div id=”status” style=”none”></div>
<div id=”ajaxreader”></div>
</body>

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&#8217;; // Backend url

/*
* Main <acronym title=”Asynchronous Javascript And XML”>AJAX</acronym> <acronym title=”Rich Site Summary”>RSS</acronym> reader request
*/
function RSSRequest() {

// change the status to requesting data
HideShow(‘status’);
document.getElementById(“status”).innerHTML = “Requesting data …”;

// 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 <acronym title=”Rich Site Summary”>RSS</acronym>
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 = ‘<div><a href=”‘+link+'”>’+title+'</a></div><ul>’;

// Browse items
var items = channel.getElementsByTagName(‘item’);
for (var n=0; n <items var var try var>[‘+items[n].getElementsByTagName(‘pubDate’).item(0).firstChild.data+’] ‘;
}
catch (e)
{
var itemPubDate = ”;
}

content += ‘<li>’+itemPubDate+'</font><a href=”‘+itemLink+'”>’+itemTitle+'</a></li>’;
}

content += ‘</ul>’;
// 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 = “<div>Error requesting data.<div>”;
}

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();
}

DEMO
Bạn có thể xem demo ở đây: AJAX RSS Reader hoặc download (chú ý: chỉ hoạt động với Firefox.

Nguồn: ajax.phpmagazine.net
Dịch bởi Sơn Tùng -Hoclaptrinh.vn

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: