Ajax

Integrantes:

Jose Mejía Cabrera

Elizabeth Cuentas
Números
Emmanuel Sierra
Quiroz
¿ Que es
Ajax ?
Ajax acrónimo
de ”synchronous JavaScript And XM
L” , es un conjunto de técnicas que se
usan para lograr un objetivo y se basa
en lenguajes ya existentes como
JavaScript.

Podríamos dar esta definición de Ajax:

“Ajax es un conjunto de métodos y
técnicas que permiten intercambiar
datos con un servidor y actualizar
partes de páginas web sin necesidad
de recargar la página completamente”.
 Aunque Ajax se pensó inicialmente para transferir datos en un solo formato (XML), actualmente Ajax
permite la transmisión de datos en múltiples formatos: XML, JSON, EBML, texto plano, HTML, etc.

¿QUÉ ES XML Y QUÉ ES JSON?

Ejemplo datos en Ejemplo datos en
formato XML formato JSON
XML (extensible markup language) es un lenguaje de etiquetas que se usa para <Curso> {
<Titulo>JavaScript desde "Curso": {
almacenar y enviar información. No vamos a estudiar XML, simplemente cero</Titulo> "Titulo": "JavaScript desde
<Autores> cero",
pondremos un ejemplo para hacernos una idea de qué son datos en formato
<Nombre>César "Autores": {
XML. XML se usa para múltiples aplicaciones. Krall</Nombre> "Nombre": [
<Nombre>Bill "César Krall",
JSON (JavaScript Object Notation) es un formato para el intercambio de datos Clinton</Nombre> "Bill Clinton"
</Autores> ]
que se usa para almacenar y enviar información, basado en la notación literal <WebPublicacion> },
<Url>aprenderaprogramar. "WebPublicacion": {
de objetos de JavaScript. No vamos a estudiar JSON, simplemente pondremos
com</Url> "Url":
un ejemplo para hacernos una idea de qué son datos en formato JSON. JSON <PageRank>10</PageRank "aprenderaprogramar.com",
> "PageRank": "10"
se usa como alternativa al XML en AJAX. </WebPublicacion> }}}
</Curso>
¿ Que nos permite hacer
Ajax?
• Actualizar una parte de la pagina con
información que se encuentra en el
servidor sin tener que refrescar
completamente la pagina.
• Enviar información al servidor, de esta
manera se pueden desarrollar webs
altamente interactivas, ahorrando ancho
de banda y recargas de páginas.
• Las aplicaciones son mas interactivas.
• Responde a las interacciones del usuario
más rápidamente.
• Se reduce el tamaño de la información
intercambiada.
Breve Historia de Ajax

Fue creado por Jesse James Garrett.

La historia de AJAX está íntimamente

relacionada con un objeto de programación
llamado XMLHttpRequest. El origen de este
objeto se remonta al año 2000, con productos
como Exchange 2000, Internet Explorer 5 y
Outlook Web Access.
Tecnologías • Document
Empleadas en Object Model
Ajax (DOM)

•
• JavaScript XMLHttpReques
t
 Definición de las tecnologías

XHTML (o HTML) :

HTML, siglas en inglés de HyperText Markup Language (lenguaje de marcas de

hipertexto), hace referencia al lenguaje de marcado para la elaboración de paginas web.

CSS :

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.

es un lenguaje que describe la presentación de los documentos estructurados en hojas de

estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar

un documento en pantalla.
JavaScript:

JavaScript, es uno de los más potentes e importantes

lenguajes de programación en la actualidad, por tres
enfoques claros: es útil, práctico y está disponible en
cualquier navegador web.

Document Object Model (DOM) :

El Modelo de Objetos del Documento (DOM) es una

interfaz de programación de aplicaciones (API) para
documentos HTML y XML. Define la estructura lógica
de los documentos y el modo en que se accede y
manipula un documento.
 XMLHttpRequest

Es un API que puede invocarse desde JavaScript, JScript, VBScript y otros lenguajes de script incluidos
en un navegador web, que se usa para transferir y manipular datos XML hacia y desde el navegador web ,
estableciéndose un canal de conexión independiente entre el lado del cliente de la página web y el servidor.

Los datos devueltos por la llamada a XMLHttpRequest serán, por lo general, obtenidos desde bases de datos
en el servidor. La llamada puede devolver datos en XML o, más generalmente, en cualquier otro formato
textual, como JSON o incluso texto plano .
XMLHttpRequest es una parte fundamental de la técnica de desarrollo web conocida como AJAX, y es usada
en muchos sitios web para implementar aplicaciones dinámicas e interactivas. Ejemplos de aplicaciones que
usan XMLHttpRequest incluyen el servicio Gmail de Google, Meebo, Virtual de Microsoft, y los mapas de
MapQuest.
¿Cómo funciona estas tecnologías en Ajax ?

XHTML(O HTML) Y CSS

Con ellas crea una presentación basada en estándares, con

lo cual no tendríamos complicaciones a la hora de trabajar.
DOM

Para la interacción y manipulación de la presentación.

XMLHttpRequest

Es el núcleo de Ajax y que nos será útil para el intercambio

asíncrono de información.
JavaScript

Nos proporciona la posibilidad de unir todas estas

tecnologías
 Funcionamiento de Ajax

1. Usuario provoca un evento .

2. Se crea y configura un objeto XMLHttpRequest.

3. El objeto XMLHttpRequest realiza una llamada al servidor.

4. La petición se procesa en el servidor.

5. El servidor retorna un documento XML que contienen el resultado.

6. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado

7. Se actualiza el DOM de la página asociado con la petición con el resultado devuelto

 Usos de Ajax
•Validación de datos de formularios en tiempo real:

Identificadores de usuario, N.º de serie, códigos postales u otro código especial que necesite validación en el

lado del servidor antes de ser enviado el formulario.

• Autocompletado:

Direcciones de correo, nombres, ciudades

• Operaciones de detalle:

Obtener información más detallada de un producto

• GUI avanzadas:

Controles en árbol, menús, barras de progreso

 Usos de Ajax

• Refresco de datos:

• Notificaciones del servidor:

• Actualizar o eliminar registros:

• Expandir formularios web:

• Devolver peticiones simples de búsqueda:

• Editar árboles de categorías

Ventajas

 Utiliza tecnologías ya existentes.

 Soporta la mayoría de los
navegadores modernos.
 La experiencia de usuario en la
navegación es mucho más rica. Ya no
se refresca la pagina constantemente
al interactuar con ella.
 Portabilidad (no requiere plugin como
Flash y Applet de Java).
 Mayor velocidad, el usuario al hacer
un pedido(request) al servidor, no se
envia toda la pagina .
 La página se asemeja a una
aplicación de escritorio.
Desventajas
• Problemas con navegadores antiguos que no
implemente esta tecnología.
• No funciona si el usuario tiene desactivado
el JavaScript en su navegador.
• Falta de integración con el botón retroceder
del navegador.
• Requiere programadores que conozcan
todas las tecnologías que intervienen en
Ajax.
• Si se guarda en favoritos no necesariamente
al visitar nuevamente el sitio se ubique
donde nos encontrábamos al grabarla.
• Es posible que páginas con Ajax no piedad
funcionar en teléfonos móviles ,PDA u otros
aparatos.
Navegadores Soportados

 Microsoft Internet Explorer 5.0

• Navegadores basados en Gecko
(versión 7.1): Mozilla, Mozilla Firefox,
SeaMonkey, Camino, Flock, Epiphany,
Galeon y Netscape
• Navegadores con API KHTML (versión
3.2): Konqueror 3.2, Safari 1.2
• Opera 8.0

Navegadores disponibles para de

teléfonos móviles:
• Opera Mobile Browser versión 8.0
 • Navegador para S60 de Nokia
basado en Safari y API KHTML
 • Google Suggest
• Google Maps (http://www.google
Aplicaciones que • Gmail
• Gmail: (http://maps.googl .com/webhp?
Utilizan Ajax (http://gmail.com)
e.com/) complete=1&hl=e
n)

• Windows Local
Live(antes MSN Virtual
•Amazon:
Earth,
•
• Google • Microsoft: (http://www.a9.co
http://local.live.com)
Google •
Calendar(http://www.google.com/calendar/) • Windows
Windows Live
Live Mail
Mail (http://mail.live.com)
(http://mail.live.com)
Calendar(http://www.google.com/calendar/)
m)
•Amazon Maps
(http://maps.a9.com/)

•HousingMaps
•HousingMaps
(http://www.housingmaps.
(http://www.housingmaps.
com/),
com/), con
con Google
Google Maps
Maps
•Nuevo
•Nuevo Yahoo!
Yahoo! Mail
Mail
Ejemplo con
método GET
Ejemplo con
método POST