Monografia de ajax by Virginia Figueroa

UNIVERSIDAD NACIONAL DE MOQUEGUA CARRERA PROFESIONAL DE INGENIERÍA DE SISTEMAS E INFORMÁTICA

TRABAJO ENCARGADO

ASIGNATURA

Programación II

TEMA

Ajax

DOCENTE

Ing. Luis Amaro Villanueva Tapia

CICLO

ALUMNA

Virginia Beatriz Figueroa Navarro

ILO – PERÚ 2015

AJAX 1. Concepto No es una tecnología, no es un nuevo lenguaje de programación sino un conjunto de tecnologías (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que nos permiten hacer páginas de internet más interactivas. La característica fundamental de AJAX es permitir actualizar parte de una página con información que se encuentra en el servidor sin tener que refrescar completamente la página. De modo similar podemos enviar información al servidor. Permite que las páginas hagan peticiones con pequeños bits de información desde el servidor en vez de una página entera. Las técnicas de Ajax hacen que las aplicaciones para internet sean más pequeñas, más rápidas y más amigables. 2. Historia de AJAX AJAX son las siglas de Asynchronous JavaScript And XML. El término AJAX fue acuñado por Jesse James Garret en el 2005 , sin embargo todo comenzó en 1998, cuando Alex Hopmann y su equipo se encontraban desarrollando la entonces futura versión de Exchange 2000. El punto débil del servidor de correo electrónico era su cliente vía web, llamado OWA Outlook Web Access). Durante el desarrollo de OWA, se evaluaron dos opciones: un cliente formado sólo por páginas HTML estáticas que se recargaban constantemente y un cliente realizado completamente con HTML dinámico o DHTML. Alex Hopmann pudo ver las dos opciones y se decantó por la basada en DHTML. Sin embargo, para ser realmente útil a esta última le faltaba un componente esencial: "algo" que evitara tener que enviar continuamente los formularios con datos al servidor. Motivado por las posibilidades futuras de OWA, Alex creó en un solo fin de semana la primera versión de lo que denominó XMLHTTP. La primera demostración de las posibilidades de la nueva tecnología fue un éxito, pero faltaba lo más difícil: incluir esa tecnología en el navegador Internet Explorer. Si el navegador no incluía XMLHTTP de forma nativa, el éxito del OWA se habría reducido enormemente. El mayor problema es que faltaban pocas semanas para que se lanzara la última beta de Internet Explorer 5 previa a su lanzamiento final. Gracias a sus contactos en la empresa, Alex consiguió que su tecnología se incluyera en la librería MSXML que incluye Internet Explorer. De hecho, el nombre del objeto (XMLHTTP) se eligió para tener una buena excusa que justificara su inclusión en la librería XML de Internet Explorer, ya que este objeto está mucho más relacionado con HTTP que con XML.

3. ¿Usar o no usar AJAX? Ventajas 1. Utiliza tecnologías ya existentes. 2. Soportada por la mayoría de los navegadores modernos. 3. Interactividad. El usuario no tiene que esperar hasta que lleguen los datos del servidor. 4. Portabilidad (no requiere plug-in como Flash y Applet de Java) 5. Mayor velocidad, esto debido que no hay que retornar toda la página nuevamente. 6. La página se asemeja a una aplicación de escritorio. Desventajas 1. Se pierde el concepto de volver a la página anterior. 2. Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique dónde nos encontrábamos al grabarla. 3. La existencia de páginas con AJAX y otras sin esta tecnología hace que el usuario se desoriente. 4. Problemas con navegadores antiguos que no implementan esta tecnología. 5. No funciona si el usuario tiene desactivado el JavaScript en su navegador. 6. Requiere programadores que conozcan todas las tecnologías que intervienen en AJAX. 7. Dependiendo de la carga del servidor podemos experimentar tiempos tardíos de respuesta que desconciertan al visitante. 4. Ejemplos de aplicación: paso a paso para la ejecución de dicho código

Vamos a ver las mejores maneras de utilizar AJAX junto a jQuery En primer lugar expliquemos que AJAX es una tecnología bastante madura por la cual los navegadores pueden realizar peticiones web sin recargar completamente la página. La librería jQuery tiene una serie de funciones muy convenientes con las cuales podremos simplificar el uso de AJAX para todos los navegadores soportados. Hay varias funciones que implican el uso de AJAX en jQuery a continuación te presentamos las más comunes y una breve descripción de su caso de uso más común. Es importante tener presente este resumen porque la al haber tantas funciones uno no sabe exactamente cuál usar, esta lista los ayudará con esa decisión. 

 

jQuery.get: hace una petición HTTP GET debería ser uno de los usos más comunes, sobre todo cuando no deseas mandar muchos datos al servidor o para acciones que no modifican el estado del server. jQuery.post: hace una petición HTTP POST deberías usarla cuando queres enviar muchos datos al servidor o cuando deseas modificar el estado del server. jQuery.getJSON: Si quien responde envia JSON, este es un buen método para simplificar la llamada porque te entregará el objeto listo para usar.

 

jQuery.load: muy popular entre los usuarios de jQuery, esta petición pone el resultado directamente en el elemento desde que se llamó. jQuery.ajax o $.ajax: es la función más generica o de más bajo nivel con esta podrás hacer cualquiera de los llamados AJAX que se logran con las otras.

jQuery.get e introducción a llamadas asincrónicas La forma más sencilla de la función es $.get(url) dónde url es el recurso que queremos solicitar. Al ejecutar ese código simplemente le diremos a nuestro navegador que abra una petición a esa url y que no haga nada con el resultado. No estaríamos haciendo nada en la página, pero tal vez nos interese para notificar al server de algo (por ejemplo hacerlo cada cierto tiempo para no que no se desloguee un usuario). La forma más común de esta función es en realidad $.get(url, function(resultado) {}) con esta forma estamos pasando una función que se ejecutará con el resultado cuando la petición termine. Es importante entendender que las peticiones en AJAX son por defecto asincrónicas, esto significa que el javascript continuará la ejecución de las siguientes instrucciones que sigan a una petición y en otro hilo de ejecución comenzará a realizar la entrada y salida necesaria para la petición. ¿No entendiste nada de asincrónico y entrada/salida? mira el siguiente ejemplo: Ejecutar ejemplo Editar ejemplo log('Comienza ejecución'); $.get('/feeds/posts/default', function(data) { log('Termino de cargar la primer petición'); }); $.get('/feeds/posts/default', function(data) { log('Termino de cargar la segunda petición'); }); log('Última línea del programa');

Si le das al botón ejecutar, verás que los logs que deja el programa no están en el orden en que aparecen textualmente. Esto es porque como dijimos el hilo de ejecución no se detiene a esperar la finalización de una llamada AJAX, simplemente continua con el programa y otro hilo de ejecución de tu navegador se ocupará de realizar las peticiones y a medida que las termine llamará a las funciones (usualmente conocidas como callbacks) con el resultado de la ejecución que le pasaste en cada llamada a get. Este estilo de programación se conoce como entrada/salida no bloqueante y es muy común en Javascript, y se encuentra en contraposición al estilo bloqueante tradicional de entrada y salida de otros lenguajes/entornos (como C, Java, etc). Últimamente se puso muy de moda por el entorno node.js.

jQuery.post haciendo una petición POST y su diferenciación con .get Con este método haremos una petición HTTP de tipo POST, usualmente útilizadas para realizar una acción que cambie el estado del servidor. ¿A qué me refiero? Cuando vos te traes una lista de usuarios generalmente no estás modificando para nada el estado del servidor. Simplemente estás solicitando un listado y no modificas ninguno de sus datos. El servidor seguramente hará una query sql de tipo SELECT ... y tu petición no causará ninguna modificación en el estado del servidor. Ese tipo de peticiones suelen

(y deberían hacerse) con peticiones de tipo get (utilizando la función$.get). Contrariamente si uno actualiza un nombre de usuario, o borra un usuario estaría causando un cambio en el servidor por lo que lo correcto es usar una petición POST con la función $.post. Otra razón para utilizar una petición POST es si la cantidad de datos a enviar al servidor es muy grande (las peticiones GET envian los datos como parte de la URL y algunos servidores web limitan el tamaño que una URL puede tener). Veamos el mismo ejemplo anterior pero ahora utlizando peticiones POST: Ejecutar ejemplo Editar ejemplo log('Comienza ejecución'); $.post('/feeds/posts/default', function(data) { log('Termino de cargar la primer petición'); }); $.post('/feeds/posts/default', function(data) { log('Termino de cargar la segunda petición'); }); log('Última línea del programa');

Como verán cambiar la función get por post no cambia el caracter asincrónico del programa, ya que como dijimos todas las llamadas AJAX son por defecto asincrónicas. Lo siguiente es mostrar un ejemplo en dónde enviamos datos al servidor. Como dijimos en el caso de $.get los datos se enviarán como parte de la URL (usualmente a estos datos se los llama query string y toman la forma de?clave=valor&clave2=valor2) en cambio en el caso de POST los datos seran parte del cuerpo de la petición. Por dar el ejemplo más común de un lenguaje servidor: en PHP podrás acceder a los datos enviados por AJAX con: $_GET["clave"], $_POST["clave"] o si queres revisar los dos el conveniente$_REQUEST["clave"]. Visto esto veamos dos ejemplos en los que enviamos datos al servidor, la forma es igual para get y post: $.post("/test.php", {clave: "valor"}, function(respuesta) { console.log("La respuesta es:", respuesta) }); $.post("/test.php", {clave: "valor"}, function(respuesta) { console.log("La respuesta es:", respuesta) });

Consejo para debugguear: los programadores suelen utilizar las herramientas que brinda el navegador para poder ver exactamente que peticiones esta haciendo la página web que están programando. En el caso del navegador Google Chrome esto lo puedes ver en la pestaña de Network o de Red de las herramientas para el desarrollador, accediendo desde Herramientas. En el caso de Firefox puedes bajarte la excelente extensión Firebug que también cuenta con la misma pestaña. Si querés probar en tu propio servidor podrías generar un archivo test.php con el siguiente contenido:

<?php var_dump($_REQUEST);

Trabajando con JSON getJSON Suele ser bastante común que las páginas planeadas para el uso de AJAX utilicen JSON como lenguaje de intercambio con el servidor. Esto permite que el servidor responda de manera liviana sin toda la sobrecarga que implica el uso de HTML, y con la ventaja de que los datos recibidos son fácilmente parseables por el navegador. La función $.getJSON realiza (a igual que $.get) una petición GET, con la diferencia de que esperará como respuesta del servidor JSON bien formado. Veamos primero como podría ser esta vez el archivo test-json.php <?php $datos = array("mensaje" => "Hola soy json", "error" => false); echo json_encode($datos); Veamos ahora el programa que podría pedir por estos datos: $.post("/test-json.php", function(respuesta) { console.log("La respuesta ya viene en respuesta.mensaje, respuesta.error) });

forma

objeto:",

Si todo fue bien en el callback recibirás un objeto javascript construído a partir del json enviado por el servidor. NOTA SOBRE ERRORES: no es poco común ver errores de CrossOrigin entre los que empiezan a utilizar AJAX. Estos errores se deben a que debido a políticas de seguridad los navegadores sólo permiten hacer peticiones al mismo dominio desde dónde cargo la página. Es decir uno no podría hacer una petición AJAX a google.com si el navegador se encuentra en la página de Codigo Fuente. Este problema puede solucionarse utilizando otras técnicas como JSONP que implica el uso de tags script, pero esta técnica es algo más compleja y la veremos en algún otro artículo.

jQuery.load utilizando el resultado rápidamente Este es otro de los métodos que permite hacer una petición GET, la diferencia es que cuando es llamado desde un elemento, el contenido de ese elemento sera cargado por la respuesta de la petición. Esta técnica es útil para llenar un div o elemento rápidamente con una respuesta AJA. Si se proporciona un callback, el callback se ejecutará después de cargarse el elemento. $("#destino").load("/test.php", function() { console.log("Este mensaje se ejecutará luego de que se cargue el div con id = destino"); });

Una de las funciones desconocidas de $.load que la mayoría de los desarrolladores ignora es que a la misma respuesta se le puede aplicar un filtro por selectores para usarla parcialmente. Esto significa que si del html que nos responde el servidor queremos utilizar sólo un div podremos seleccionarlo con los típicos selectores de jQuery (que si por no lo sabías son selectores CSS). $("#destino").load("/test.php #detalles"); // de test.php solo nos quedamos con el div id="detalles"

que

responda

jQuery.ajax la función bajo nivel

Esta es la función de más bajo nivel que posee jQuery utilizandola podremos controlar todos los aspectos importantes de la petición AJAX que estemos haciendo. Veamos un ejemplo: $.ajax("/test.php", { "type": "post", // usualmente post o get "success": function(result) { console.log("Llego el contenido y no hubo error", result); }, "error": function(result) { console.error("Este callback maneja los errores", result); }, "data": {clave: "Valor a enviar al servidor"}, "async": true, });

Es interesante el último de los parámetros porque permite apagar el comportamiento asincrónico de la petición lo que causaría que antes de ejecutar la siguiente instrucción javascript espere a que se termine de ejecutar la petición.

BibliografĂa http://www.baluart.net/articulo/manual-de-ajax-en-espanol http://static.scribd.com/docs/3zav9lddk0gbh.swf?INITIAL_VIEW=width http://codigomaldito.blogspot.com/2013/07/jquery-ajax.html http://www.ajaxya.com.ar/ http://librosweb.es/libro/ajax/ http://www.uco.es/~lr1maalm/manualdeajax.pdf