07

3

Actualizar contenidos con AJAX

AJAX nos permite recibir contenido de forma dinámica en una página web, por lo que tras ver la introducción a esta tecnología nos adentraremos a actualizar contenidos con AJAX.
Para ponerlo en práctica cogeremos texto plano del servidor y también objetos JSON que podrían salir de una base de datos.

Recibir texto plano

Lo primero que vamos a hacer es recibir un texto, que contendrá distintos elementos que podrían proceder de una base de datos (teóricamente, para el ejemplo no será de una base de datos).
Para ello enviaremos un pequeño formulario de la forma que vimos en el anterior artículo, elegiremos entre un nombre u otro de una lista y nos devolverá los apellidos el servidor.

1. function apellidos(nombre){

// Comprobamos que está disponible AJAX

if(window.XMLHttpRequest) {

ajax = new XMLHttpRequest()

}

// La respuesta aparecerá en una alerta

ajax.onreadystatechange=function(){

if(ajax.readyState == 4) {

if(ajax.status == 200) {

alert(ajax.responseText)

}

}

}

// Pedimos el archivo "apellido.php"

ajax.open("POST","apellido.php",true)

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

ajax.send("&nombre=" + nombre)

2. }

En este caso usaremos un pequeño formulario, donde estableceremos el nombre de un supuesto usuario, en este caso usaremos el nombre de "Carlos" y el de "Jaime".

Esto nos puede ser útil para recibir información suelta, como podría ser un texto específico o un artículo, pero para tener que manejar distintos datos lo mejor es JSON.

Manejar datos con JSON

JSON (que significa JavaScript Objet Notation) es una notación de manejo de datos, con el que podemos ordenar de distintas formas datos específicos de forma fácil y sencilla, además de ser compatible con multitud de lenguajes de programación.
Antes de ver cómo tratar estos datos voy a poner un pequeño ejemplo de un objeto JSON.

1. JSON = {

tipo: 'coche',

ruedas: 4,

color:{

verde: '#003300',

azul: '#000099'

},

motor:['1.6','1.9','2.0']

2. }

Este tipo de objeto lo podemos generar desde cualquier servidor para interpretarlo después con JavaScript, por seguir el ejemplo anterior vamos a usar el mismo formulario, pero en la respuesta nos devolverá un objeto JSON con varios datos de la persona, que interpretaremos en el navegador.
Para leer el objeto usaremos la función eval(), que evalúa el texto y lo convierte en "código".

1. JSON = eval(ajax.responseText)

Todo será mostrado en una alerta de JavaScript, la respuesta por un lado y varios parámetros por otro.

La respuesta la mandamos a una función que se encarga de leer el resultado y sacarlo en una alerta.

1. function Leer_JSON(respuesta){

JSON = eval('('+respuesta+')')

alert(

'Respuesta: ' + respuesta +

'\nApellidos: ' + JSON.apellidos[0] + JSON.apellidos[1] +

'\nAlto: ' + JSON.alto +

'\nPeso: ' + JSON.peso

)

2. }

Resumen

Todo esto ha sido algo básico pero podemos modificar cualquier elemento de una página con información que nos manda el servidor, por poner un ejemplo, hace poco comente cómo hice el diseño del experimento de Xitrus estilo Metro (hablé sobre cómo hacer el tipo de efectos 3D usados), pero además del diseño toda la APP se genera a través de AJAX, de la misma forma que he comentado en este artículo, solo que aplicadolo de otra forma.