Exemplo de responseXML AJAX e PHP

AJAX pode ser usado para retornar informações do banco de dados em formato XML.

Exemplo AJAX Database para XML (instruções de teste: a funcionalidade deste exemplo não está implementada)

No exemplo AJAX abaixo, mostraremos como a página web lê informações do banco de dados MySQL, converte os dados em um documento XML e usa esse documento em vários lugares para exibir informações.

Este exemplo é semelhante ao exemplo "PHP AJAX Database" da seção anterior, mas há uma grande diferença: neste exemplo, obtemos dados em formato XML usando a função responseXML da página PHP.

Recebermos um documento XML como resposta, o que nos permite atualizar várias partes da página, e não apenas exibir uma saída PHP.

Neste exemplo, usaremos informações recebidas do banco de dados para atualizar vários elementos <span>.

Selecione um nome na lista suspensa

Escolha um usuário:

　

Esta coluna é composta por quatro elementos:

  • Banco de dados MySQL
  • Formulário HTML simples
  • JavaScript
  • PHP page

Banco de dados

O banco de dados que usaremos neste exemplo parece assim:

id Nome Sobrenome Idade Cidade Natal Trabalho
1 Peter Griffin 41 Quahog Cervejaria
2 Lois Griffin 40 Newport Professor de Piano
3 Joseph Swanson 39 Quahog Policial
4 Glenn Quagmire 41 Quahog Pilot

Formulário HTML

O exemplo a seguir contém um formulário HTML simples e um link para JavaScript:

<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form> 
Selecione um Usuário:
<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>

Exemplo de explicação - formulário HTML

  • O formulário HTML é uma lista suspensa, cujo valor da propriedade name é "users", e os valores das opções correspondem ao campo id do banco de dados
  • Abaixo do formulário há vários elementos <span>, que servem como placeholders para os diferentes valores que recebemos
  • Quando o usuário selecionar uma opção específica, a função "showUser()" será executada. A execução dessa função é acionada pelo evento "onchange"

Por outras palavras, sempre que o usuário alterar o valor na lista suspensa, a função showUser() será executada e os resultados serão exibidos no elemento <span> especificado.

JavaScript

Este é o código JavaScript armazenado no arquivo "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
 }

Exemplo de Explicação:

showUser() and GetXmlHttpObject functions with Exemplo de Banco de Dados MySQL AJAX e PHP 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 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 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);
?>

Exemplo de Explicação:

Ocorre quando a consulta é enviada do JavaScript para a página PHP:

  • O content-type do documento PHP é definido como "text/xml"
  • O documento PHP é definido como "no-cache" para evitar cache
  • Define a variável $q com dados enviados por página HTML
  • PHP abre conexão com o servidor MySQL
  • Encontrar "user" com id especificado
  • Emitir dados em documento XML