Manejar Ajax es muy sencillo ya que toda su tecnología se base en conceptos ya existentes. Vamos a ver un ejemplo muy sencillo en donde obtendremos información de forma dinámica sin necesidad de cambiar de página.

Vamos a escribir una página web con un formulario que actualizara su información. Esto se logra comunicándonos mediante javascript, con otra página la cual nos arroja los datos en forma de xml.

Empecemos con el archivo que nos va a proporcionar la información, el cual llamaremos getSku.php

getSku.php

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. header('Content-Type: text/xml');
  4.  
  5. $param = $_GET['param'];
  6.  
  7. /*obtenemos los parametros de la solicitud. Aqui vamos a
  8. procesarlas, por ejemplo podriamos generar una consulta
  9. a la base de datos y obtener de ahi los datos */
  10.  
  11. $nombre = "Producto ".$param;
  12. $descripcion = " Este es un buen producto llamado ".$param;
  13.  
  14. if (isset($nombre) && isset($descripcion)) {
  15.  
  16.     /*
  17.     Generamos el string que sera mandado como xml.
  18.     */
  19.  
  20.   $return_value =
  21.     '<?xml version="1.0? standalone="yes"?>
  22.       <zip>
  23.         <nombre>'.$nombre.'</nombre>
  24.         <descripcion>'.$descripcion.'</descripcion>
  25.       </zip>';
  26. }
  27. else {
  28.   $return_value = "invalid".",".$_GET['param'];  }
  29. //Imprimimos el valor
  30. echo $return_value;
  31. ?>

Este va a ser el encargado de generar los datos en un documento xml para posteriormente ser leído por nuestra aplicación. Generar este documento es muy sencillo puesto que solo se trata de generar un archivo de texto con formato xml. En el ejemplo lo que estamos haciendo es primero cargar los parámetros de la solicitud, procesarlos y generar el documento xml. Si corremos este archivo desde el explorador (http://localhost/getSku.php?param=1) podremos ver el resultado con el formato XML. En el ejemplo el proceso se encuentra alambrado, pero bien podría obtenerse de una base de datos o mediante algún algoritmo.

El segundo archivo es la aplicación con la que llamaremos los datos. Se divide en dos partes, la primera son las funciones javascript que nos ayudan a hacer el truco. Una de las mas importantes es la función getHTTPObject ya que crea un objeto HTTP Request Object, el cual se encarga de realizar solicitudes o mandar cualquier tipo de documento, en este caso sobre un documento XML.

PLAIN TEXT
PHP:
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.  
  3. <head>
  4.  
  5.     <script language="javascript"  type="text/javascript">
  6.         var url = "getSku.php?param="; // The server-side script
  7.  
  8.         function handleHttpResponse() {
  9.             if (http.readyState == 4) {
  10.                 if (http.responseText.indexOf('invalid') == -1) {
  11.  
  12.                 //Vamos a usar XML DOM Para leer los datos
  13.                 var xmlDocument = http.responseXML;
  14.  
  15.                 var nombre = xmlDocument.getElementsByTagName('nombre').item(0).firstChild.data;
  16.                 var desc = xmlDocument.getElementsByTagName('descripcion').item(0).firstChild.data;
  17.  
  18.                 document.getElementById('skuName').value = nombre;
  19.                 document.getElementById('skuDescripcion').value = desc;
  20.                 isWorking = false;
  21.                 }
  22.             }
  23.         }
  24.  
  25.         var isWorking = false;
  26.  
  27.         function getSKU() {
  28.         if (!isWorking && http) {
  29.             var skuId = document.getElementById("sku").value;
  30.             http.open("GET", url + escape(sku), true);
  31.             http.onreadystatechange = handleHttpResponse;
  32.             isWorking = true;
  33.             http.send(null);
  34.             }
  35.         }
  36.  
  37.         function getHTTPObject() {
  38.             var xmlhttp;
  39.             if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  40.                 try {
  41.                     xmlhttp = new XMLHttpRequest();
  42.                 } catch (e) {
  43.                     xmlhttp = false;
  44.                 }
  45.             }
  46.             return xmlhttp;
  47.         }
  48.  
  49.         var http = getHTTPObject(); // We create the HTTP Object
  50.         </script>
  51.     </head>
  52.     <body>
  53.         <form action="post">
  54.             Producto
  55.             <input type="text" size="5? name="sku" id="sku"
  56.                 onblur="getSKU();" />
  57.             <br />
  58.             City:
  59.             <input type="text" name="skuName" id="skuName" />
  60.             State:
  61.             <input type="text" size="10? name="skuDescripcion" id="skuDescripcion" />
  62.         </form>
  63.     </body>
  64. </html>

Al final se encuentra la forma en donde vemos un campo llamado sku. Este contiene la función onblur=’ getSKU ();’, la cual se activa cada vez que retiramos el foco del campo de texto.

Esta función lo que hace es pedirle l objeto HTTPObject que realice la solicitud a la página getSku.php enviando como parámetro, el valor que se encuentra en el campo de texto. Una vez hecha la solicitud, se analiza la información con handleHttpResponse, encargada de procesar el xml y obtener los datos. Ya con los datos obtenidos, simplemente actualizamos el valor de los campos de texto.

Al final, obtenemos una forma muy funcional que nos ofrece datos y retroalimentación de una forma inmediata. Ya depende de nuestra creatividad, encontrarle un uso que permita hacer de nuestra página web, un lugar amigable, eficiente e informativo.

Si te quedan preguntas realizalas mediante nuestro foro.