AJAXRSS

AJAX RSS 리더

다음 AJAX 예에서는 RSS 콘텐츠를 새로 고치는 동안 웹 페이지를 로드하지 않는 RSS 리더를 보여줍니다. .

~ 여기에는 간단한 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 페이지에는 드롭다운 목록 상자가 있는 간단한 HTML 양식이 포함되어 있습니다. 양식은 다음과 같이 작동합니다.

1. 사용자가 드롭다운 상자에서 옵션을 선택하면 이벤트가 실행됩니다.

2. 트리거됨, showRSS( ) 함수 실행

양식 아래에는 "rssOutput"이라는 이름의 <div>가 있습니다. showRSS() 함수에서 반환된 데이터에 대한 자리 표시자로 사용됩니다.

JavaScript

JavaScript 코드는 HTML 문서에 연결된 "getrss.js"에 저장됩니다:

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. 서버

2. URL에 매개변수(q)를 추가합니다. 매개변수 내용은 드롭다운 상자에서 선택된 옵션입니다.

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. RSS 피드는 XML DOM 객체를 생성합니다

3. RSS 채널에서 요소를 찾아 출력합니다

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

제출하다 코드 재설정

자동운전