Aquí comenzamos con nuestra primera aplicación usando las tecnologías PHP y Ajax. Este primer proyecto posee el siguiente proceso y los siguientes pasos:
- Crearemos una simple aplicación con un "input" ó casilla de ingreso en formularios, en la que se le solicita al usuario que escriba su nombre y el servidor devuelve este nombre mientras el usuario vá escribiendo.
- Mientras el usuario está escribiendo y el servidor esta siendo llamado asincrónicamente a intervalos regulares de una vez por segundo, para ver si reconoce el nombre actual; lo cual explica por qué no necesitamos un botón (como un botón 'Enviar') para notificar cuando estamos tipeando (Este método puede no ser apropiado para mecanismos reales de inicio de sesión pero es muy bueno para demostrar alguna funcionalidad de AJAX.)
Explicación del Código
- Paso 1: Tenemos que saber que la aplicación consiste en estos 3 archivos:
- index.html, que es el archivo inicial que el usuario solicita cuando ingresa al aplicativo web creado.
- inicioRapido.js, es el archivo que contiene código JavaScript que se carga en el lado del cliente junto con index.html. este archivo se encargará de realizar las solicitudes asíncronas al servidor, cuando estas sean necesaria para el uso del aplicativo.
- inicioRapido.php, Este archivo contiene un script PHP que reside en el servidor, el cual es llamado mediante el código del archivo inicioRapido.js desde el lado del cliente.
- Paso 2: Comencemos por la creación del archivo index.html:
- Para la creación de este archivo hemos realizado la inclusión de los códigos de cabecera(Head) y cuerpo(Body) del HTML que son básicos y no voy a tocar en este capítulo.
- Hemos adicionado un evento HTML dentro del cuerpo "body" de nuestro código del archivo index.html,
- Este evento llamará a la función JavaScript llamada proceso que realizará la acción requerida de nuestro aplicativo web.
- El input será de tipo text y tendrá un id llamado "minombre" el cual es un identificador que nos proporciona administración en nuestro aplicativo, ya veremos más adelante!
- Para finalizar utilizamos la tag div la cual nos ofrece la posibilidad de posicionar objetos y el objeto aquí posicionado será justamente el ingresado en el input, que será nuestro nombre o el nombre que el usuario ingrese en el input!
- Colocaremos un id llamado "divmensaje" que será el identificador del lugar donde posicionaremos a nuestro objeto que será el nombre ingresado en el input.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>AJAX con PHP: Inicio Rápido</title> <script type="text/javascript" src="quickstart.js"></script> </head> <body onload='process()'> El Servidor desea saber su nombre: <input type="text" id="myName" /> <div id="divMessage" /> </body> </html>
- Paso 3: Creamos nuestro archivo "quickstart.js",
- En este archivo vamos a crear una variable la cual almacenará la referencia al objeto "XMLHttpRequest" el cual es un objeto el cual nos ofrece una manera fácil de recuperar datos en una URL y puede ser usado para recuperar cualquier tipo de datos,
- Para mayores informaciones te dejo este link donde podrás aprender más sobre este objeto muy importante dentro de la tecnologia Ajax! ¿Qué es XMLHttpRequest?
var xmlHttp = crearObjetoXMLHttpRequest();
- Como podemos ver en el código hemos creado una variable xmlhttp que va a ser igual a "crearObjetoXMLHttpRequest()", lo cual quiere decir que la referencia a XMLHttpRequest es la función crearObjetoXMLHttpRequest.
- Ahora vamos a recuperar el objeto XMLHttpRequest con esta función, veamos:
// Almacenando la referencia al Objecto XMLHttpRequest var xmlHttp = crearObjetoXmlHttpRequest(); // Recuperando el objeto XMLHttpRequest function crearObjetoXmlHttpRequest() { var xmlHttp; // Si está ejecutando Internet Explorer if(window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } // Si está ejecutando Mozilla o otros navegadores else { try { xmlHttp = new XMLHttpRequest(); } catch (e) { xmlHttp = false; } } // Devolver el objeto creado o mostrar un mensaje de error if (!xmlHttp) alert("Error al crear el Objeto XMLHttpRequest."); else return xmlHttp; } // Hacer la solicitud HTTP asincrónica utilizando el objeto XMLHttpRequest mediante la función "process" function process() { // Proceda sólo si el objeto xmlHttp no está ocupado if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { // Recuperar el name escrito por el usuario en el "input" name = encodeURIComponent(document.getElementById("myName").value); // Ejecutar la página inicioRapido.php desde el servidor xmlHttp.open("GET", "quickstart.php?name=" + name, true); // Definiendo el método para manejar las respuestas del servidor xmlHttp.onreadystatechange = handleServerResponse; // Hacer que el servidor solicite las respuestas xmlHttp.send(null); } else // Si la conexión está ocupada, vuelva a intentarlo después de un segundo setTimeout('process()', 1000); } // Ejecutando automáticamente cuando se recibe un mensaje desde el servidor function handleServerResponse() { // Avanzar sólo si la transacción ha finalizado if (xmlHttp.readyState == 4) { // Estado de 200 indica que la transacción se ha completado correctamente if (xmlHttp.status == 200) { // Extraer el XML recuperado del servidor xmlResponse = xmlHttp.responseXML; // Obtener el elemento del documento (el elemento raíz) de la estructura XML xmlDocumentElement = xmlResponse.documentElement; // Obtener el mensaje de texto, que está en el primer hijo de // el elemento del documento helloMessage = xmlDocumentElement.firstChild.data; // Actualizar la pantalla del cliente utilizando los datos recibidos desde el servidor document.getElementById("divMessage").innerHTML = '<i>' + helloMessage + '</i>'; // Reiniciar Secuencia setTimeout('process()', 1000); } // Un estado HTTP diferente de 200 señala un error! else { alert("Ocurrió un problema al accesar al servidor: " + xmlHttp.statusText); } } }
- Paso 4: Creamos el archivo "quickstart.php", el cual genera las salidas haciendo caso al servidor imprimiendo en pantalla los datos que a continuación detallo en el mismo código!
- Además coloco pues 5 nombres de administradores que son Cristian, Miguel, Felipe, Gaspar y Elena;
- entonces si usted coloca alguno de estos nombres el sistema devolverá lo siguiente:
- Hola, Administrador y el nombre que hayamos elegido enter estos 5 nombres de administrador!
- Bien ahora veamos nuestro código:
<?php // Generando una salida XML header('Content-Type: text/xml'); // Generando una salida Header echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>'; // creando el elemento <response> echo '<response>'; // Devolviendo el nombre de usuario $name = $_GET['name']; // generando salida dependiendo del usuario administrador o usuario visitante $userNames = array('CRISTIAN', 'MIGUEL', 'FELIPE', 'GASPAR', 'ELENA'); if (in_array(strtoupper($name), $userNames)) echo 'Hola, Administrador ' . htmlentities($name) . '!'; else if (trim($name) == '') echo 'Visitante, por favor ingrese su nombre!'; else echo htmlspecialchars($name) . ', Yo no te conozco!'; // Cerrando el elemento <response> echo '</response>'; ?>
- Hagan sus preguntas y claro tambien no dejen de hacer sus críticas por favor!
Déjenos su Comentário:
0 commentários: