AJAXRSS

AJAX RSS リーダー

次の AJAX の例では、RSS のコンテンツを更新せずに Web ページに読み込む RSS リーダーを示します。表Htmlフォーム

これはHTMLページです。これには、単純な HTML フォームと JavaScript ファイルを実行するためのリンクが含まれています:

<html>
 <head>
     <script type="text/javascript" src="getrss.js"></script>
 </head>
 <body>
 <form>
     Select an RSS-Feed:
     <select onchange="showRSS(this.value)">
         <option value="Google">Google News</option>
         <option value="MSNBC">MSNBC News</option>
     </select>
 </form>
 <p><div id="rssOutput">
     <b>RSS Feed will be listed here.</b></div></p>
 </body>
 </html>

例の説明 - HTML フォーム

ご覧のとおり、上記の HTML ページには、「There is a Drop」という単純な HTML フォームが含まれています。ダウンリストボックス。フォームは次のように機能します:

1. ユーザーがドロップダウンボックスでオプションを選択すると、イベントがトリガーされます

2. イベントがトリガーされると、showRSS() 関数が実行されます

フォームは「rssOutput」<div> という名前のファイルです。これは、showRSS() 関数によって返されるデータのプレースホルダーとして使用されます。

JavaScript

JavaScript コードは「getrss.js」に保存され、HTML ドキュメントに接続されます:

var xmlHttp
 function showRSS(str)
 {
     xmlHttp=GetXmlHttpObject()
     if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return
     }
     var url="getrss.php"
     url=url+"?q="+str
     url=url+"&sid="+Math.random()
     xmlHttp.onreadystatechange=stateChanged
     xmlHttp.open("GET",url,true)
     xmlHttp.send(null)
 }
 function stateChanged()
 {
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
         document.getElementById("rssOutput")
             .innerHTML=xmlHttp.responseText
     }
 }
 function GetXmlHttpObject()
 {
     var xmlHttp=null;
     try
     {
         // Firefox, Opera 8.0+, Safari
         xmlHttp=new XMLHttpRequest();
     }
     catch (e)
     {
         // Internet Explorer
         try
         {
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
         }
         catch (e)
         {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
     }
     return xmlHttp;
 }

例の説明:

stateChanged() 関数と GetXmlHttpObject 関数 (セクション PHP および AJAX リクエストと同じ) 。 showRSS() 関数

この関数は、ドロップダウンボックスで選択されるたびに実行されます:

1. サーバーに送信される URL (ファイル名) を定義します

2. パラメーター (q) を追加します。 URL にパラメータの内容を追加します

3. サーバーがファイルをキャッシュしないように乱数を追加します

4. GetXmlHttpObject 関数を呼び出して XMLHTTP オブジェクトを作成し、変更がトリガーされたときに stateChanged 関数を実行するオブジェクトを作成します

5. 指定された URL を通じて XMLHTTP を開きます

6. サーバーへの HTTP リクエストを起動します

PHP ページ

JavaScript コードを呼び出すサーバーページは「getrss.php」という名前の PHP ファイル:

<?php
 //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=="MSNBC")
 {
     $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>");
 }
 ?>

例の説明:

JavaScript からオプションが送信されると、何が起こります:1. PHP はどの RSS フィードが選択されているかを調べます

2. XML DOM を作成します。選択した RSS フィードのオブジェクト

3. RSS チャネルから要素を検索して出力します

4. 最初の 3 つの RSS アイテムの要素を調べて出力します

学び続ける

新しいファイル

<html> <head> <script type="text/javascript" src="getrss.js"></script> </head> <body> <form> Select an RSS-Feed: <select onchange="showRSS(this.value)"> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> <p><div id="rssOutput"> <b>RSS Feed will be listed here.</b></div></p> </body> </html>

提出するリセットコード

自動運転