AJAX를 사용하여 XML 파일과 대화식으로 통신할 수 있습니다.
다음 예에서는 웹 페이지가 AJAX를 통해 XML 파일에서 정보를 읽는 방법을 보여줍니다.
사용자가 위의 드롭다운 목록에서 CD를 선택하면 "showCD()"라는 함수가 실행됩니다. 이 함수는 "onchange" 이벤트에 의해 트리거됩니다.
<html><head><script>function showCD(str){ if (str=="") { document.getElementById("txtHint").innerHTML="" } 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("txtHint")를 실행합니다. innerHTML=xmlhttp.responseText } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send();}</script></head><body><form>CD 선택:<이름 선택 ="cds" onchange="showCD(this.value)"><option value="">CD 선택:</option><option value="Bob Dylan">Bob Dylan</option><option value=" 보니 타일러">보니 Tyler</option><option value="Dolly Parton">Dolly Parton</option></select></form><div id="txtHint"><b>CD 정보가 여기에 나열됩니다...</ b></div></body></html>showCD() 함수는 다음 단계를 수행합니다.
CD가 선택되었는지 확인
XMLHttpRequest 객체 생성
서버 응답이 준비되면 실행되는 함수 만들기
서버의 파일에 요청 보내기
URL 끝에 추가된 매개변수(q)(드롭다운 목록의 내용 포함)를 참고하세요.
위에서 JavaScript를 통해 호출되는 서버 페이지는 "getcd.php"라는 이름의 PHP 파일입니다.
PHP 스크립트는 XML 문서 "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++){ // 요소 노드를 처리하는 경우 ($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++){ // 요소 노드 처리 if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b > "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br>"); }}?>CD 쿼리가 JavaScript에서 PHP 페이지로 전송되면 어떤 일이 발생합니까?
PHP는 XML DOM 객체를 생성합니다.
JavaScript가 전달한 데이터와 일치하는 모든 <artist> 요소에서 이름을 찾습니다.
앨범 정보를 출력하고 "txtHint" 자리 표시자를 다시 보냅니다.