PDF de programación - Programación Web Avanzada: AJAX y Google Maps

Programación Web Avanzada: 

AJAX y Google Maps

Universidad de Colima

México

Soporte de AJAX en PHP

Sergio Luján Mora

Departamento de Lenguajes y 

Sistemas Informáticos

DLSI - Universidad de Alicante

1

Programación Web Avanzada: AJAX y Google Maps

Índice

I

• Introducción
ió
d
• JSON
• XML
• ¿JSON o XML?

Programación Web Avanzada: AJAX y Google Maps

Introducción

• PHP dispone de algunas librerías para 
trabajar con los formatos que emplea 
AJAX

DLSI - Universidad de Alicante

2

Programación Web Avanzada: AJAX y Google Maps

Introducción

• Cuando se invoca mediante AJAX a un 

script en el servidor, pueden existir 
problemas con la caché: el navegador, 
un proxy o algún otro elemento 
intermedio pueden devolver el resultado
intermedio pueden devolver el resultado 
de una petición anterior

Programación Web Avanzada: AJAX y Google Maps

Introducción

• Solución en el cliente:

– Añadir un parámetro ficticio (una fecha o 

un número aleatorio) que cambie con cada 
petición para que se interprete como una 
nueva petición:

d = new Date();
peticion.open('GET','http://www.ua.es/ajax.php?n=' +

d.getTime(), true);

DLSI - Universidad de Alicante

3

Programación Web Avanzada: AJAX y Google Maps

Introducción

• Solución desde el servidor:

– Enviar encabezados HTTP para evitar que la 
respuesta de PHP se almacené en la caché:

<?phpp p
header("Cache-Control: no-cache, must-

revalidate");

header("Expires: Mon, 01 Jan 2007 01:00:00

GMT");

?>

Programación Web Avanzada: AJAX y Google Maps

JSON

• JSON (JavaScript Object Notation) es un 
formato de intercambio de datos ligero 
basado en texto

• JSON Specification RFC 4627:

http://tools ietf org/html/rfc4627
– http://tools.ietf.org/html/rfc4627

• JSON Validator:

– http://www.jsonlint.com/

DLSI - Universidad de Alicante

4

Programación Web Avanzada: AJAX y Google Maps

JSON

• Se emplea para la serialización de datos 

estructurados:
– Arrays:

• La lista de valores encerrados entre corchetes y 

separados por comas

– Objetos:
Objetos:
• Los pares propiedad/valor encerrados entre llaves y 

separados por comas

• La propiedad se separa del valor por dos puntos 

– En ambos casos, las propiedades y valores  de tipo 

cadena encerrados entre comillas dobles

Programación Web Avanzada: AJAX y Google Maps

JSON

• Ejemplo:

[1, 2, 3, 4, 5]

["Alicante", "Castellón", "Valencia"]

{"nombre": "Sergio", "apellidos": "Luján

Mora"}

{"posicion": {"x": 10, "y": 20}}

DLSI - Universidad de Alicante

5

Programación Web Avanzada: AJAX y Google Maps

JSON

• Ejemplo:
{

"Image": {

"Width": 800,
"Height": 600,
"Title": "View from 15th Floor",
"Thumbnail": {
Thumbnail : {
"Url": "http://www.ex.com/image/481989943",
"Height": 125,
"Width": "100"

}

}

}

Programación Web Avanzada: AJAX y Google Maps

JSON

• Ejemplo:
[
{ "precision": "zip", "Latitude": 37.7668,
"Longitude": -122.3959, "Address": "",
"City": "SAN FRANCISCO", "State": "CA",
"Zip": "94107", "Country": "US" },

{ "precision": "zip", "Latitude": 37.371991,
{ "precision": "zip" "Latitude": 37 371991
"Longitude": -122.026020, "Address": "",
"City": "SUNNYVALE", "State": "CA", "Zip":
"94085", "Country": "US" }

]

DLSI - Universidad de Alicante

6

Programación Web Avanzada: AJAX y Google Maps

JSON

• A partir de la versión PHP 5.2.0, se incluye 

soporte para JSON

• Comprobar con phpinfo():

– Versión de PHP
– El módulo de json está activado

• Fichero php ini:
• Fichero php.ini:

– extension=json.so

Programación Web Avanzada: AJAX y Google Maps

DLSI - Universidad de Alicante

7

Programación Web Avanzada: AJAX y Google Maps

JSON

• json_encode(): codifica un array o un 

objeto en una cadena JSON

• json_decode(): decodifica una cadena en 
formato JSON y devuelve un array o un objeto
• json_last_error(): devuelve el último 

error ocurrido

Programación Web Avanzada: AJAX y Google Maps

JSON

• Ejemplo:

$a = array(

"España" => array(45, "Madrid", "Barcelona",

"Valencia", "Sevilla"),

"Estados Unidos" => array(270, "Washington

DC" "Los Ángeles" "Nueva York" "Chicago")
DC", "Los Ángeles", "Nueva York", "Chicago"),

"México" => array(110, "México DF",

"Guadalajara", "Monterrey", "Puebla")
);

echo json_encode($a);

DLSI - Universidad de Alicante

8

Programación Web Avanzada: AJAX y Google Maps

JSON

{
"España":

}

[45,"Madrid","Barcelona","Valencia","Sevilla
"],

"Estados Unidos":[270,"Washington DC","Los

Ángeles","Nueva York","Chicago"],

"México": [110,"México

DF","Guadalajara","Monterrey","Puebla"]

Programación Web Avanzada: AJAX y Google Maps

JSON

• EJERCICIO

– Construye un visor de productos mediante 

AJAX

– Inicialmente se tiene que mostrar sólo la 

lista de productos (fabricante modelo)
)

p

(

– Cuando el usuario seleccione un producto, 

se tienen que mostrar todos sus datos: 
fabricante, modelo, imagen, precio y 
descripción

DLSI - Universidad de Alicante

9

Programación Web Avanzada: AJAX y Google Maps

Programación Web Avanzada: AJAX y Google Maps

DLSI - Universidad de Alicante

10

Programación Web Avanzada: AJAX y Google Maps

JSON

<?php

$productos = array(
// código producto => fabricante, modelo, precio,
descripción, imagen

111 => array("Dell", "PC x100", 8000, "Un gran
ordenador a un gran precio", "ordenador-111.jpg"),

222 => array("Dell", "PC z300", 15000, "El ultimo

modelo de la famila zXXX", "ordenador-222.jpg"),

333 => array("HP"
"Para
333 => array( HP , Pavillion 2540 , 9300, Para

"Pavillion 2540"

los que necesitan la maxima potencia", "ordenador-
333.jpg"),

9300

444 => array("Sony", "Vaio", 12500, "Sony lo ha

vuelto a conseguir: un ordenador de elite con un precio
razonable", "ordenador-444.jpg"),
);

Programación Web Avanzada: AJAX y Google Maps

JSON

if(!isset($_GET["producto"])) {

// Devuelve la lista de productos (fabricante

foreach($productos as $key => $value)
$aux[$key] = $value[0] . " " . $value[1];
$json = json_encode($aux);

modelo)

}
lelse

// Devuelve un producto concreto
$json =

json_encode($productos[$_GET["producto"]]);

echo $json;

?>

DLSI - Universidad de Alicante

11

Programación Web Avanzada: AJAX y Google Maps

JSON

<body onload="listaProductos()">

<div id="productos">

</div>

<div id "producto">
<div id="producto">

</div>

Programación Web Avanzada: AJAX y Google Maps

function listaProductos()
{

var xmlHttp = ajaxFunction();

xmlHttp.onreadystatechange = function() {
xmlHttp.onreadystatechange function() {

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

var htmlProductos = "";
var productos = eval("(" + xmlHttp.responseText + ")");
for(prod in productos)

htmlProductos += '<li><a href="javascript:verProducto('

+ prod + ');">' + productos[prod] + '</a></li>';

document.getElementById("productos").innerHTML = "<ul>" +

htmlProductos + "</ul>";

}

}
xmlHttp.open("GET", "json-productos.php",true);
xmlHttp.send(null);

}

DLSI - Universidad de Alicante

12

Programación Web Avanzada: AJAX y Google Maps

function verProducto(prod)
{

var xmlHttp = ajaxFunction();
xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState == 4 && xmlHttp.status == 200)

{

")");

var htmlProducto = "";
var producto = eval("(" + xmlHttp.responseText +

htmlProducto += "<h1>" + producto[0] + " " +

producto[1] + "</h1>";

htmlProducto += "<p><img src='" + producto[4] +

htmlProducto += "<p>Precio: <b>" + producto[2] +

htmlProducto += "<p>Descripción: <b>" +

producto[3] + "</b></p>";

document.getElementById("producto").innerHTML =

"' /></p>";
/></p> ;

"</b></p>";

htmlProducto;

}

}

Programación Web Avanzada: AJAX y Google Maps

XML

• En PHP existen diversas técnicas para 

leer y escribir un documento XML:
– A mano
– Con expresiones regulares
– DOM (Document Object Model)
– DOM (Document Object Model)
– SAX (Simple API for XML)

DLSI - Universidad de Alicante

13

Programación Web Avanzada: AJAX y Google Maps

XML

• Independientemente de la técnica 

empleada, al devolver un documento 
XML se tiene que indicar el tipo MIME 
adecuado:

header("Content-Type: text/xml");
// O también
header("Content-Type: application/xml");

<?php

?>

Programación Web Avanzada: AJAX y Google Maps

XML

• DOM:

– Lee todo el documento XML en memoria
– Se representa como un árbol de nodos

DLSI - Universidad de Alicante

14

Programación Web Avanzada: AJAX y Google Maps

XML

• DOM lectura:

$doc = new DOMDocument();

// Carga un documento desde un fichero
$doc->load( 'books.xml' );
// Carga un documento desde una cadena
$doc->loadXML('<books></books>' );

$books = $doc->getElementsByTagName( "book" );
$author = $authors->item(0)->nodeValue;

Programación Web Avanzada: AJAX y Google Maps

XML

• DOM escritura:
$doc = new DOMDocument();
// Salida bonita con sangría y espacios en blanco
$doc->formatOutput = true;
$r = $doc->createElement("books");
$doc->appendChild($r);
$author = $doc->createElement("author");
$author $doc >createElement( author );
$author->appendChild($doc->createTextNode(

$book['author']));

$b->appendChild($author);
$doc->save('books.xml');
echo $doc->saveXML();

DLSI - Universidad de Alicante

15

Programación Web Avanzada: AJAX y Google Maps

XML

• SAX:

– Cada vez que una etiqueta se abre o se cierra o 
cada vez que se encuentra un texto, se invocan 
unas funciones
• Función para etiqueta de apertura
• Función para etiqueta de cierre
• Función para manejar los datos

– No carga el documento XML en memoria  Se 

puede utilizar con documentos extremadamente 
grandes

Programación Web Avanzada: AJAX y Google Maps

XML

$parser = xml_parser_create();
xml_set_element_handler( $parser,
"startElement", "endElement" );

xml_set_character_data_handler( $parser,

"textData" );

$f = fopen( 'books.xml', 'r' );
);

p (

,

while($data = fread($f, 4096))
xml_parse($parser, $data);

xml_parser_free($parser);

DLSI - Universidad de Alicante

16

Programación Web Avanzada: AJAX y Google Maps

XML

function startElement( $parser, $name, $attrs ) {
g