Prof. Braulio José Solano Rojas

AJAX
CI-2413 Desarrollo de aplicaciones
para Internet
Prof. Braulio José Solano Rojas
ECCI, UCR
AJAX
●
●
Es un conjunto de técnicas que ya habían sido
utilizadas desde 1998 por Microsoft.
El término fue acuñado por Jesse James Garret
en el 2005:
●
http://www.adaptivepath.com/ideas/ajax-new-approa
ch-web-applications/
AJAX: Ejemplos
AJAX: Más ejemplos
●
http://maps.google.com/
●
http://drive.google.com/
AJAX: Frameworks
●
Prototype
●
●
●
ASP.NET AJAX
●
●
●
Creada en el 2005, originalmente el AJAX de Rails.
http://prototypejs.org/
Anteriormente conocida como ATLAS.
http://www.asp.net/ajax
Google Web Toolkit (Java)
●
http://www.gwtproject.org/
AJAX: Frameworks
●
jQuery
●
●
Dojo
●
●
http://jquery.com/
http://dojotoolkit.org/
AjaxTags (JSP)
●
http://ajaxtags.sourceforge.net/
AJAX: Frameworks
●
MooTools
●
●
Rialto
●
●
http://mootools.net/
http://www.improve-foundations.org/factory/projects/r
ialto/wiki
SAJAX
●
http://www.modernmethod.com/sajax/
AJAX: Frameworks
●
AngularJS
●
●
https://angularjs.org/
Ext JS
●
http://www.sencha.com/products/extjs/
AJAX: Notas sobre los frameworks
●
●
●
Al día de hoy, el framework JavaScript más
popular es jQuery. No es necesariamente el
mejor (argumentum ad populum). Actualmente
existen otros con “momento” como AngularJS.
El autor de estas filminas prefiere Prototype a
jQuery
.
Varias de estas bibliotecas JavaScript están
disponibles en:
●
https://developers.google.com/speed/libraries/devg
uide
AJAX: Técnicas utilizadas
●
●
●
Presentación basada en normas utilizando
XHTML y CSS.
Despliegue dinámico e interacción utilizando el
Modelo de Objetos del Documento.
Intercambio de datos y manipulación utilizando
XML y XSLT.
AJAX: Técnicas utilizadas
●
●
Recuperación de datos asincrónicamente
utilizando XMLHTTPRequest.
JavaScript para unir todo lo anterior.
AJAX
AJAX
XMLHTTPRequest
●
●
Normalmente:
var req = new XMLHttpRequest();
En Microsoft Explorer:
var req = new
ActiveXObject("Microsoft.XMLHTTP");
XMLHTTPRequest: Métodos
Método
Descripción
abort()
Stops the current request
getAllResponseHeaders()
Returns complete set of headers
(labels and values) as a string
getResponseHeader("headerLabel")
Returns the string value of a single
header
labelopen("method", "URL"[,
asyncFlag[, "userName"[,
"password"]]])
Assigns destination URL, method,
and other optional attributes of a
pending
requestsend(content)
Transmits the request, optionally with
postable string or DOM object
datasetRequestHeader("label",
"value")
Assigns a label/value pair to the
header to be sent with a request
JSON en lugar de XML
●
●
Es posible con algunos de estos frameworks
enviar Objetos en Notación JavaScript (JSON)
en lugar de XML.
Sin embargo, es recomendable evitarlo por
razones de seguridad para prevenir
inyecciones de código JavaScript.
Carga de archivos
●
●
●
No es posible hacer carga de archivos con
AJAX.
Es posible utilizar un iframe y enviar el archivo
al iframe.
Algunos navegadores contemporáneos
implementan el File API (
http://www.w3.org/TR/FileAPI/).
Recursos
●
●
●
●
http://www.sergiopereira.com/articles/prototype.
js.html
http://www.prototypejs.org/
http://www.fiftyfoureleven.com/resources/progr
amming/xmlhttprequest
http://www.slideshare.net/remy.sharp/prototypejquery-going-from-one-to-the-other
¡Gracias por su atención!
¿Preguntas?