PHP 개발 기본 튜토리얼 AJAX RSS 리더

AJAX RSS 리더

RSS 리더는 RSS 피드를 읽는 데 사용됩니다.

예:

다음 예에서는 웹 페이지를 새로 고치지 않고도 RSS 콘텐츠를 읽을 수 있는 RSS 리더를 보여줍니다.

이 예는 세 부분으로 구성됩니다.

HTML 양식 페이지
PHP 파일
XML 파일

HTML 양식 페이지

사용자가 위 드롭다운 목록에서 RSS-feed를 선택하면 "showRSS()"라는 함수가 실행됩니다. 이 함수는 "onchange" 이벤트에 의해 실행됩니다:

소스 코드는 1.php 참조

<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
function showRSS(str)
{
	//检查是否有 RSS-feed 被选择
	if (str.length==0)
	{ 
		document.getElementById("rssOutput").innerHTML="";
		return;
		}
	//创建 XMLHttpRequest 对象
	if (window.XMLHttpRequest)
	{
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//创建在服务器响应就绪时执行的函数
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
		}
	}
	//向服务器上的文件发送请求
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<form>
<!-- 在域的内容改变时触发onchange 事件 -->
<select onchange="showRSS(this.value)">
<option value="">选择一个 RSS-feed:</option>
<option value="rss">读取 RSS 数据</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed 数据列表...</div>
</body>
</html>

위 HTML 페이지에는 드롭다운 목록 상자가 있는 간단한 HTML 양식이 포함되어 있습니다.

양식 작동 방식은 다음과 같습니다.

사용자가 드롭다운 상자에서 옵션을 선택하면 이벤트가 트리거됩니다.
이벤트가 트리거되면 showRSS() 함수를 실행합니다.
양식 아래에는 "rssOutput"이라는 이름의 <div>가 있습니다. showRSS() 함수에서 반환된 데이터에 대한 자리 표시자로 사용됩니다.

showRSS() 함수는 다음 단계를 수행합니다.

RSS 피드가 선택되었는지 확인
XMLHttpRequest 객체 생성
서버 응답이 준비되면 실행되는 함수 생성
파일에 요청 보내기 서버에서
URL(드롭다운 목록의 내용 포함) 끝에 추가된 매개변수(q)를 참고하세요

PHP 파일

위에서 JavaScript를 통해 호출된 서버 페이지는 "2.php"라는 이름의 PHP 파일입니다.

참조 2.php 소스 코드

<?php
// rss 文件地址
$xml="3.xml";
//创建一个新的 XML DOM 对象
$xmlDoc = new DOMDocument();
//创建一个新的 XML DOM 对象
$xmlDoc->load($xml);

// 从 "<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;

// 输出 "<channel>" 中的元素
echo("<p><a href='" . $channel_link
  . "'>" . $channel_title . "</a>");
echo("<br>");
echo($channel_desc . "</p>");

// 输出 "<item>" 中的元素
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=1; $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>");
}
?>

RSS 피드 요청이 JavaScript에서 PHP 파일로 전송되면 어떻게 되나요?

어떤 RSS 피드가 선택됨
새 XML DOM 개체 만들기
xml 변수에 RSS 문서 로드
채널 요소에서 요소 추출 및 출력
항목 요소에서 요소 추출 및 출력

XML 파일

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
  <title>php教程</title>
  <link>http://www.php.cn</link>
  <description>学的不仅技术，更新梦想！！</description>
  <item>
    <title>RSS 教程</title>
    <link>http://www.php.cn/rss/rss-tutorial.html</link>
    <description>通过使用 RSS，您可以有选择地浏览您感兴趣的以及与您的工作相关的新闻</description>
  </item>
  <item>
    <title>XML 教程</title>
    <link>http://www.php.cn/xml/xml-tutorial.html</link>
    <description>XML 指可扩展标记语言（eXtensible Markup Language）</description>
  </item>
</channel>

</rss>

학습 경험

이 예시에는 주로 다음 지식 포인트가 포함됩니다.

양식 기본
onkeyup 이벤트 : 키보드 키를 눌렀을 때 떼었을 때 발생
함수 호출, 함수 값 전달
서버의 파일 전송 요청에 대해 서버가 응답할 때 실행되는 함수인 AJAX XMLHttpRequest 객체 생성: 학습 경험은 1-5를 참조하세요
HTML DOM getElementById() 메소드: 지정된 ID를 가진 첫 번째 객체에 대한 참조를 반환합니다.

XML 관련 지식

XML DOM 객체 생성
XML 파일을 새 XML DOM 객체로 로드
특정 태그가 있는 객체 가져오기 이름: getElementsByTagName ()
요소의 첫 번째 하위 노드를 반환합니다: HTML DOM item() 메서드

다음 섹션

새로운 파일

<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
function showRSS(str)
{
	//检查是否有 RSS-feed 被选择
	if (str.length==0)
	{ 
		document.getElementById("rssOutput").innerHTML="";
		return;
		}
	//创建 XMLHttpRequest 对象
	if (window.XMLHttpRequest)
	{
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//创建在服务器响应就绪时执行的函数
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
		}
	}
	//向服务器上的文件发送请求
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<form>
<!-- 在域的内容改变时触发onchange 事件 -->
<select onchange="showRSS(this.value)">
<option value="">选择一个 RSS-feed:</option>
<option value="rss">读取 RSS 数据</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed 数据列表...</div>
</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면