PDF de programación - AJAX Asynchronous JavaScript and XML

AJAX

Asynchronous JavaScript and XML

AJAX

AJAX=Asynchronous JavaScript and XML

AJAX se basa en los siguientes estándares:

• JavaScript

• XML

• XHTML

• CSS

1

2

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.

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.

3

4

Comunicación Sincrónica

La operación del usuario se interrumpe mientras se obtienen mas datos.

browser

user activity

1

2

server-side

user activity

5

User activity

time

4

3

server processing

server processing

1

browser

5

http request

2

4

html + css data

server-side systems

3

Comunicación Asincrónica

La operación del usuario no se interrumpe mientras se obtienen mas datos.

Before:

Browser
UI:
browser

Ajax:

server-side

server-side

user activity

user activity

User activity

time

time

server processing

server processing

server processing

5

6

El objeto XmlHttpRequest

Constructor:

client = new XMLHttpRequest()

7

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

8

Property

responseText

responseXML

status

statusText

timeout

readyState

Event

load

error

timeout

abort

Propiedades

Description

the entire text of the fetched page,
as a string

the entire contents of the fetched
page, as an XML document tree

the request's HTTP status code (200
= OK, etc.)

HTTP status code text (e.g. "Bad
Request" for 400)

how many MS to wait before giving
up and aborting the request
(default 0 = wait forever)

request's current state (0 = not
initialized, 1 = set up, 2 = sent, 3 = in
progress, 4 = complete)

9

Eventos

Description

occurs when the request is
completed

occurs when the request fails

occurs when the request times out

occurs when the request is
aborted by calling abort()

loadstart, loadend,
progress, readystatechange

progress events to track a request
in progress

10

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

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

11

12

Definir un objeto REQUEST

var request;

function getRequestObject() {

if (window.ActiveXObject) {

return(new ActiveXObject("Microsoft.XMLHTTP"));

} else if (window.XMLHttpRequest) {

return(new XMLHttpRequest());

} else {

return(null);

}

}

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

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

Datos POST
(null en caso de GET)

Petición asincrónica, no
esperar la respuesta

URL del recurso en
el servidor

Tomado de: http://courses.coreservlets.com

14

Manejar la respuesta versión 1

function handleResponse() {

if ((request.readyState == 4) &&

(request.status == 200)) {

Indica que el servidor ya
regresó la respuesta

alert(request.responseText);

Estatus OK

}

}

Pop up

Texto regresado
por el servidor

Tomado de: http://courses.coreservlets.com

15

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>
</center></body></html>

16

Escribiendo diréctamente en la página

XHTML

…
<form action="#">
<input type="button" value="Show Message"

onclick="sendRequest()"/>

</form>
<div id="message"></div>
…

Cambio en la página

Cambio en el script

function handleResponse() {

if ((request.readyState == 4) &&

(request.status == 200)) {

document.getElementById(“message”).innerHTML=request.responseText;

}

}

17

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

Datos POST
(null en caso de GET)

Petición asincrónica, no
esperar la respuesta

URL del recurso en
el servidor

Tomado de: http://courses.coreservlets.com

18

Manejar la respuesta versión 2

Estatus OK

function handleResponse() {
if (request.status == 200) {

alert(request.responseText);

}

}

Texto regresado
por el servidor

Pop up

Tomado de: http://courses.coreservlets.com

19

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);

20