PHP와 AJAX XML 예제
- 이전 페이지 AJAX 제안
- 다음 페이지 AJAX 데이터베이스
AJAX는 XML 파일과 상호작용할 수 있습니다。
AJAX XML 예제
아래의 AJAX 예제에서, 웹 페이지가 AJAX 기술을 사용하여 XML 파일에서 정보를 읽는 방법을 보여드리겠습니다。
아래의 목록에서 하나의 CD를 선택하세요
이 예제는 세 개의 페이지를 포함하고 있습니다：
- 간단한 HTML 양식
- XML 파일
- JavaScript 파일
- PHP 페이지
HTML 양식
위의 예제는 간단한 HTML 양식과 JavaScript로의 링크를 포함하고 있습니다：
<html> <head> <script src="selectcd.js"></script> </head> <body> <form> CD 선택: <select name="cds" onchange="showCD(this.value)"> <option value="Bob Dylan">Bob Dylan</option> <option value="Bee Gees">Bee Gees</option> <option value="Cat Stevens">Cat Stevens</option> </select> </form> <p> <div id="txtHint"><b>CD 정보가 여기에 나타날 것입니다.</b></div> </p> </body> </html>
예제 설명：
처음 보면, 이는 단순한 HTML 폼으로, "cds"라는 드롭다운 목록이 포함되어 있습니다.
폼 아래의 문장은 "txtHint"라는 div를 포함하고 있습니다. 이 div는 웹 서버에서检索된 데이터의占位符으로 사용됩니다.
사용자가 데이터를 선택할 때, "showCD"라는 함수가 실행됩니다. 이 함수의 실행은 "onchange" 이벤트가 트리거합니다.
다시 말해, 사용자가 드롭다운 목록의 값을 변경할 때마다 showCD 함수가 호출됩니다.
XML 파일
XML 파일은 "cd_catalog.xml". 이 파일에는 CD 컬렉션에 대한 데이터가 포함되어 있습니다.
JavaScript
이는 "selectcd.js" 파일에 저장된 JavaScript 코드입니다：
var xmlHttp
function showCD(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getcd.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("txtHint").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 함수는 이전 장에서와 동일합니다. 이전 페이지에서의 관련 설명을 참조하십시오。
showCD() 함수
드롭다운 목록에서 항목을 선택하면 함수가 실행됩니다:
- XMLHTTP 객체를 생성하기 위해 GetXmlHttpObject 함수를 호출합니다
- 서버로 보내는 URL (파일명)을 정의합니다
- URL에 드롭다운 목록 내용을 포함하는 매개변수 (q)를 추가합니다
- 서버가 캐시된 파일을 사용하지 않도록 임의의 수를 추가합니다
- 이벤트가 발생할 때 stateChanged를 호출합니다
- 주어진 URL을 통해 XMLHTTP 객체를 엽니다
- 서버로 HTTP 요청을 보냅니다
PHP 페이지
JavaScript가 호출하는 이 서버 페이지는 "getcd.php"라는 간단한 PHP 파일입니다。
이 페이지는 PHP로 작성되어 있으며, "cd_catalog.xml" XML 문서를 로드하는 XML DOM을 사용합니다：cd_catalog.xml"。
XML 파일의 쿼리 실행을 위해 코드가 실행되며, 결과는 HTML로 반환됩니다：
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Element 노드 만 처리
if ($x->item($i)->nodeType==1)
{
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Element 노드 만 처리
if ($cd->item($i)->nodeType==1)
{
echo($cd->item($i)->nodeName);
echo(": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>
예제 설명
JavaScript에서 PHP 페이지로 요청이 전송될 때 발생합니다:
- PHP가 "cd_catalog.xml" 파일의 XML DOM 객체를 생성합니다
- 모든 "artist" 요소를 순회하며 (nodetypes = 1)，JavaScript에서 전달된 데이터와 일치하는 이름을 찾습니다
- CD에 포함된 올바른 artist를 찾습니다
- album의 정보를 출력하고 "txtHint" 대체 문자에 보내십시오
- 이전 페이지 AJAX 제안
- 다음 페이지 AJAX 데이터베이스
