Ajax

Ajax Ya desde CERO

AJAX

Ajax Ya desde CERO
El objetivo de este tutorial es poder aprender Ajax viendo un concepto teórico, luego algunos ejercicios
resueltos y otros por resolver.
Puede desarrollar los ejercicios en el sitio, probarlos, modificarlos y ver los resultados inmediatamente.
A lo largo del curso se introducen conceptos de Ajax desde CERO, si esta olvidado de HTML, JavaScript,CSS, PHP o DHTML puede visitar HTML Ya, JavaScript Ya, CSS Ya, PHP Ya y DHTML Ya
1 - Qué es AJAX?
2 - Ventajas y desventajas de AJAX.
3 - Un ejemplo con AJAX.
4 - El mismo ejemplo sin AJAX.
5 - Objeto XMLHttpRequest
6 - Pasando datos al servidor por el método GET.
7 - Pasando datos al servidor por el método POST.
8 - Recuperando datos mediante la propiedad responseText del objetoXMLHttpRequest
9 - Recuperando datos mediante la propiedad responseXML del objeto XMLHttpRequest
10 - Propiedades onreadystatechange y readystate.
11 - Propiedades status y statusText.
12 - Método abort del objeto XMLHttpRequest
13 - Mostrar un gif animado mientras se envían y reciben los datos del servidor.
14 - Paginación con AJAX
15 - Cargar un control de tipo select
16 - Mostrar un tooltipcon datos recuperados del servidor en forma asincrónica
17 - Autocompletar un control de tipo text
18 - Encuenta con AJAX
19 - Qué es JSON?
20 - Recuperar datos del servidor en formato JSON
21 - De PHP a JSON (utilizando la librería JSON.php)
22 - De JavaScript a JSON (utilizando la librería json.js)
23 - De JSON a JavaScript (utilizando la librería json.js)
24 - De JSON a PHP (utilizando lalibrería JSON.php)
25 - Pizarra interactiva multiusuario

1 - Qué es AJAX?
AJAX son las siglas de Asynchronous JavaScript And XML. No es un 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 coninformación que se
encuentra en el servidor sin tener que refrescar completamente la página. De modo similar podemos
enviar información al servidor.
La complejidad se encuentra en que debemos domininar varias tecnologías:
HTML o XHTML
CSS
JavaScript
DHTML Básicamente debemos dominar todos los objetos que proporciona el DOM.
XML Para el envío y recepción de los datos entre el cliente y elservidor.
PHP o algún otro lenguaje que se ejecute en el servidor (ASP.Net/JSP)
En este curso suponemos que domina las tecnologías mencionadas, en caso de no ser asírecomiendo
recorrer los cursos de HTML Ya, JavaScript Ya, CSS Ya, PHP Ya y DHTML Ya, luego todo lo nuevo que
aparezca lo hiremos explicando lentamente a través de ejemplos.

Ajax Ya desde CERO

AJAX

2 - Ventajas y desventajasde AJAX.
Ventajas:
 Utiliza tecnologías ya existentes.
 Soportada por la mayoría de los navegadores modernos.
 Interactividad. El usuario no tiene que esperar hasta que llegen los datos del servidor.
 Portabilidad (no requiere plug-in como Flash y Applet de Java)
 Mayor velocidad, esto debido que no hay que retornar toda la página nuevamente.
 La página se asemeja a una aplicación deescritorio.
Desventajas:
 Se pierde el concepto de volver a la página anterior.
 Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique donde nos
encontrabamos al grabarla.
 La existencia de páginas con AJAX y otras sin esta tecnología hace que el usuario se desoriente.
 Problemas con navegadores antiguos que no implementan esta tecnología.
 No funcionasi el usuario tiene desactivado el JavaScript en su navegador.
 Requiere programadores que conozcan todas las tecnologías que intervienen en AJAX.
 Dependiendo de la carga del servidor podemos experimentar tiempos tardíos de respuesta que
desconciertan al visitante.

3 - Un ejemplo con AJAX.
Confeccionaremos un ejemplo donde veremos que aparecen muchos conceptos, no se preocupe si no
los...