Joan: /* icona ajax_wait.gif */

2018-09-20T15:38:17Z

icona ajax_wait.gif

Pàgina nova

=Introducció=
En la pràctica de les receptes de cuina ([[Receptes_de_cuina_amb_Recipe_XML]]) que ja has fet o estàs a punt de fer, és Javascript (en el cantó del client) qui parseja el fitxer XML. És a dir, enviem el fitxer XML al client i allà el parsegem (per exemple, filtrar la informació dels ingredients i posar-los en una llista HTML). Una altra possibilitat és que sigui el codi PHP qui parsegi els ingredients del fitxer XML i formati una sortida en forma de llista HTML, i enviar ''només'' aquesta informació al client que ha fet la petició. Anem a veure-ho com es fa.

=Referències=
*http://www.w3schools.com/php/php_xml_simplexml.asp
'''PHP SimpleXML''' no cal instal.lar-ho perquè forma part del nucli de PHP.

Referència de '''PHP SimpleXML''':
*http://www.w3schools.com/php/php_ref_simplexml.asp

=Parsejar XML amb PHP=
fitxer '''test.xml''':
<pre>
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
</pre>
Codi PHP, fitxer '''test.php''':
<pre>
<?php
$xml = simplexml_load_file("test.xml");

echo $xml->getName() . "<br>";

foreach($xml->children() as $child)
{
echo $child->getName() . ": " . $child . "<br>";
}
?>
</pre>
Sortida per pantalla:
<pre>
note
to: Tove
from: Jani
heading: Reminder
body: Don't forget me this weekend!
</pre>

=Receptes de cuina=
En el cas que ens ocupa, anem a veure com podem extreure la informació dels ingredients (i les quantitats) per a una recepta de cuinta escrita en el llenguatge ''Recipe XML''.

Ara el codi '''index.htm''' és molt simple, perquè no hi ha res de parsejar el document XML. Senzillament hi ha una línia:
<pre>
<html>
<head>
<title>Receptes AJAX</title>
<script>
function loadXMLDoc(recepta)
{

var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('info').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","processar_ingredients.php?recepta="+recepta,true);
xmlhttp.send();

}
</script>
</head>
<body>
<h1>Receptes</h1>
<div id="formulari">
<form name="frm_receptes" id="formu" action="#">
<select name="recipes" onchange="loadXMLDoc(this.value)">
<option value="recipes/bean-and-ham.xml">bean and ham</option>
<option value="recipes/corn-chowder.xml">corn chowder</option>
</select><br />
</form>
</div>
<div id="info">
</div>
</body>
</html>
</pre>
que ens està dient que printem en la capa allò que ens ha enviat el servidor. És el script ''processar_ingredients.php'' el que farà tota la feina.

'''processar_ingredients.php''':
<pre>
<?php
$fitxerxml = $_GET["recepta"];
echo "<h1>Ingredients $fitxerxml</h1>";
$xml = simplexml_load_file($fitxerxml);
//echo $xml->getName() . "<br>";

//per bolcar tota la informació:
//print_r($xml);

echo "<ul>";
foreach($xml->ingredientlist->ingredient as $ingredient){
echo "<li>";
echo $ingredient->fooditem;
echo " ($ingredient->quantity)";
echo "</li>";
}
echo "</ul>";
?>
</pre>
==icona ajax_wait.gif==
La idea és que abans d'arribar a l'estat 4 (''xmlhttp.readyState==4'') passem pels estats 1, 2 i 3, i aquests són els moments on podem mostrar la icona del ''wait'' típica del AJAX.

Així doncs, senzillament farem un else:
<pre>
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('info').innerHTML=xmlhttp.responseText;
} else {
document.getElementById('info').innerHTML="<img src=\"img/ajax_wait.gif\" />";
}
</pre>
En aquest cas també és interessant afegir la línia:
<pre>
sleep ( 2 );
</pre>
al final de tot del script ''processar_ingredients.php'', per simular que el script php té molta càrrega de treball.

{{Autor}}, febrer 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Parsejar XML en el cantó del servidor (PHP) - Historial de revisió

Joan: /* icona ajax_wait.gif */