Halimbawa ng responseXML ng AJAX at PHP

Ang AJAX ay maaaring gamitin para sa pagbabalik ng datos ng database bilang XML.

AJAX Database sa XML Halimbawa (Kabatiran ng Pagsusuri: Ang pag-andar ng instansya ay hindi pa nagawa)

Sa mga sumusunod na AJAX halimbawa, amin ay magpapakita kung paano magbasa ang pahina ng web ng impormasyon mula sa MySQL database, i-convert ang datos sa dokumento ng XML, at gamitin ang dokumento sa iba't ibang lugar para ipakita ang impormasyon.

Ang halimbawa na ito ay katulad ng nakaraang halimbawa sa "PHP AJAX Database", ngunit may malaking pagkakaiba: sa halimbawa na ito, ang datos na natanggap mula sa PHP pahina ay sa forma ng XML sa pamamagitan ng gumamit ng function na responseXML.

Ang pagtanggap ng XML dokumento bilang tugon ay nagbibigay sa amin ng kakayahan na i-update ang ilang lugar ng pahina, hindi lamang ipakita ang PHP output.

Sa halimbawa na ito, gagamitin namin ang impormasyon na natanggap mula sa database upang i-update ang ilang <span> na elemento.

Pumili ng isang pangalan mula sa dropdown list

Pumili ng isang user:

　

Ang kolum ay binubuo ng apat na elemento:

  • MySQL Database
  • Simple HTML Form
  • JavaScript
  • PHP page

Database

Ang database na gagamitin sa halimbawa ay mukhang ganito:

id FirstName LastName Age Hometown Job
1 Peter Griffin 41 Quahog Brewery
2 Lois Griffin 40 Newport Piano Teacher
3 Joseph Swanson 39 Quahog Police Officer
4 Glenn Quagmire 41 Quahog Pilot

HTML Form

Ang halimbawa na ito ay naglalaman ng isang simpleng HTML form at isang link patungo sa JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Pumili ng User:
<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>

Halimbawa ng Pagsasalin - HTML form

  • Ang HTML form ay isang dropdown list na may value ng attribute na "users", na may magkakahawak na halaga na tumutugma sa id field ng database
  • May ilang <span> elements sa ilalim ng form, na ginagamit bilang placeholder para sa iba't ibang halaga na nakatanggap namin
  • Kapag pinili ng user ang partikular na opsyon, ang function na "showUser()" ay magsasakto. Ang pagpatakbo ng function na ito ay trigido ng "onchange" event

Sa ibang salita, bawat pagbabago ng halaga ng user sa dropdown list, ang function na showUser() ay magsasakto at maglulugar ng resulta sa tinukoy na <span> element.

JavaScript

Ito ay JavaScript code na nakaimbak sa file "responsexml.js":

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
 }

Example Explanation:

showUser() and GetXmlHttpObject functions with Halimbawa ng Database ng AJAX at PHP MySQL The examples in this section are the same. You can refer to the relevant explanations.

stateChanged() function

If an item in the dropdown list is selected, this function executes:

  1. Using the responseXML function, define the "xmlDoc" variable as an XML document
  2. Retrieve the data from this XML document and place them in the correct "span" elements

PHP page

This server page, called "responsexml.php", is a simple PHP file that is called by JavaScript.

This page is written in PHP and uses the MySQL database.

The code will run a SQL query against the database and return the results as an XML document:

<?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);
?>

Example Explanation:

When the query is sent from JavaScript to the PHP page, the following occurs:

  • The content-type of the PHP document is set to "text/xml"
  • PHP document is set to "no-cache" to prevent caching
  • Set the $q variable with the data sent from the HTML page
  • PHP opens a connection to the MySQL server
  • Find the "user" with the specified id
  • Output data as an XML document