PHP와 AJAX responseXML 예제

AJAX는 XML로 데이터베이스 정보를 반환할 수 있습니다.

AJAX Database 转 XML 예제 （테스트 설명：이 예제의 기능은 구현되지 않았습니다）

아래의 AJAX 예제에서는 웹페이지가 MySQL 데이터베이스에서 정보를 읽고, 데이터를 XML 문서로 변환하여 다른 곳에서 이 문서를 사용하여 정보를 표시하는 방법을 보여줍니다.

이 예제는 이전 장의 "PHP AJAX Database" 예제와 매우 유사하지만, 큰 차이점이 있습니다. 이 예제에서는 PHP 페이지에서 responseXML 함수를 사용하여 XML 형식의 데이터를 받습니다.

XML 문서를 응답으로 받아서 페이지의 여러 위치를 업데이트할 수 있게 합니다. 단순히 PHP 출력을 받아 표시하는 것만이 아닙니다.

이 예제에서는 데이터베이스에서 받은 정보를 사용하여 여러 <span> 요소를 업데이트할 것입니다。

드롭다운 목록에서 이름을 선택하십시오

사용자를 선택하십시오：

　

이 열은 네 가지 요소로 구성되어 있습니다：

  • MySQL 데이터베이스
  • 간단한 HTML 양식
  • JavaScript
  • PHP 페이지

데이터베이스

이 예제에서 사용할 데이터베이스는 다음과 같이 보입니다：

id 이름 성씨 연령 본고 직업
1 Peter Griffin 41 Quahog 酿造厂
2 Lois Griffin 40 Newport 피아노 교사
3 Joseph Swanson 39 Quahog 경찰관
4 Glenn Quagmire 41 Quahog Pilot

HTML 양식

위의 예제는 간단한 HTML 양식을 포함하고 있으며 JavaScript로의 링크가 있습니다：

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
사용자 선택:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>

예시 설명 - HTML 폼

  • HTML 폼은 name 속성의 값이 "users"인 드롭다운 목록이며, 선택 가능한 값은 데이터베이스의 id 필드와 일치합니다.
  • 폼 아래에는 여러 개의 <span> 요소가 있으며, 이들은 받아들이는 다른 값을 대체하는 데 사용됩니다.
  • 사용자가 특정 옵션을 선택하면 "showUser()" 함수가 실행됩니다. 이 함수의 실행은 "onchange" 이벤트로 trigged 됩니다.

다시 말해, 사용자가 드롭다운 목록에서 값을 변경할 때마다 showUser() 함수가 실행되고 지정된 <span> 요소에서 결과를 출력합니다.

JavaScript

이 파일 "responsexml.js"에 저장된 JavaScript 코드입니다:

var xmlHttp
function showUser(str)
 { 
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
  {
  alert("Browser does not support HTTP Request")
  return
  } 
 var url="responsexml.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")
{
 xmlDoc=xmlHttp.responseXML;
 document.getElementById("firstname").innerHTML=
 xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
 document.getElementById("lastname").innerHTML=
 xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
 document.getElementById("job").innerHTML=
 xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
 document.getElementById("age_text").innerHTML="Age: ";
 document.getElementById("age").innerHTML=
 xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
 document.getElementById("hometown_text").innerHTML="<br/>From: ";
 document.getElementById("hometown").innerHTML=
 xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
 }
}
function GetXmlHttpObject()
 { 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
 else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
 return objXMLHttp
 }

예제 설명:

showUser()와 GetXmlHttpObject 함수와 PHP와 AJAX MySQL 데이터베이스 예제 이 섹션의 예제는 동일합니다. 관련 설명을 참조하세요.

stateChanged() 함수

下拉列表中选择项目时，该函数执行：

  1. responseXML 함수를 사용하여 "xmlDoc" 변수를 XML 문서로 정의합니다
  2. 이 XML 문서에서 데이터를 가져와서 올바른 "span" 요소에 배치합니다

PHP 페이지

이 서버 페이지는 JavaScript가 호출하는 "responsexml.php"라는 간단한 PHP 파일입니다.

이 페이지는 PHP로 작성되어 MySQL 데이터베이스를 사용합니다.

코드는 데이터베이스에 대한 SQL 쿼리를 실행하고 XML 문서로 결과를 반환합니다:

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".".$q."";
$result = mysql_query($sql);
echo '<?xml version="1.0" encoding="ISO-8859-1"?>'
<person>';
while($row = mysql_fetch_array($result))
 {
 echo "<firstname>" . $row['FirstName'] . "</firstname>";
 echo "<lastname>" . $row['LastName'] . "</lastname>";
 echo "<age>" . $row['Age'] . "</age>";
 echo "<hometown>" . $row['Hometown'] . "</hometown>";
 echo "<job>" . $row['Job'] . "</job>";
 }
echo "</person>";
mysql_close($con);
?>

예제 설명:

JavaScript에서 PHP 페이지로 쿼리가 도착할 때, 다음이 발생합니다:

  • PHP 문서의 content-type이 "text/xml"로 설정됩니다
  • PHP 문서가 "no-cache"로 설정되어 캐시를 방지합니다
  • HTML 페이지에서 전송된 데이터로 $q 변수를 설정합니다
  • PHP가 MySQL 서버와의 연결을 열어줍니다
  • 지정된 id를 가진 "user"를 찾습니다
  • XML 문서로 데이터를 출력하십시오