RSS Reader sử dụng Ajax

Trong bài này sẽ trình bày ví dụ minh họa ứng dụng RSS Reader sử dụng kỹ thuật Ajax.

Khi người dùng chọn RSS feed trong danh sách thả xuống ở trên, một hàm gọi là "showRSS()" được thực thi. Hàm được kích hoạt bởi sự kiện "onchange":

    <html>
    <head>
    <script>
        function showRSS(str) {
            if (str.length==0) {
            document.getElementById("rssOutput").innerHTML="";
            return;
            }
            if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            } else {  // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
            if (this.readyState==4 && this.status==200) {
              document.getElementById("rssOutput").innerHTML=this.responseText;
            }
            }
            xmlhttp.open("GET","getrss.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
    </head>
    <body>
    <form>
    <select onchange="showRSS(this.value)">
    <option value="">Select an RSS-feed:</option>
    <option value="Google">Google News</option>
    <option value="NBC">NBC News</option>
    </select>
    </form>
    <br>
    <div id="rssOutput">RSS-feed will be listed here...</div>
    </body>
    </html>

Giải thích: hàm showRSS() thực hiện như sau:

  • Chức năng showRSS () thực hiện như sau:.
  • Tạo một đối tượng XMLHttpRequest
  • Sử dụng hàm onreadystatechange để lắng nghe các sự kiện từ máy chủ
  • Gửi yêu cầu tới tệp PHP (getrss.php) trên máy chủ
  • Lưu ý rằng tham số q được thêm vào url (getrss.php?q = " + str)
  • Và biến str chứa nội dung của trường đầu vào

Tệp PHP (getrss.php) có mã như sau:

    //get the q parameter from URL
    $q=$_GET["q"];

    //find out which feed was selected
    if($q=="Google") {
      $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
    } elseif($q=="NBC") {
      $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
    }

    $xmlDoc = new DOMDocument();
    $xmlDoc->load($xml);
    //get elements from "<channel>"
    $channel=$xmlDoc->getElementsByTagName('channel')->item(0);
    $channel_title = $channel->getElementsByTagName('title')
    ->item(0)->childNodes->item(0)->nodeValue;
    $channel_link = $channel->getElementsByTagName('link')
    ->item(0)->childNodes->item(0)->nodeValue;
    $channel_desc = $channel->getElementsByTagName('description')
    ->item(0)->childNodes->item(0)->nodeValue;

    //output elements from "<channel>"
    echo("<p><a href='" . $channel_link
      . "'>" . $channel_title . "</a>");
    echo("<br>");
    echo($channel_desc . "</p>");

    //get and output "<item>" elements
    $x=$xmlDoc->getElementsByTagName('item');
    for ($i=0; $i<=2; $i++) {
      $item_title=$x->item($i)->getElementsByTagName('title')
      ->item(0)->childNodes->item(0)->nodeValue;
      $item_link=$x->item($i)->getElementsByTagName('link')
      ->item(0)->childNodes->item(0)->nodeValue;
      $item_desc=$x->item($i)->getElementsByTagName('description')
      ->item(0)->childNodes->item(0)->nodeValue;
      echo ("<p><a href='" . $item_link
      . "'>" . $item_title . "</a>");
      echo ("<br>");
      echo ($item_desc . "</p>");
    }
Xem ví dụ »