ajax - clase 1

Clases

Objetivos Contenido Laboratorio Descargas Examen Resultados Faq

Historia y Conceptos Bsicos de AJAX Conceptos de AJAX

Definicin Es una tcnica de desarrollo Web para crear aplicaciones interactivas.

stas se ejecutan en el cliente (en el navegador del usuario) y mantiene comunicacin asncrona con el servidor en segundo plano. De esta forma

es posible realizar cambios sobre la misma pgina sin necesidad de recargarla.

Su objetivo es aumentar la interactividad, aumentar la velocidad y minimizar el trfico entre el cliente y el servidor.

Que no es AJAX? No es un leguaje de programacin como J2EE, .NET, PHP, Ruby o Scripts CGI. Sino que interacta con todos ellos. Es por ello que para poder utilizar

AJAX no es necesario aprender un nuevo lenguaje de programacin.

Tampoco es servidor, no es un archivo, no es un programa, ni un modulo de Apache.

Angel Sergio Aberbach

Inicio Comunicacin

Clase 1 https://alumni.educacionit.com/clases/indice/id/310/classId/1156

1 de 16 28/10/2013 01:27 p.m.

Que es AJAX? AJAX no es una tecnologa sino la unin de varias tecnologas.

Es la conjuncin de tres tecnologas:

JavaScript

XML

El objeto XMLHttpRequest

En otras palabras, AJAX es la aproximacin del lado del cliente y que puede interactuar con cualquiera de las aplicaciones Web del lado del Servidor.

Quin Invent AJAX? El origen exacto esta sujeto a debate. Sin embargo Jesse James Garrett de Adaptive Path fue el primero en acuar el termino en febrero del 2005.

En su articulo Ajax: A New approach to Web applications Garrett discute como el espacio entre clientes importantes, aplicaciones y clientes

pequeos o aplicaciones y la red se estn cerrando. Por su puesto Google da realmente tcnicas de un elevado perfil (Gmail, Goole Maps, Google Labs,

etc).

Pero Garrett nos da un termino que no es exactamente eso. Es decir es verbal, como asincrnico, XMLHTTPRequest, JavaScript, CSS, el DOM, etc.

Entonces originalmente es considerado como un acrnico para el asincronismo JavaScript + XML, el termino ahora es usado simplemente para

explicar todas las tecnologas que permiten al browser comunicarse con el servidor sin refrescar la pagina.

Alternativas previas a la existencia de AJAX JavaScript Remote Scripting (JSRS): Un cliente JavaScript ejecuta procesos en background escondiendo elementos, iframes, etc. Introducido en 1996

por Internet Explorer y en 1997 por Netscape. Tenan el elemento SRC (source) que poda tomar cualquier direccin URL externa y cargarlo en una

pagina que contenga JavaScript que manipule la pagina paterna, pueden lograrse efectos parecidos al AJAX.

MSRS - Microsoft Remote Scripting: Resulto un sustituto ms elegante para estas tcnicas, con envo de datos. Introducido por Microsoft en 1998.


2 de 16 28/10/2013 01:27 p.m.

Caractersticas

Ventajas Utiliza tecnologas ya existentes.

Soportada por la mayora de los navegadores modernos.

Interactividad. El usuario no tiene que esperar hasta que lleguen 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 pgina nuevamente.

La pgina se asemeja a una aplicacin de escritorio.

Desventajas Se pierde el concepto de volver a la pgina anterior.

Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique donde nos encontrbamos al grabarla.

La existencia de pginas con AJAX y otras sin esta tecnologa hace que el usuario se desoriente.

Problemas con navegadores antiguos que no implementan esta tecnologa.

No funciona si el usuario tiene desactivado el JavaScript en su navegador.

Requiere programadores que conozcan todas las tecnologas que intervienen en AJAX.

Dependiendo de la carga del servidor podemos experimentar tiempos tardos de respuesta que desconciertan al visitante.

Links de inters Nombre Descripcin URL

AjaxPatterns Sitio Web www.ajaxpatterns.org

Ajax Projects Projects www.ajaxprojects.com/

Ajax Path Ajax and PHP www.ajaxpath.com

Ajax World Grupos Google sobre Ajax groups-beta.google.com/group/ajax-world

jQuery jQuery Fundation https://jquery.org/


3 de 16 28/10/2013 01:27 p.m.

Introduccin a Javascript Introduccin

Conceptos Bsicos Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos.

JavaScript es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas Web, con unasintaxis semejante

a la del lenguaje Java y el lenguaje C. JavaScript es case sensitive, o lo que es lo mismo, diferencia maysculas y minsculas.

Dnde y cmo incluir Javascript Existen distintos modos de incluir lenguaje JavaScript en una pgina.

La forma mas frecuente de hacerlo es utilizando la directiva en un documento HTML (se pueden incluir tantas directivas como se

quiera en un documento). El formato es el siguiente:

El atributo lenguaje hace referencia a la versin de JavaScript que se va a utilizar en dicho script. Otro atributo de la directiva script es src, que puede

usarse para incluir un archivo externo que contiene JavaScript y que quiere incluirse en el cdigo HTML.

El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js.

Puede incluirse tambin cdigo JavaScript como respuesta a algn evento:

Nota: Los scripts pueden incluirse como comentarios para asegurar que su cdigo no es "visto" por navegadores viejos que no reconocen JavaScript y as evitar errores.

Variables

Introduccin Las variables almacenan y recuperan datos, tambin conocidos como "valores".

Una variable puede referirse a un valor que cambia o se cambia.

Las variables son referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o


4 de 16 28/10/2013 01:27 p.m.

("_"); los caracteres siguientes pueden ser nmeros (0-9), letras maysculas o letras minsculas).

Variables globales Normalmente, usted crea una nueva variable global asignndole simplemente un valor:

globalVariable=5;

Sin embargo, si usted est codificando dentro de una funcin y usted quiere crear una variable local que slo tenga alcance dentro de esa funcin,

debe declarar la nueva variable haciendo uso de var:

function newFunction(){var localVariable=1;

globalVariable=0;

...

}

Tipos de datos Javascript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos, cadenas, nulos e indefinidos.

JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es, una variable puede cambiar de tipo durante su vida, por ejemplo uno

puede declarar una variable que ahora sea un entero y ms adelante una cadena.

A diferencia de otros lenguajes y como ya hemos visto, en Javascript no es necesario declarar las variables especificando el tipo de dato que

contendrn, ser el propio intrprete el que le asignar el tipo apropiado.

Tipos de Datos:

Nmeros Enteros o coma flotante.

Boleanos True o False.

Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples

o dobles.

Objetos Obj = new Object();

Nulos Null

Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido

creada pero no le ha sido asignado un valor.


5 de 16 28/10/2013 01:27 p.m.

Operadores

Operadores de comparacin Un operador de la comparacin compara sus operando y devuelve un valor lgico basado en si la comparacin es verdad o no. Los operando pueden

ser numricos o cadenas.

Op. Descripcin

== " Igual a" devuelve true si los operandos son iguales

=== Estrictamente "igual a" (JavaScript 1.3)

!= " No igual a" devuelve true si los operandos no son iguales

!== Estrictamente " No igual a" (JavaScript 1.3)

> " Mayor que" devuelve true si el operador de la izquierda es mayor

que el de la derecha.

>= " Mayor o igual que " devuelve true si el operador de la izquierda es

mayor o igual que el de la derecha.

< " Menor que" devuelve true si el operador de la izquierda es menor

que el de la derecha.

&& " Y " Devuelve true si ambos operadores son true.

|| " O " Devuelve true si uno de los operadores es true.

! "No" Devuelve true si la negacin del operando es true.

Operadores especiales Operador Descripcin

(condicin) ?

trueVal :

falseVal

Asigna un valor especificado a una variable si la condicin es true,

por otra parte asigna un valor alternativo si la condicin es false.

New El operador new crea una instancia de un objeto.

This La palabra clave 'this' se refiere al objeto actual.

, El operador ',' evala los dos operados.

Delete El operador delete borra un objeto, una propiedad de un objeto, o

un elemento especificado de un vector.

Void El operador Void especifica una expresin que ser evaluada sin

devolver ningn valor.

Typeof Devuelve el tipo de dato de un operando.

Estructura de Control

Bucle For Primero inicializa la variable.


7 de 16 28/10/2013 01:27 p.m.

Despus si la condicin de repeticin es verdadera se ejecuta.

Y por ultimo despus se evala expresin de modificacin, la cual suele variar el valor de la variable inicializada al comienzo.

Se repite el bucle verificacin de condicin de repeticin, hasta que la condicin de repeticin sea falsa

for (i=0; i

- applet ...

- area ...

- form ...

+ button

+ checkbox

+ fileUpload

+ hidden

+ password

+ radio

+ reset

+ select ...

- options

+ submit

+ text

+ textarea ...

- image

- link ...

- plugin

+ frame

* navigator

Segn esta jerarqua, podemos entender el objeto rea (por ejemplo) como un objeto dentro del objeto document que a su vez est dentro del objeto

window.

La notacin '.' se utiliza para denotar a un objeto contenido dentro de otro. Por ejemplo: ventana.documento.formulario.caja_de_texto

En la mayora de los casos podemos ignorar la referencia a la ventana actual (window), pero ser necesaria esta referencia cuando estemos

utilizando mltiples ventanas, o cuando usemos frames. Cuando estemos usando un nico frame, podemos pues ignorar. Explcitamente la referencia

al objeto window, ya que JS asumir que la referencia es de la ventana actual.

Tambin podemos utilizar la notacin de array para referirnos a algn objeto, por ejemplo, cuando los objetos a usar no tienen nombre, como en este

caso: document.forms[0].elements[1];

AJAX Fundamentos


9 de 16 28/10/2013 01:27 p.m.

Utilizando el Objeto XMLHttpRequest Objeto XMLHttpRequest El objeto XMLHttpRequest es un elemento fundamental para la comunicacin asincrnica con el servidor. Este objeto nos permite enviar y recibir

informacin en formato XML y en general en cualquier formato. Primero se debe crear el objeto utilizando la sentencia new para instanciar objetos

en JavaScript.

Crear el Objeto Para la creacin de un objeto de la clase nativa XMLHttpRequest, se debe tener en cuenta el navegador. Internet Explorer implementa

XMLHttpRequest como un objeto Activex. Firefox, Safari y Opera implementan este objeto en forma nativa desde JavaScript. En el siguiente ejemplo

vemos cmo implementaremos el objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador donde se est ejecutando:

// Retorna el objeto para browsers Mozilla/Safari if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } // Retorna el objeto para browsers IE else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }La llamada a window.ActiveXObject puede retornar un objeto o null

Si la llamada a window.XMLHttpRequest falla entonces el navegador no estar disponible para utilizar AJAX. Si window.XMLHttpRequest existe

entonces se crear una instancia de XMLHttpRequest.

Propiedades de XHR Mtodo Descripcin

abort() Detiene el requerimiento

getAllResponseHeaders() Devuelve todas las respuestas

getResponseHeader(header) Devuelve un valor string con las respuesta especificada en elheader

open(metodo, url) Este mtodo configura la llamada al Servidor. El


10 de 16 28/10/2013 01:27 p.m.

parmetro mtodo es el modo en que se invoca elrequerimiento (GET o POST) y el parmetro url es ladireccin al servidor. Existe un tercer parmetro que es unvalor booleano y especifica el modo de la llamada, pordefecto es TRUE que significa asincrnico.

send(contenido) Este mtodo ejecuta la llamada al servidor. Si elrequerimiento fue declarado asincrnico, este mtodoretorna inmediatamente, de otra manera, espera hasta recibirla respuesta

setRequestHeader(header, value) Configura el header especificado para el valor provisto. Elmtodo open() debe ser ejecutado anteriormente

Las propiedades principales del objeto XMLHttpRequest son:

onreadystatechange: Almacena el nombre de la funcin que se ejecutar cuando el objeto XMLHttpRequest cambie de estado.

readyState: Almacena el estado del requerimiento hecho al servidor, pudiendo ser:

0 No inicializado (el mtodo open no a sido llamado)

1 Cargando (se llam al mtodo open)

2 Cargado (se llam al mtodo send y ya tenemos la cabecera de la peticin HTTP y el status)

3 Interactivo (la propiedad responseText tiene datos parciales)

4 Completado (la propiedad responseText tiene todos los datos pedidos al servidor)

responseText: Almacena el string devuelto por el servidor, luego de haber hecho una peticin.

responseXML: Similar a la anterior (responseText) con la diferencia que el string devuelto por el servidor se encuentra en formato XML.

Mtodos de XHR Propiedades Descripcin

onreadystatechange Esta propiedad recibe la llamada a una funcin en JavaScriptla cual se dispara en cada cambio de estado.

readyState El estado del requerimiento. Los cinco posibles valores son:0= no inicializado (uninitialized), 1= cargando (loading), 2=cargado (loaded), 3= interactivo (interactive) y 4 = completo(complete)


11 de 16 28/10/2013 01:27 p.m.

responseText La respuesta desde el servidor como texto

responseXML La respuesta del servidor como XML. Este objeto puede serparseado y examinado como un objeto DOM

status El HTTP status code del el servidor. Este puede ser200= OK, 404 no se encontr (not found), etc

statusText La versin texto del HTTP status code (OK, Not Found,etc)

Los mtodos principales del objeto XMLHttpRequest son:

open: Abre un requerimiento HTTP al servidor.

send: Enva el requerimiento al servidor.

Interaccin Diagrama del circuito AJAX


12 de 16 28/10/2013 01:27 p.m.

El cliente dispara el evento AJAX.

Una instancia del objeto XMLHttpRequest es creada. Usando el mtodo Open() se configura la llamada al servidor.

Aclaracin: En el siguiente ejemplo se utiliza el mtodo Open especificando solo los primeros 2 parmetros. El tercer parmetro de tipo Boolean,

hace referencia al modo en el que se ejecuta el mtodo, Sincrnico o Asincrnico. Si no lo especificamos por defecto toma el valor en TRUE que

significa Asincrnico. Luego ms abajo en este mismo captulo aclaramos la diferencia entre uno y otro.

var xmlHttp;

function validateEmail(){ // Retorna el objeto para browsers Mozilla/Safari if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } // Retorna el objeto para browsers IE else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");


13 de 16 28/10/2013 01:27 p.m.

} var email = document.getElementById("email"); var url = "validate.php?email=" + escape(email.value);

xmlHttp.open("GET", url); xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);}El requerimiento es tomado por el servidor. Este ltimo debe llamar a un servlet o un script CGI o cualquier tecnologa que se ejecute del lado de

servidor.

El servidor puede hacer cualquier cosa que se desee incluyendo acceso a datos o a otro sistema.

El requerimiento es devuelto al navegador

La propiedad onreadystatechange obtiene el puntero a una funcin JavaScript (en este ejemplo a la funcin callback()). Esta es llamada cada vez que

cambia el estado interno del objeto XMLHttpRequest.

El objeto XMLHttpRequest llama la funcin callback(). Esta funcin chequea el estado a travs de la propiedad readyState

function callback(){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); } }}

Sincronismo en AJAX

Donde se especifica? Es en el mtodo Open el tercer parmetro. El mismo es un parmetro Boolean. True: significa Asincrnica y false: Sincrnica.

Que significa Asincrnico? En la definicin de las siglas A.J.A.X. encontramos que la primer letra A significa Asynchronous el resto de las letras referencian a Javascript and

XML. Pero a que se refiere exactamente con Asincrnico?

La definicin de Asincrona hace referencia al suceso que no tiene lugar en total correspondencia temporal con otro suceso. En otras palabras significa


14 de 16 28/10/2013 01:27 p.m.

que una vez solicitada la peticin AJAX, osea cuando se ejecuta el mtodo Send(), el programa no se detendr a esperar recibir la respuesta que

vendr del servidor sino que contina su ejecucin y la respuesta puede ejecutarse en paralelo en cualquier momento.

La principal ventaja que una peticin AJAX pueda ser asincrnica, es el efecto de total indiferencia que genera en el usuario final ya que jams se

entera de las comunicaciones que realiza la pgina con el servidor mientras navega por el sitio. Ya que en ningn momento este debe esperar a que

termine de cargar una peticin AJAX mientras opera con la pgina. En conclusin, las comunicaciones XHR se pueden realizar en paralelo y lograr que

sean totalmente transparentes ante el usuario final.

Un ejemplo tpico donde podemos observar el asincronismo, son aquellas pginas donde creamos una cuenta de usuario y en el mismo formulario de

carga de datos, nos puede alertar el sitio que el username que elegimos ya esta ocupado por otro usuario. Este mensaje de alerta puede aparecer en

cualquier mientras estamos cargando otros campos del mismo formulario de registracin. Esto demuestra que el usuario no se debe detener a esperar

que la peticin AJAX compruebe si el username esta disponible o no, sino que el usuario continua con la carga de datos para la inscripcin.

Que significa Sincrnico? Es justamente lo opuesto a lo explicado en el ejemplo anterior. En este caso la ejecucin de la pgina (el javascript) se queda esperando que llegue la

respuesta del servidor.

Esta opcin se utiliza para casos muy particulares. Generalmente siempre se utiliza la opcin de asincrnico, es por eso que en el mtodo Open del

objeto XHR si no especificamos por defecto la peticin AJAX se ejecuta de manera Asincrnica.

// Creamos la variable parametro

parametro = Datos pasados por POST;

oXML = AJAXCrearObjeto(); // Preparamos la peticin con parametros

oXML.open(GET,'pagina.php, false); // Realizamos la peticin

oXML.send(null); // Devolvemos el resultado

alert( oXML.responseTex )t;

Como vemos, toda la parte dedicada a comprobar el estado en el que se encuentra la comunicacin, ya no es necesaria, puesto que ahora se trata de

una llamada sncrona, de modo que hasta que no se reciban los datos del servidor no se va a continuar con la ejecucin. Con la eliminacin de ese

fragmento de codigo se consigue que las llamadas sncronas funcionen correctamente.- Top


15 de 16 28/10/2013 01:27 p.m.

EducacionIT

Me gusta

A 18 934 personas les gusta EducacionIT.

Plug-in social de Facebook

Comentario sobre Contenido de la Clase

Guardar Comentario


16 de 16 28/10/2013 01:27 p.m.

ajax - clase 1

Documents