introduccion a ajax

2. Aplicaciones Ricas de Internet
 Es el cruce entre aplicaciones web y las
escritorio, que deriva en cierto comportamiento
hacia el cliente, que se comunica con el servidor
solo en casos necesarios.
Aplicaciones Ricas
(Escritorio)
Aplicaciones Ricas de
Internet
Aplicaciones Web
(Antiguas)
Complicadas de distribuir
y actualizar.
No son multiplataforma.
Experiencia rica para el
usuario
Fáciles de distribuir y
actualizar.
Productividad del
programador.
Respuesta rápida al
usuario.
Trabajos fuera de línea.
Multiplataforma
Demora y esperas al
usuario
Limitada experiencia de
usuario
Complejo desarrollo
100% en línea

3. Tipos de aplicación RIA
 RIA Completas
 Se utiliza por completo el nuevo modelo RIA que consiste
en tener una sola interfaz que se actualiza según la
interacción del usuario.
 Maneja una o dos direcciones para todo el sitio web

4.  RIA Embebidas
 Es una mezcla entre aplicaciones clásicas y las
web 2.0, manejan hipervínculos interconectados,
hasta llegar a un punto en el que, por funcionalidad,
se convierten en un RIA, mejorando la experiencia
de usuario en ese punto.
 Gap es un ejemplo de RIA Embebido en el que
recién llegado al listado de productos se encuentra
la disponibilidad de trabajar con controles ricos en
el canasto de compras.

5. Web 2.0
 Modelo de aplicaciones web 1.0
 Modelo de aplicaciones web 2.0
Usuario
Servido
r
Usuario
Motor RIA
Servidor

6. AJAX
 Asynchronous JavaScript and XML (JavaScript asincrónico
con XML ).
 Utiliza:
 HTML o XHTML y CSS como lenguaje de estructura y diseño
 JavaScript como lenguaje de programación.
 Modelo DOM (Document Object Model) para trabajar con la
estructura del sitio.
 XML como uno de los formatos de transporte de datos desde y
hacia y servidor
 PHP, ASP o Java como lenguaje de servidor y acceso a la base
de datos.
 Usa tecnología asíncrona, los datos adicionales se solicitan
al servidor y se cargan en segundo plano sin interferir con la
visualización ni el comportamiento de la pagina.

7. Entorno de trabajo
 Aptana Studio
 Herramienta especifica para aplicaciones AJAX.
 Permite desarrollar, visualizar y depurar
aplicaciones bajo JavaScript y soporta compleción
de código de nuestro trabajo y de la mayoría de las
librerías de AJAX en el mercado.
 NetBeans
 Es una buena alternativa para desarrollar
aplicaciones AJAX por su soporte de JavaScript
apartir de la versión 6.5
 Nos ayuda a completar código y encontrar error
mientras vamos codificando.

8.  Visual Studio
 Posee un motor de edicion de JavaScript y AJAX
en su modulo de desarrollo de sitios web (Visual
Web Developer)
 Posee soporte para el desarrollo de aplicaciones
AJAX

9. ¿Es necesario un servidor web?
 AJAX no requiere un lenguaje de servidor, dado
que puede leer XML y archivos estáticos sin
necesidad de generar dinámicamente con algún
lenguaje como ASP o PHP.
 Por seguridad, la mayoría de los navegadores no
permite hacer peticiones AJAX si se esta
trabajando como sistema de archivos local

10.  Aptana Development Server
 Se activa por un puerto predefinido, por lo que la
URL de nuestras aplicaciones serán del tipo
http://localhost:9999/nombredelproyecto
 Es importante destacar que este servidor no
soporta la ejecución de ningún script de servidor.
 Apache
 Si se utiliza java del lado del servidor, con apache
sera suficiente, al igual que cualquier otro servidor
web que permita levantar los archivos de nuestro
sitio mediante la url web

11. El objeto XMLHttp
 El objeto XMLHttp es el corazón de toda
aplicación AJAX, dado que es el que
técnicamente permite realizar una petición con el
servidor en forma asincrónica y sin cambiar de
URL. Es un activex de Microsoft
 XMLHttp es nato de IE, por ello los navegadores
competencia implementaron un objeto clon
denominado: XMLHttpRequest, es nativo de
javascript.

12. Modo de uso
 Instanciar el objeto
 Configurar y abrir la petición
 Definir una función JavaScript que se encargue
de administrar la evolución de la petición(dada su
asincronia).
 Enviar la petición y los datos al servidor
 En la función definida antes, manipular el estado
de la petición y, en el caso correcto recibir los
datos y actuar en consecuencia con ellos, según
lo que hubiera que hacer

14. Instanciación
 En navegadores IE
 Objeto = new ActiveXObject(“nombreclase”);
 En este caso el objeto XMLHttp lleva distintos
nombre de clases
 Objeto = new ActiveXObject(“Microsoft.XMLHttp”);
 Objeto = new ActiveXObject(“MSXML2.XMLHttp”);
 Objeto = new ActiveXObject(“MSXML2.XMLHttp.3.0”);
 Objeto = new ActiveXObject(“MSXML2.XMLHttp.4.0”);
 Objeto = new ActiveXObject(“MSXML2.XMLHttp.5.0”);
 En navegadores no IE
 Objeto = new XMLHttpRequest();

15. Instanciar objeto en distintas formas
function ConstructorXMLHTTPRequest()
{
if(window.XMLHttpRequest){ return new
XMLHttpRequest(); }
else if(window.ActiveXObject)
{
var versionesObj = new array(
'Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLH
TTP');
for (var i=0; i < versionesObj.length; i++)
{ try {
return new ActiveXObject(versionesObj[i]);
}
catch (e) { }
}
}
throw new Error("No se puede crear el objeto

16. <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function solicitar(){
var peticion=null;
peticion = ConstructorXMLHTTPRequest();
if (peticion)
{
peticion.open('get','file.txt',false);
peticion.send(null);
document.getElementById('texto').innerHTML = peticion.responseText;
}
}
</script>
</head>
<body>
<p id="texto"></p>
<br><br>
<input type="button" onclick="solicitar()" value="obtener texto">
</body>
</html>

17. Métodos
 Open, configura la petición y la deja lista para enviarla:
peticion.open(“get”,”url”,true)
 Send, envia la peticion al servidor, una vez que se
configura con el metodo open, se puede usar el valo
especial null para definirlo
peticion.send(null)
método Métodos http, podemos usar GET o
POST
URL String con la url que queremos invocar al
servidor, si vamos a enviar datos vía GET,
debemos adjuntarlos en la url
Asincronismo Es el valor lógico que indica que la
petición sea asincrónica (true) o
sincrónica (false). Una aplicación AJAX,
por definición, es siempre asincrónica

18.  Abort, aborta una peticion en curso, ya no se
avisara cuando lleguen los datos y en el
navegador se suspenderan todas las acciones
que se estaban utilizando para enviar datos al
servidor:
peticion.abort()

19. Propiedades
 readyState, es una propiedad de solo lectura y
devuelve un código entre 0 y 4 que indica el
estado de la petición:
If(peticion.readyState==4) {
//la petición se termino
}Codigo Estado Descripcion
0 Sin inicializar El requerimiento solo fue instanciado
1 Cargado El requerimiento se configuro (con open)
pero todavía no se envió
2 Cargado El requerimiento se envió o se esta
enviando, aunque todavía no tenemos
respuesta del servidor.
3 Interactivo El servidor ya respondió la petición, ya
tenemos disponibles las cabeceras pero
el contenido todavía no se esta cargando

20.  Status, devuelve el código HTTP que nos devolvió
el servidor:
if(peticion.status==200) {
//los datos llegaron bien y están
disponibles }Código Descripción
200 La petición se pudo procesar en forma correcta
404 La url que peticionamos no existe
500 Error interno del servidor. Puede indicarnos que el servidor
esta saturado o que hay algún error en el script ejecutando
en el servidor.
400 La petición enviada al servidor es errónea. hay algún
inconveniente con las cabeceras o con la información post
enviada.
403 No tenemos permiso de acceder al recurso en el servidor
405 No se acepta el método. Hay un problema al definir los
métodos post o get
414 La url es muy larga. Puede producirse cuando se envian
muchos datos por get. En este caso, se deben cambiar el

21.  statusText, propiedad de solo lectura, devuelve un
texto descriptivo del status, así recibiremos un string
que contiene OK cuando el status sea 200.
 responseText, propiedad de solo lectura, devuelve un
string con el contenido del cuerpo devuelto por el
servidor ante la petición. Solo se tiene seguridad de
que estos datos están correctos cuando readyState
sea 4 y status sea 200.
 responseXML, si la respuesta del servidor es un XML
valido, recibe el objeto XML nativo en JavaScript y
luego procesarlo por los métodos de DOM como si se
tratara de la misma pagina HTML.
 onreadystatechange, se utiliza antes de enviar la
petición, debe asignarse a una función como el
encargado de procesar la petición. La propiedad
onreadystatechange, debe asignarse a una función que
se ejecutara de manera automática cada vez que la