AJAX
Asynchronous JavaScript and XML
1
AJAX
AJAX=Asynchronous JavaScript and XML
AJAX se basa en los siguientes estándares:
• JavaScript
• XML
• XHTML
AJAX
AJAX no es un lenguaje de programación, es una técnica para crear mejores aplicaciones web.
AJAX implica un intercambio de datos entre el browser y el servidor sin necesidad de recargar la página. Las páginas web pueden solicitar y recibir pequeñas porciones de información en vez de páginas completas.
La comunicación asincrónica remplaza la comunicación sincrónica petición/Respuesta:
• Un usuario puede continuar usando la aplicación mientras el programa cliente solicita información al servidor como un tarea de fondo (background).
• Separación de los aspectos de desplegar información y obtención de la información.
3
AJAX
La pantalla se actualiza parcialmente en función de los eventos y los datos proporcionados por el usuario. Los datos que no cambian permanecen estables en la pantalla.
Con AJAX las aplicaciones web pueden responder de una manera más rápida y amigable.
En AJAX, los programas JavaScript del cliente se comunican
directamente con el servidor mediante el objeto XMLHttpRequest.
AJAX es independiente de la tecnología utilizada en el servidor.
Comunicación Sincrónica
browser
server-side
time
user activity user activity User activity
server processing server processing
browser http request server-side systems html + css data
1 2
4
5 3
1
2
3
4 5
La operación del usuario se interrumpemientras se obtienen mas datos.
5
Comunicación Asincrónica
La operación del usuario no se interrumpemientras se obtienen mas datos.
Before:
browser
server-side
time
user activity user activity User activity
server processing server processing
Browser UI:
server-side Ajax:
time
El objeto XmlHttpRequest
7
Constructor:
client = new XMLHttpRequest()
Otros métodos
Method Description
open(method, url, async) specifies the URL and HTTP request method
send()
send(postData)
sends the HTTP request to the server, with optional POST parameters
abort() stops the request
getAllResponseHeaders(), getResponseHeader(name), setRequestHeader(name, value)
for getting/setting raw HTTP headers
Propiedades
9
Property Description
responseText the entire text of the fetched page,
as a string
responseXML the entire contents of the fetched
page, as an XML document tree
status the request's HTTP status code (200
= OK, etc.)
statusText HTTP status code text (e.g. "Bad
Request" for 400) timeout
how many MS to wait before giving up and aborting the request
(default 0 = wait forever)
readyState
request's current state (0 = not initialized, 1 = set up, 2 = sent, 3 = in progress, 4 = complete)
Eventos
Event Description
load occurs when the request is
completed
error occurs when the request fails
timeout occurs when the request times out
abort occurs when the request is
aborted by calling abort()
El proceso AJAX
• JavaScript
– Definir un objeto para enviar peticiones HTTP.
– Iniciar la petición
• Obtener el objeto XMLHTTPRequest
• Designar una función que reciba la respuesta (handler)
– atributo de onreadystatechange
• Iniciar la petición GET o POST
• Enviar los datos – Manejar la respuesta
• Esperar por “readyState” 4 y “HTTP status” 200
• Extraer el texto de la respuesta mediante “responseText” o
“responseXML”
• Usar el resultado para cambiar la página desplegada
11
El proceso AJAX
• HTML
– Cargar el Script
– Designar el evento que iniciará la petición
– Etiquetar (id) los elementos que serán accesados por el Script
Definir un objeto REQUEST
Versión para Internet Explorer 5 y posterior
Versión para Netscape, Firefox, y Opera (Netscape 5 y posterior) Falla en browsers antiguos
ó no estándares var request;
function getRequestObject() { if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else if (window.XMLHttpRequest) { return(new XMLHttpRequest());
} else {
return(null);
} }
Tomado de: http://courses.coreservlets.com 13
Iniciar la petición versión 1
function sendRequest() {
request = getRequestObject();
request.onreadystatechange = handleResponse;
request.open("GET", "message-data.html", true);
request.send(null);
}
Función designada para manejar la respuesta
Petición asincrónica, no esperar la respuesta
Datos POST
(null en caso de GET)
Manejar la respuesta versión 1
15
function handleResponse() { if ((request.readyState == 4) &&
(request.status == 200)) { alert(request.responseText);
} }
Indica que el servidor ya regresó la respuesta
Texto regresado por el servidor Pop up
Tomado de: http://courses.coreservlets.com
Estatus OK
Página XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax: Simple Message</title>
<script src="show-message.js"
type="text/javascript"></script>
</head>
<body>
<center>
<table border="1" bgcolor="gray">
<tr><th><big>Ajax: Simple Message</big></th></tr>
</table>
<p/>
<form action="#">
<input type="button" value="Show Message“ onclick="sendRequest()"/>
</form>
Escribiendo diréctamente en la página XHTML
17
…
<form action="#">
<input type="button" value="Show Message"
onclick="sendRequest()"/>
</form>
<div id="message"></div>
…
function handleResponse() { if ((request.readyState == 4) &&
(request.status == 200)) {
document.getElementById(“message”).innerHTML=request.responseText;
} }
Cambio en la página
Cambio en el script
Iniciar la petición versión 2
function sendRequest() {
request = getRequestObject();
request.onload = handleResponse;
request.open("GET", "message-data.html", true);
request.send(null);
}
Función designada para manejar la respuesta
Petición asincrónica, no esperar la respuesta
Datos POST
(null en caso de GET)
Manejar la respuesta versión 2
19
function handleResponse() { if (request.status == 200) {
alert(request.responseText);
} }
Texto regresado por el servidor
Pop up
Tomado de: http://courses.coreservlets.com
Estatus OK
Ejemplo usando POST
Xhr = new XMLHttprequest();
str = document.getElementById('txtSearch').value;
xhr.open("POST", 'searchSuggest.php', true);
xhr.onload = handleSearchSuggest;
data = new FormData();
data.append("search", str);
xhr.send(data);
