Przykład responseXML z PHP i AJAX

AJAX może być używany do zwracania informacji z bazy danych w formacie XML.

Przykład AJAX Database do XML (informacja testowa: funkcjonalność tego przykładu nie jest zaimplementowana)

W poniższym przykładzie AJAX pokażemy, jak strona może odczytać informacje z bazy danych MySQL, przekształcić dane w dokument XML i użyć tego dokumentu w różnych miejscach do wyświetlania informacji.

Ten przykład jest podobny do przykładu z poprzedniego rozdziału "PHP AJAX Database", ale istnieje duża różnica: w tym przykładzie dane otrzymujemy w formacie XML za pomocą funkcji responseXML z PHP strony.

Otrzymywanie dokumentu XML jako odpowiedzi pozwala nam na aktualizację wielu miejsc na stronie, a nie tylko wyświetlanie PHP wyjścia.

W tym przykładzie użyjemy informacji otrzymanych z bazy danych do aktualizacji wielu elementów <span>.

Wybierz nazwę z rozwijanej listy

Wybierz użytkownika:

　

Kolumna ta składa się z czterech elementów:

  • Baza danych MySQL
  • Prosty formularz HTML
  • JavaScript
  • Strona PHP

Baza danych

Baza danych używana w tym przykładzie wygląda podobnie:

id Imię Nazwisko Wiek Miejscowość Praca
1 Peter Griffin 41 Quahog Piwownia
2 Lois Griffin 40 Newport Nauczyciel fortepianu
3 Joseph Swanson 39 Quahog Policjant
4 Glenn Quagmire 41 Quahog Pilot

Formularz HTML

Powyższy przykład zawiera prosty formularz HTML oraz link do JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Wybierz użytkownika:
<select name="users" onchange="pokazUzytkownika(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>

Przykład wyjaśniający - HTML formularz

  • HTML formularz to rozwijana lista, której wartość atrybutu name wynosi "users", a wartości opcji odpowiadają polu id w bazie danych
  • Poniżej formularza znajduje się kilka elementów <span>, które są używane jako占位符 dla różnych wartości, które otrzymujemy
  • Gdy użytkownik wybiera konkretną opcję, funkcja "pokazUzytkownika()" jest wywoływana. Wykonanie tej funkcji jest wywoływane przez wydarzenie "onchange"

Innymi słowy, za każdym razem gdy użytkownik zmienia wartość w rozwijanej liście, funkcja pokazUzytkownika() jest wywoływana i wynik jest wyświetlany w określonym elemencie <span>.

JavaScript

To jest kod JavaScript przechowywany w pliku "responsexml.js":

var xmlHttp
function pokazUzytkownika(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
 }

Przykład wyjaśnienia:

Funkcja showUser() oraz GetXmlHttpObject i Przykład bazy danych MySQL z PHP i AJAX Przykłady w tej sekcji są takie same. Możesz przeczytać związane z nimi wyjaśnienia.

Funkcja stateChanged()

Jeśli wybrano element z rozwijanej listy, funkcja ta wykona:

  1. Używając funkcji responseXML, zdefiniować zmienną "xmlDoc" jako dokument XML
  2. Pobieranie danych z tego dokumentu XML i umieszczanie ich w odpowiednich elementach "span"

Strona PHP

Ta strona serwerowa wywoływana przez JavaScript, to prosty plik PHP o nazwie "responsexml.php".

Ta strona jest napisana w PHP i używa bazy danych MySQL.

Kod będzie wykonywał zapytanie SQL do bazy danych i zwracał wyniki jako dokument XML:

<?php
header('Typ zawartości: text/xml');
header("Cache-Control: bez pamięci, musi być odświeżony");
//Data w przeszłości
header("Wygasanie: Pon, 26 Lip 1997 05:00:00 GMT");
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
 {
 die('Nie można połączyć: ' . mysql_error());
 }
mysql_select_db("ajax_demo", $con);
$sql="Wybierz * z user gdzie 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);
?>

Przykład wyjaśnienia:

Kiedy zapytanie jest dostarczane do strony PHP z JavaScript:

  • Typ zawartości dokumentu PHP ustawiony na "text/xml"
  • Dokument PHP ustawiony na "no-cache", aby zapobiec缓存
  • Ustaw zmienną $q danymi wysłanymi przez stronę HTML
  • PHP otwiera połączenie z serwerem MySQL
  • Znajdź "user" z określonym id
  • Wyświetl dane jako dokument XML