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 <script> en un documento HTML (se pueden incluir tantas directivas <script> como se
quiera en un documento). El formato es el siguiente:
<script language="Javascript 1.3">
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.
<script language="JavaScript" src ="archivo.js"> </script>

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:
<input type="submit" onclick="alert('Acabas de hacer click');return false;" value="Click">
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.
<= "Menor o igual que" devuelve true si el operador de la izquierda es
menor o igual que el de la derecha.
Operadores Lgicos
Los operadores Lgicos se utilizan para combinar mltiples comparaciones en una expresin condicional. Un operador lgico toma dos operandos cada
uno de los cuales es un valor true o false y devuelve un valor true o false.
Operador Descripcin
6 de 16 28/10/2013 01:27 p.m.
&& " 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<=10; i++) {
sentencias...
}
Bucle While
Mientras la condicin sea cierta se ejecutan las sentencias.
while (condicin) {
sentencias
}
Bucle do While
Se ejecuta siempre la primera vez las sentencias
Luego se vuelven a ejecutar una o ms veces segn la condicin sea cierta o no.
do {
sentencias
} while (condicin);

Objetos del Navegador
Jerarquas
En este punto comienza la descripcin de las propiedades y los mtodos de los objetos del navegador.
Entre los objetos del navegador se encuentra una jerarqua que representan, una relacin "contenedor - contenido".
De forma esquemtica, podemos representar la jerarqua de esta manera (al lado est la directiva HTML con que se incluyen en el documento objetos
de este tipo, cuando exista esta directiva):
* window
+ history
+ location
+ document <BODY> ... </BODY>
- anchor <A NAME="..."> ... </A>
8 de 16 28/10/2013 01:27 p.m.
- applet <APPLET> ... </APPLET>
- area <MAP> ... </MAP>
- form <FORM> ... </FORM>
+ button <INPUT TYPE="button">
+ checkbox <INPUT TYPE="checkbox">
+ fileUpload <INPUT TYPE="file">
+ hidden <INPUT TYPE="hidden">
+ password <INPUT TYPE="password">
+ radio <INPUT TYPE="radio">
+ reset <INPUT TYPE="reset">
+ select <SELECT> ... </SELECT>
- options <INPUT TYPE="option">
+ submit <INPUT TYPE="submit">
+ text <INPUT TYPE="text">
+ textarea <TEXTAREA> ... </TEXTAREA>
- image <IMG SRC="...">
- link <A HREF="..."> ... </A>
- plugin <EMBED SRC="...">
+ frame <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 el
header
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 el
requerimiento (GET o POST) y el parmetro url es la
direccin al servidor. Existe un tercer parmetro que es un
valor booleano y especifica el modo de la llamada, por
defecto es TRUE que significa asincrnico.
send(contenido) Este mtodo ejecuta la llamada al servidor. Si el
requerimiento fue declarado asincrnico, este mtodo
retorna inmediatamente, de otra manera, espera hasta recibir
la respuesta
setRequestHeader(header, value) Configura el header especificado para el valor provisto. El
mtodo 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 JavaScript
la 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 ser
parseado y examinado como un objeto DOM
status El HTTP status code del el servidor. Este puede ser
200= 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.
<script>
// 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;
</script>
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

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ajax - Clase 1

Загружено:

Авторское право:

Доступные форматы

Clases

Objetivos Contenido Laboratorio Descargas Examen Resultados Faq

Вам также может понравиться