2

A j ax
Ajax: Son las siglas Asynchronous JavaScript And
XML; no es un lenguaje exactamente, es una tcnica
de desarrollo we para crear aplicaciones interactivas
mediante la cominaci!n varias tecnolog"as#

X$%ML&'SS

JavaScript&()M

XML

*$*&AS*+,-%&JS*.XML
3
Ajax

Caracterstica Fundamental:

*ermitir actuali/ar parte de una p0gina con in1ormaci!n

2ue se encuentra en el servidor sin tener 2ue re1rescar
completamente la p0gina, con ayuda del )jeto
XML$ttp3e2uest, el mismo, representa el cora/!n&motor
de Ajax+

4
Ajax

Objeto XMLHttpRequest:
Propiedades Descripcion
readyState Almacena el estado del requerimiento hecho al servidor
responseText Almacena el string devuelto por el servidor, luego de haber
hecho una peticin.
responseXML Similar a la anterior responseText! con la di"erencia que el
string devuelto por el servidor se encuentra en "ormato XML.
status #l cdigo de estado $TT% devuelto por el servidor &'' para
una respuesta correcta, ('( para )*o encontrado), +'' para
un error de servidor, etc.!
statusText #l cdigo de estado $TT% devuelto por el servidor en "orma
de cadena de texto, )-.), )*ot /ound), )0nternal Server
#rror), etc.
5
Ajax

Objeto XMLHttpRequest 45alores propiedad readystate6

Valor Descripcion
'
*o iniciali1ado ob2eto creado, pero no se ha
invocado el m3todo open!
4
5argando ob2eto creado, pero no se ha invocado el
m3todo send!
&
5argado se ha invocado el m3todo send, pero el
servidor a6n no ha respondido!
7
0nteractivo se han recibido algunos datos, aunque no
se puede emplear la propiedad responseText!
(
5ompleto se han recibido todos los datos de la
respuesta del servidor!
6
Ajax

)jeto XML$ttp3e2uest
Metodos Descripcion
abort! 8etiene la peticin actual
getAll9esponse$eaders! 8evuelve una cadena de texto con todas las
cabeceras de la respuesta del servidor
get9esponse$eader)cabec
era)!
8evuelve una cadena de texto con el contenido de la
cabecera solicitada
onreadystatechange 9esponsable de mane2ar los eventos que se
producen. Se invoca cada ve1 que se produce un
cambio en el estado de la peticin $TT%.
*ormalmente es una re"erencia a una "uncin
:avaScript
7
Ajax

)jeto XML$ttp3e2uest
Propiedades Descripcion
open)metodo), )url)! #stablece los par;metros de la peticin que se reali1a
al servidor. Los par;metros necesarios son el m3todo
$TT% empleado y la <9L destino puede indicarse de
"orma absoluta o relativa!
sendcontenido! 9eali1a la peticin $TT% al servidor
set9equest$eader)cabecer
a), )valor)!
%ermite establecer cabeceras personali1adas en la
peticin $TT%. Se debe invocar el m3todo open!
antes que set9equest$eader!
8
Ajax

5entajas#

7tili/a tecnolog"as ya existentes+

Soportada por la mayor"a de los navegadores modernos+

8nteractividad+ -l usuario no tiene 2ue esperar hasta 2ue llegen los

datos del servidor+

*ortailidad 4no re2uiere plug.in como 9lash y Applet de Java6+

Mayor velocidad, esto deido a 2ue no hay 2ue retornar toda la

p0gina nuevamente+

La p0gina se asemeja a una aplicaci!n de escritorio+

9
Ajax

:;uienes usan Ajax<

=oogle Map

=oogle Suggest

=mail

>e ?+@

A muchos m0s++++++++++
10
11
12
13
14
Ajax

Un ejemplo con Ajax!Clasico Hola Mundo"

Bscript typeCDtext&javascriptDE
1unction descargaArchivo46F
i14window+XML$ttp3e2uest6F
peticionGhttp C new XML$ttp3e2uest46;H
else i14window+ActiveX)ject6F
peticionGhttp C new ActiveX)ject4DMicroso1t+XML$%%*D6;
H
15
Ajax
7n ejemplo con Ajax I 'l0sico $ola Mundo
peticionGhttp+onreadystatechange C muestra'ontenido;
peticionGhttp+open4J=-%J,Jhttp#&&localhost&holamundo+txtJ,true6;
peticionGhttp+send4null6;
1unction muestra'ontenido46F
i14peticionGhttp+readyStateCCK6F
i14peticionGhttp+statusCC?@@6F
alert4peticionGhttp+response%ext6;
document+write4peticionGhttp+response%ext6;
H
H
H
H

16
Ajax

7n ejemplo con Ajax I 'l0sico $ola Mundo

window+onloadCdescargaArchivo46;

Archivo holamundo+txt I &var&ww

$ola MundoL
17
Ajax

Un #jemplo con Ajax $nteraccion con el %er&idor '(escar)a de (atos*

Bscript language C DjavascriptDE
var XML$ttp3e2uest)ject C 1alse;
i1 4window+XML$ttp3e2uest6 F
XML$ttp3e2uest)ject C new XML$ttp3e2uest46;
H else i1 4window+ActiveX)ject6 F
XML$ttp3e2uest)ject C new
ActiveX)ject4DMicroso1t+XML$%%*D6;
H
1unction get(ata4dataSource, div8(6
F
i14XML$ttp3e2uest)ject6 F
var oj C document+get-lementMy8d4div8(6;
XML$ttp3e2uest)ject+open4D=-%D, dataSource6;
XML$ttp3e2uest)ject+onreadystatechange C 1unction46
F
i1 4XML$ttp3e2uest)ject+readyState CC K NN XML$ttp3e2uest)ject+status CC ?@@6 F
oj+inner$%ML C
XML$ttp3e2uest)ject+response%ext;
H
H
XML$ttp3e2uest)ject+send4null6;
H
H
B&scriptE
18
Ajax

Un ejemplo con Ajax!$nteraccion con el %er&idor '(escar)a de (atos*

BodyE
B$OE7n demo con AjaxB&$OE
B1ormE
Binput type C DuttonD value C D(escargar datos desde el ServidorD
onclicP C Dget(ata4Jdatos+phpJ,Jtarget(ivJ6DE
B&1ormE
Bdiv idCDtarget(ivDE
BpELos datos seran agregados a2uNiacute;B&pE
B&divE
B&odyE

Un ejemplo con Ajax + datos,p-p

B<php
echo D-stos datos son descargados desde el servidor
con ajaxLD;
<E
Ajax

Ajax

Un ejemplo con Ajax!$nteraccion con el %er&idor '#n&io de (atos*

.script lan)ua)e / 0ja&ascript0!

&ar XMLHttpRequestObject / 1alse2
i1 '3indo3,XMLHttpRequest* 4
XMLHttpRequestObject / ne3 XMLHttpRequest'*2
5 else i1 '3indo3,Acti&eXObject* 4
XMLHttpRequestObject / ne3
Acti&eXObject'0Microso1t,XMLH6670*2
5
1unction )et(ata'data%ource8 di&$(*
4
i1'XMLHttpRequestObject* 4
&ar obj / document,)et#lement9:$d'di&$(*2
XMLHttpRequestObject,open'0;#608 data%ource*2
XMLHttpRequestObject,onread:statec-an)e / 1unction'*
4
i1 'XMLHttpRequestObject,read:%tate // < ==
XMLHttpRequestObject,status // >??* 4
obj,innerH6ML /
XMLHttpRequestObject,response6ext2
5
5
XMLHttpRequestObject,send'null*2
5
5
.@script!

Ajax

Un ejemplo con Ajax!$nteraccion con el %er&idor '#n&io de (atos*

BodyE
BhQE7n -jemplo con Ajax *ara -nviar datos al Servidor con =-%B&hQE
B1ormE
Binput type C DuttonD value C D(atoO a -nviarD
onclicP C Dget(ata4Jget+php<dataCOJ,
Jtarget(ivJ6DE
Binput type C DuttonD value C D(ato ? a -nviarD
onclicP C Dget(ata4Jget+php<dataC?J,
Jtarget(ivJ6DE
B&1ormE
Bdiv idCDtarget(ivDE
BpELos (atos a -nviar seran agregados a2ui+B&pE
B&divE
B&odyE

Ajax

Un ejemplo con Ajax!$nteraccion con el %er&idor '#n&io de

(atos*
B<php
i1 4RG=-%SDdataDT CC DOD6 F
echo J$a/ enviado al servidor el valor OJ;
H
i1 4RG=-%SDdataDT CC D?D6 F
echo J$a/ enviado al servidor el valor ?J;
H
<E