Παράδειγμα responseXML με AJAX και PHP

Το AJAX μπορεί να χρησιμοποιηθεί για να επιστρέψει πληροφορίες βάσης δεδομένων στο μορφή XML.

Παράδειγμα AJAX Database σε XML (Παράδειγμα χρήσης: Η λειτουργία αυτού του παραδείγματος δεν έχει υλοποιηθεί)

Στο παρακάτω παράδειγμα AJAX, θα δείξουμε πώς η ιστοσελίδα μπορεί να διαβάσει πληροφορίες από τη βάση δεδομένων MySQL, να μετατρέψει τα δεδομένα σε έγγραφο XML και να χρησιμοποιήσει αυτό το έγγραφο σε διαφορετικά σημεία για να εμφανίσει πληροφορίες.

Αυτό το παράδειγμα είναι παρόμοιο με το προηγούμενο παράδειγμα "PHP AJAX Database", αλλά έχει μια μεγάλη διαφορά: Σε αυτό το παράδειγμα, λαμβάνουμε δεδομένα στο μορφή XML μέσω της λειτουργίας responseXML από τη σελίδα PHP.

Η λήψη του XML εγγράφου ως απάντηση μας δίνει τη δυνατότητα να ενημερώσουμε πολλαπλά σημεία της σελίδας, και όχι μόνο να δείξουμε μια PHP έξοδο.

Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε πληροφορίες που λαμβάνονται από τη βάση δεδομένων για να ενημερώσουμε πολλαπλά <span> στοιχεία.

Επιλέξτε ένα όνομα από τη διαδρομή

Παρακαλώ επιλέξτε έναν χρήστη:

　

Αυτή η στήλη αποτελείται από τέσσερις στοιχεία:

  • MySQL βάση δεδομένων
  • Απλή HTML φόρμα
  • JavaScript
  • PHP page

Βάση δεδομένων

Η βάση δεδομένων που θα χρησιμοποιηθεί σε αυτό το παράδειγμα φαίνεται κάπως έτσι:

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 φόρμα

Ο παρακάτω παράδειγμα περιλαμβάνει έναν απλό 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 φόρμα είναι μια λίστα κουτί, η τιμή του attributes name είναι "users", οι επιλογές αντιστοιχούν στο πεδίο id της βάσης δεδομένων
  • Κάτω από τη φόρμα υπάρχουν μερικά στοιχεία <span>, τα οποία χρησιμοποιούνται ως προκαταρκτικά για τις διαφορετικές τιμές που λαμβάνουμε
  • Όταν ο χρήστης επιλέγει συγκεκριμένη επιλογή, εκτελείται η συνάρτηση "showUser()" που τρέπεται από το γεγονός onchange

Με άλλα λόγια, κάθε φορά που ο χρήστης αλλάζει την τιμή στη λίστα κουτί, η συνάρτηση showUser() εκτελείται και εμφανίζει τα αποτελέσματα στο καθορισμένο στοιχείο <span>.

JavaScript

Αυτό είναι το JavaScript κώδικας που αποθηκεύεται στο αρχείο "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 function with Παράδειγμα AJAX και MySQL με PHP The examples in this section are the same. You can refer to the relevant explanations in them.

stateChanged() function

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

  1. By using the responseXML function, define the "xmlDoc" variable as an XML document
  2. Retrieve 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