PHP와 AJAX RSS 리더
- 이전 페이지 AJAX 실시간 검색
- 다음 페이지 AJAX 설문조사
RSS 리더는 RSS Feed를 읽기 위해 사용됩니다。
RSS는 뉴스와 업데이트를 빠르게 탐색할 수 있습니다。
AJAX RSS 리더
아래의 AJAX 예제에서는 RSS 리더를 보여주며, RSS의 내용이 새로고침 없이 웹 페이지에 로드됩니다。
아래의 목록 상자에서 RSS 뉴스 구독을 선택하세요
RSS Feed를 여기에 나열합니다。
이 예제는 세 가지 요소를 포함하고 있습니다：
- 간단한 HTML 양식
- JavaScript
- PHP 페이지
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 페이지는 간단한 HTML 양식을 포함하고 있으며, 드롭다운 목록이 있습니다.
양식은 이렇게 작동합니다:
- 사용자가 드롭다운 목록에서 옵션을 선택할 때, 이벤트가 발생합니다
- 이벤트가 발생할 때, showRSS() 함수를 실행합니다
양식 아래에 "rssOutput"라는 이름의 하나의 <div>가 있습니다. 이는 showRSS() 함수가 반환하는 데이터의占位符으로 사용됩니다.
JavaScript
JavaScript 코드는 "getrss.js"에 저장되어 있으며, HTML 문서와 연결됩니다:
var xmlHttp
function showRSS(str)
{
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
{
alert("브라우저는 HTTP 요청을 지원하지 않습니다.")
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
{
// 파이어폭스, 오퍼라 8.0+, 사파리
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// 인터넷 익스플로어
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
예제 설명:
stateChanged()과 GetXmlHttpObject 함수와 PHP와 AJAX 요청 이 장의 예제는 동일합니다.
showRSS() 함수
드롭다운 메뉴에서 선택할 때마다 이 함수가 실행됩니다:
- 서버로 보내는 URL(파일 이름)을 정의합니다
- 파라미터 (q)를 URL에 추가하고, 파라미터 내용은 드롭다운 메뉴의 선택된 항목입니다
- 서버 캐시 파일을 방지하기 위해 랜덤 수를 추가합니다
- GetXmlHttpObject 함수를 호출하여 XMLHTTP 객체를 생성하고, 이 객체가 변화가 일어나면 stateChanged 함수를 실행하도록 설정합니다
- 지정된 URL을 통해 XMLHTTP를 열어줍니다
- 서버로 HTTP 요청을 보냅니다
PHP 페이지
서버 페이지 "getrss.php"의 JavaScript 코드를 호출하는 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에서 옵션이 전송될 때 발생하는 일은 다음과 같습니다:
- PHP가 선택된 RSS 피드를 찾습니다
- 선택된 RSS 피드에 XML DOM 객체를 생성합니다
- RSS 채널에서 요소를 찾아 출력합니다
- 처음 세 RSS 프로젝트의 요소를 순회하며 출력합니다
- 이전 페이지 AJAX 실시간 검색
- 다음 페이지 AJAX 설문조사
