Página principal



Integrantes: Ana Santacruz Elías Gaona

Descargar 46.94 Kb.

Integrantes: Ana Santacruz Elías Gaona





Descargar 46.94 Kb.
Fecha de conversión29.04.2017
Tamaño46.94 Kb.




















Integrantes:

  • Ana Santacruz

  • Elías Gaona

  • Juan Valenzuela











AJAX

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dados que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

Tecnologías incluidas en Ajax

  • Ajax es una combinación de cuatro tecnologías ya existentes:

  • XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.

  • Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.

  • El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.

  • XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, Ajax no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente.















PHP + AJAX = XAJAX

 

XAJAX es una biblioteca de código abierto de PHP capaz de generar aplicaciones Web con tecnología AJAX, utiliza una forma de trabajo de funciones, designando qué funciones de código PHP se convierten en funciones AJAX. También es posible usar HTML, CSS y Java Script.



AJAX se ha convertido en una de las tecnologías más populares para la creación de aplicaciones Web dinámicas. Por tal razón hay una gran cantidad de bibliotecas y frameworks que nos permiten hacer uso de esta tecnología de una manera sencilla y cómoda. Algunos de ellos son Prototype, ScriptAculous, Google Web Toolkit (GWT), Xajax entre otros. En este artículo se realizará una comparación entre las Web Tradicionales y la introducción de la tecnología AJAX en las mismas, pero principalmente se centrará en la implementación de AJAX utilizando la biblioteca Xajax.

Web Tradicional y la implementación de AJAX

Uno de los inconvenientes más comunes a la hora de diseñar una interfaz de aplicación Web es que una vez que la página se ha descargado en el cliente, la conexión con el servidor se corta. Cualquier intento de dinamismo en la interfaz por parte del cliente requiere una comunicación con el servidor para la recarga (proceso que tiende a convertir la aplicación poco elegante y lenta).

En el modelo tradicional de aplicaciones Web el usuario envía una petición al servidor requiriendo una página, la cual es construida y enviada al navegador. Esta página incluye un formulario HTML para capturar datos del usuario. Una vez que el usuario reenvía los datos al servidor, la siguiente página será generada y enviada dependiendo del valor de dichos datos, y así el proceso continúa. Supongamos una aplicación de escritorio para el registro de un número de serie. Según convenga, puede plantearse de diversas formas, una vez hemos terminado de rellenar los correspondientes cuadros de texto con los caracteres del código, podríamos hacer aparecer un tick verde a la derecha indicando que hemos introducido un código válido. Tan pronto como se introduce el código, la aplicación puede comprobar su validez y responder.

En contraste con el ejemplo anterior pero esta vez orientado en una interfaz Web. Por supuesto, todos los cuadros de textos donde introducir el código serán idénticos, pero al rellenarlos, el usuario tendrá que enviar esos datos al servidor para que éste valide el código. Una nueva página será entonces cargada informando del éxito o fracaso de la operación, y en caso de fallo, el usuario tendrá que volver atrás e intentarlo de nuevo cuantas veces sea necesario. Una solución a estos problemas se presenta con el objeto XMLHttpRequest. Este objeto, ahora disponible como objeto nativo tanto en Firefox como en otros navegadores existentes, permite a JavaScript realizar peticiones al servidor remoto sin la necesidad de recargar la página. En esencia, pueden realizarse peticiones y recibir respuestas HTTP completamente en segundo plano y sin que el usuario experimente ninguna interrupción visual.

Con la introducción de AJAX (Ashyncronous JavaScript And XML) en aplicaciones Web el manejo del objeto XMLHttpRequest se hace mucho más sencillo. Cuando el usuario interactúa con la Web y genera un suceso, se crea y configura un objeto XMLHttpRequest, que posteriormente realiza una llamada al servidor solicitando el manejo de ese evento. La petición se procesa en el servidor y retorna una respuesta que puede ser un documento XML, texto plano, JavaScript, etc. que contienen el resultado de dicha petición. Luego el objeto XMLHttpRequest llama a la función callback() para procesar el resultado y finalmente se actualiza el DOM (Documen Object Model) de la página con la petición dependiendo del resultado devuelto.

De esta manera AJAX permite que la velocidad de navegación y dinamismo incrementen notablemente, dando como resultado aplicaciones Web rápidas y fáciles de usar.

$objAjax = new xajax();

$objAjax->register(XAJAX_FUNCTION,'mi_funcion_1');

$objAjax->register(XAJAX_FUNCTION,'mi_funcion_2');

$objAjax->processRequest();

Caracteristicas

En la actualidad se encuentran diversas clases de bibliotecas y frameworks de AJAX disponibles para los desarrolladores de aplicaciones Web. Algunas de ellas son Prototype y ScriptAculo. Sin embargo para optar por estas soluciones los desarrolladores deben tener un conocimiento, si bien no muy elevado, pero si sólido de Javascript. Por tal hecho, la mayoría de ellos y sobre todo los que utilizan PHP, al hacer uso de estos frameworks podrían encontrar dificultades.

Por otro lado, la biblioteca Xajax es una biblioteca puramente centrada en PHP. Con la introducción de la misma el manejo de AJAX en PHP se hace mucho más sencillo y sobre todo solo se necesita escribir sentencias muy cortas y simples en Javascript, lo que supone una ventaja frente a otras soluciones.

Otras de las características son:

  • Xajax es compatible con Firefox, Mozilla, Internet Explorer, Opera y Safari.

  • Xajax puede ser usado para actualizar estilos, clases CSS, botones de selección, casillas de verificación y botones de radio o cualquier otro atributo de un elemento

  • Cada función registrada para ser accesible a través de Xajax puede tener distintos tipos de petición.

Instalación

Obtendremos un archivo comprimido que debemos descomprimir en cualquier lugar de nuestro espacio de publicación. Por ejemplo, podemos crear un directorio llamado xajax donde podemos colocar todos los archivos del .zip descargado.

No hay que hacer especiales acciones para instalar xajax, simplemente descomprimirlo en cualquier servidor Apache o IIS que tenga compatibilidad con PHP 4.3.x o PHP 5.x, o superiores.



Una vez descargado podemos probar los ejemplos que vienen en el directorio examples, siempre a través de nuestro servidor web compatible con PHP, ya sea en local o en un servidor web remoto.

Atención al directorio donde finalmente metemos los archivos de xajax, pues luego tendremos que incluir archivos que hay en dicho directorio, para lo cual deberemos recordar la ruta relativa desde la página donde estemos al directorio donde está xajax.



Funcionamiento

En un principio se crea una instancia de objeto Xajax (xajax object). Este objeto manejará todo el procesamiento a través de Xajax. En segundo lugar debemos registrar todas las funciones que hemos definido previamente en el objeto Xajax, esto se puede hacer usando el método xajax->registerFunction(). Finalmente todas las respuestas serán procesadas utilizando el método xajax->processRequest().

view plaincopy to clipboardprint?

  1. $objAjax = new xajax();  

  2. $objAjax->registerFunction('mi_funcion_1');  

  3. $objAjax->registerFunction('mi_funcion_2');  

  4. $objAjax->processRequest();  

Paso 1: Incluir la biblioteca Xajax

Como primer paso debemos incluir la biblioteca Xajax de la siguiente manera, teniendo en cuenta que el archivo esta dentro de la carpeta donde guardamos los archivos contenidos en el zip:

view plaincopy to clipboardprint?

  1. require_once("xajax/xajax.inc.php");  


Paso 2: Creamos una instancia del objeto Xajax

view plaincopy to clipboardprint?

  1. $xajax = new xajax();   

Paso 3: Registramos las funciones PHP que queremos hacer accesibles desde JavaScript

view plaincopy to clipboardprint?

  1. $xajax->registerFunction("miFunction");   

Paso 4: Escribimos las funciones PHP que vamos a registrar, no hay que olvidarse de que debemos devolver el XML

view plaincopy to clipboardprint?

  1. function miFuncion($argumentos)  

  2. {  

  3.      // obten el valor de la variable $argumentos y haz alguna cosa con ella como realizar  

  4.      // una consulta a una base de datos y pone el resultado dentro de otra  

  5.      // variable, como $datos   

  6.      // Haz una instancia del objeto xajaxResponse  

  7.      $objResponse = new xajaxResponse();  

  8.      // añade un comando a la respuesta para asignar al atributo innerHTML  

  9.      // del elemento con id="identificador" para que cambie su contenido a $datos  

  10.      $objResponse->addAssign("identificador","innerHTML"$newContent);  

  11.      //retorna la respuesta XML generada por el objeto xajaxResponse  

  12.      return $objResponse;  

  13. }   

Paso 5: Le indicamos a Xajax que procese las peticiones:

view plaincopy to clipboardprint?

  1. $xajax->processRequest();  

Paso 6: Debemos incluir el script Javascript entre las cabeceras HEAD de nuestro código HTML

view plaincopy to clipboardprint?

  1. $xajax->printJavascript('xajax/'); ?>  

Paso 7: Llamamos a la función desde un evento cualquiera, para ello debemos anteponer la palabra "xajax_" a la funcion para su uso

view plaincopy to clipboardprint?

  1. button onclick="xajax_miFuncion('Hola Mundo...');"




Similar:

Integrantes: Ana Santacruz Elías Gaona iconActa general de ejidatarios convocadael dia 19de septiembre del dos mil tres por el comisariado ejidal de santa ana jilotzingo
Y, presidente, secretario y tesorero, respectivamente; de los integrantes del consejo de vigilancia, ciudadanos, Y, presidente, secretario...
Integrantes: Ana Santacruz Elías Gaona iconFormulario Derecho de Uso de Agua dgc ana
Deberá ser presentada por escrito, dirigida al Ministro- director de la Autoridad Nacional del Agua (ana), Cro. Luis Ángel Montenegro...
Integrantes: Ana Santacruz Elías Gaona icon[02] todos los sectores el presente manual tiene como objetivo permitir que los integrantes del Comité Paritario de Higiene y Seguridad / Faena conozcan algunas herramientas que les faciliten el cumplimiento de sus funciones, siendo capaces
Es muy importante que los integrantes del comité tengan los conocimientos de las
Integrantes: Ana Santacruz Elías Gaona iconX medicina
Traducción del inglés: Jaime Elias. (Revisión: Dr. Luis Pericot) Prólogo del Dr. Pericot
Integrantes: Ana Santacruz Elías Gaona iconAmparo indirecto
Carmen Barojas Rendón y/o Jorge Martínez y/o Ignacio Barradas Vista y/o Gustavo Mendoza González y/o Rafael González Avillaced y/o...
Integrantes: Ana Santacruz Elías Gaona iconPermiso amb
Autopista San Salvador-Santa Ana, municipio de Colón, departamento de La Libertad
Integrantes: Ana Santacruz Elías Gaona iconDocumento a presentar donde obtenerlo
Carnet de Control Sano de los integrantes menores de edad


Descargar 46.94 Kb.