Exemplo de XML com AJAX e PHP

AJAX pode interagir de forma interativa com arquivos XML.

Exemplo AJAX XML

No exemplo abaixo de AJAX, demonstraremos como uma página web usa a tecnologia AJAX para ler informações de um arquivo XML.

Escolher um CD da lista abaixo

Listar informações de CD aqui.

Este exemplo inclui três páginas:

  • Um formulário HTML simples
  • Um arquivo XML
  • Um arquivo JavaScript
  • Uma página PHP

Formulário HTML

O exemplo a seguir inclui um formulário HTML simples e um link para JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form> 
Selecione um CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>As informações do CD serão listadas aqui.</b></div>
</p>
</body>
</html>

Exemplo de explicação:

Como você vê, é apenas um formulário HTML simples, com uma lista suspensa chamada "cds".

O parágrafo abaixo do formulário contém um div chamado "txtHint".. Este div é usado como marcador para os dados obtidos do servidor web.

Quando o usuário escolher um dado, é executada a função chamada "showCD".. A execução dessa função é acionada pelo evento "onchange".

Por outras palavras, sempre que o usuário alterar o valor da lista suspensa, a função showCD é chamada.

O arquivo XML

O arquivo XML é "cd_catalog.xml". Este arquivo contém dados sobre a coleção de CDs."

JavaScript

Este é o código JavaScript armazenado no arquivo "selectcd.js":

var xmlHttp
function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("O navegador não suporta solicitações HTTP")
 return
 } 
var url="getcd.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")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Exemplo de explicação:

As funções stateChanged() e GetXmlHttpObject são as mesmas do capítulo anterior, você pode consultar as explicações na página anterior.

Função showCD()

Se um item da lista suspensa for selecionado, a função executa:

  1. Chamar a função GetXmlHttpObject para criar o objeto XMLHTTP
  2. Definir a URL (nome do arquivo) a ser enviada para o servidor
  3. Adicionar um parâmetro (q) com o conteúdo da lista suspensa à URL
  4. Adicionar um número aleatório para evitar que o servidor use arquivos em cache
  5. Chamar stateChanged ao ser acionado um evento
  6. Abrir o objeto XMLHTTP através de uma URL fornecida
  7. Enviar uma solicitação HTTP para o servidor

Página PHP

Esta página de servidor chamada pelo JavaScript, é um arquivo PHP simples chamado "getcd.php".

Esta página é escrita em PHP, utilizando XML DOM para carregar o documento XML "cd_catalog.xml"。

A execução do código é direcionada para consultas em arquivos XML e os resultados são retornados em HTML:

<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Processar apenas nós de elementos
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{ 
//Processar apenas nós de elementos
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

Exemplos de Explicação

Ocorre quando a solicitação é enviada do JavaScript para a página PHP:

  1. Cria o objeto XML DOM do arquivo "cd_catalog.xml" PHP
  2. Itera todos os elementos "artist" (nodetypes = 1), encontrando nomes que coincidem com os dados transmitidos pelo JavaScript
  3. Encontra o CD com o artista correto
  4. Exibe as informações do álbum e envia para o marcador "txtHint"