Manual de Ajax Completo

7/26/2019 Manual de Ajax Completo

1/112

"#$#%& '( ') *+,- ./0/1- +2(%#3'(4&$ 5 /6)78#87&('$9:

;$8#


2/112


3/112

"#$%&'J(43 ,B?$"5 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666F-$%&'()$9 ?$ (>:L% ?$ $9>1:3B1:B666666666666666666666666666666666666666666666666666666666666666666666666666666666666N

3$1M93:>(9 ?$ '%( (0":>(>:L% O$; :B%(" 66666666666666666666666666666666666666666666666666666666666666666666666NI1B;"$E(9 ?$ '%( (0":>(>:L% P$; >B%H$%>:B%(" 6666666666666666666666666666666666666666666666666666666666666666666666666666666666N/,


4/112

U6N6Q I$3:>:L% ?$ >L?:&B *+,- B 3$23B66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666FYU6N6S I$3:>:L% ?$ "( ?:1$>>:L% ?$ '%( :E(&$% 666666666666666666666666666666666666666666666666666666666666666666666666666666666 FFU6N6U I$3:>:L% ?$ >L?:&B G(H(=>1:03 / "(%Z(1"B6 666666666666666666666666666666666666666666666666666666666666666666666666666666 F[

M2W P)#'?: $' '88:8'+22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222SCM2C H)8 +:9:80' ), 1+1)8%:2 2222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222 22>K

,#6M42)& W= ;G'36)&$ 3O2M PQ0:$:+ aY;b X[Z; R &)8)&0'8'+ '+9'&%),'+ '# 5#0'8#'02222222222222222222222222222222222222222222222222222>S

Y6U6Q \%31B?'>>:L% ( "B9 E]3B?B9 !+ / ID=+6 6666666666666666666666666666666666666666666666666666666666666666666666666666666 NFY6U6S 3$1$9 $90$>:("$96 66666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666NNY6U6U (E$%3$6 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666 RUY6[6S ^'(1?(1 :%TB1E(>:L% ?$ :%%$1*+,- '9(%?B aGa86 6666666666666666666666666666666666666666666666666666666666R7

O2C H)8 %#E:8@)&%I# $%#_@%&)@'#0' 10%,%L)#$: ,:+ 'N'#0:+ R ', H[P2 2222222222222222222222222222222CCY6R6Q !)$E0"B Q b +(;"( 1$"(3:H( ( B31( 3(;"(6 666666666666666666666666666666666666666666666666666666666666666666666666666666QVVY6R6S !)$E0"B S b +(;"( 1$"(3:H( (" 0'%3$1B ?$" 1(3L%66666666666666666666666666666666666666666666666666666666666666QVU

O2FG /10: &:@9,'0)$: '@9,')#$: /A/B22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222FG3

"7O)7&@


5/112

J(4H^

Y+0' ,'# 6U;P( M2K=b R)V1' .1+&) 98:9:8&%:#)8 9_H ['14'($7O)' >#


6/112

J(4&%')^

T1)#$: +' &)8


7/112

H#$ FJ/ [F78_ J(4'


8/112

!'()$ *#+,-

^1' $%+'e)$: 9)8) N'8 X',J&1,)+ 5#0'8)&0%N)+ )1#V1' )7:8) +' 10%,%L) @1&7: 9)8)7)&'8 ?1'


9/112

~

o H'+)88:,,: &:# A)N)Z&8%90b 7)&' 1# 9)8 $' )e:+ #: @1R 'd9,:8)$:9'8: 7:R '# $J) &:# &%'80) &:#+%+0'#&%)2

T:# 0:$: ,: )#0'8%:8b N'@:+ V1' 7:R '# $J)b 1#) $' ,)+ @'?:8'+ 9:+%.%,%$)$'+ R@_+ #1'N) 9)8) :E8'&'8 1#) 'd9'8%'#&%) 8%&) ), 1+1)8%: '+ ,) 10%,%L)&%I# $' /A/B2

/)@2(&$ 'G'36)&$


10/112

!"#$%&'()*+K a::


11/112

,#6M42)& N= ;) &OG'4&1>HP446F'Q2'$4X)8) &:@'#L)8 +' N) ) &:#+081%8 1#) 9'V1'e) ,%.8'8J) 98:


12/112

T:#+081%8'@:+ 1#) &,)+' V1' #:+ ,%.'8' $', 08).)?:8'9'0%0%N: $' &8')8 &%'80)+ E1#&%:#'+ V1' +:# #'&'+)8%)+ '#&)$) 9'0%&%I#2

F2C Y+&8%.%8 &,)+'+ '# A)N)Z&8%90 T:@98'#$'8 ', 9:8 V1Q '+0_ &:#+081%$) ,) &,)+' 9'0%&%I#

/A/B $' ,) E:8@) V1' '+0_b )+J &:@: 1#) N%+%I# $' &I@: +'&8')# ,:+ 98:0:0%9:+ 6&,)+'+ $' A)N)Z&8%90= R ,)+ $%E'8'#&%)+$' Q+0:+ &:# ,)+ &,)+'+ $' A)N) V1' +:# @)+ &:#:&%$)+ 9)8)V1' +' &:@98'#$) .%'# 0)#0: ', &I$%


13/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NS

() ,%.8'8J) V1' &:#+081%8'@:+ &1.8%8_ ,)+ &)8)&0'8J+0%&)+ ._+%&)+g 9)8) &1.8%8 ,)+&)8)&0'8J+0%&)+ )N)#L)$)+ 'd%+0'# @1,0%01$ $' ,%.8'8J)+ $' &I$%


14/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NW

est en la funcin coger-->Sin resultado

/8&7%N: h$)0:+lN%$':&,1.2d@,i

El rey Leon

87 Min

Animacion infantil

Aladin

86 Min

Animacion infantil

X:8 )7:8) #: 1+)8Q )8&7%N:+ BP( &:# )&'#0:+b R) V1' '+0:+ &)8)&0'8'+ +),$8_#+1+0%01%$:+ 9:8 1# +J@.:,: 'd08)e: R '+ 1# 98:.,'@) V1' +' 8'+:,N'8_ @_+ 0)8$'2

!"#$%&'()*+M X8%@'8 '?'@9,: )#0'+ $' 91,+)8 ', .:0I#2

!"#$%&'()*+O X8%@'8 '?'@9,:b $'+91Q+ $' 8'&%.%8 ,) %#E:8@)&%I#2

T:@: N'@:+ +' 7) )&01),%L)$: ', &)@9: $' ,) 9_


15/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NL

peticion01 = newXMLHttpRequest();

Y# ,:+ +%


16/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 N`

T:@: N'@:+ '+0) @1R 'd0'#$%$: )1#V1' #: 0:$:+ ,:+ #)N'


17/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NY

'# ', '?'@9,: )#0'8%:8 9:$'@:+ )e)$%8 &)@9:+ ) ,) 0).,) &:# ', )3 %#$%&)$: R:.0'#'8 ', +%


18/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Nd

2: Cargado3: Interactivo (algunos datos devueltos)4: Completado

onreadystatechangePuntero a la funcin del manejador que se llamacuando cambia readyState.

(: V1' 7'@:+ $%&7: )V1J ,: 1+)8'@:+ '# ,:+ '?'@9,:+ +%


19/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 NX

Pgina de ejemplovarpeticion01 = null; //Creamos la variable para el objeto

XMLHttpRequest//Este ejemplo emplea un constructor, debera funcionar en cualquiernavegador.peticion01 = newConstructorXMLHttpRequest();functionCoger(url) //Funcin coger, en esta caso le entra unadireccin relativa al documento actual.{if(peticion01) //Si tenemos el objeto peticion01{peticion01.open('GET', url, false); //Abrimos la url, false=formasncronapeticion01.send(null); //No le enviamos datos al servidor//Escribimos la respuesta en el campo con ID=resultadodocument.getElementById('resultado').innerHTML =peticion01.responseText;

}}

Coge undocumentoSin resultado

Y+0) '+ ,) 9)80' @_+ +'#&%,,)b )7:8) $Q@:+,' 1# N%+0)L: ) ,) E1#&%I# %#0'8'+)#0'b$'0'&0)8'@:+ ', #)N'


20/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Re

functionConstructorXMLHttpRequest(){if(window.XMLHttpRequest) /*Vemos si el objeto window (la base dela ventana del navegador) posee elmtodoXMLHttpRequest(Navegadores como Mozilla y Safari). */{return newXMLHttpRequest(); //Si lo tiene, crearemos el objeto

con este mtodo.}else if(window.ActiveXObject) /*Sino tena el mtodo anterior,debera ser el Internet Exp. un navegador que emplea objetosActiveX, lo mismo, miramos si tiene el mtodo de creacin. */{/*Hay diferentes versiones del objeto, creamos un array, quecontiene los diferentes tipos desde laversin mas reciente, hasta la mas antigua */var versionesObj = newArray('Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');

for(vari = 0; i < versionesObj.length; i++){try{/*Intentamos devolver el objeto intentando crear las diferentesversiones se puedeintentar crear uno que no existe y seproducir un error. */return newActiveXObject(versionesObj[i]);}catch(errorControlado) //Capturamos el error, ya que podracrearse otro objeto.{}

}

}/* Si el navegador llego aqu es porque no posee manera alguna decrear el objeto, emitimos un mensaje de error. */throw newError("No se pudo crear el objeto XMLHttpRequest");}

X)8) +1 @'?:8 &:@98'#+%I# +' 7) &:@'#0)$: ', &I$%


21/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RN

X)8) $)8#:+ &1'#0) $' ,) +%01)&%I# N)@:+ ) 9'$%8 1#) 9_


22/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RR

!"#$%&'()*+ H X8:.,'@)+ $' 1#) 9'0%&%I# +J#&8:#)b @:+08)$:+ '# P:L%,,) ^%8'E:d2 Y, .:0I#9'8@)#'&' 91,+)$: R ,) 9_


23/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RS

Pgina de ejemplo

varpeticion01 = null;//Creamos la variable para el objeto xmlhttprequestpeticion01 = newConstructorXMLHttpRequest();

//Se llama cuando cambia peticion01.readyState.functionestadoPeticion() {switch(peticion01.readyState) { //Segn el estado de la

peticin devolvemos un Texto.case0: document.getElementById('estado').innerHTML =

"Sin iniciar";break;case1: document.getElementById('estado').innerHTML =

"Cargando";break;case2: document.getElementById('estado').innerHTML =

"Cargado";break;case3: document.getElementById('estado').innerHTML =

"Interactivo";

break;case4: document.getElementById('estado').innerHTML ="Completado";

//Si ya hemos completado la peticin, devolvemos ademsla informacin.

document.getElementById('resultado').innerHTML=peticion01.responseText;

break;}

}functionCoger(url) { //Funcin coger, en esta caso le entra

una direccin relativa al documento actual.if(peticion01) { //Si tenemos el objeto peticion01peticion01.open('GET', url, true); //Abrimos la url,

true=forma asncrona

/*Asignamos la funcin que se llama cada vez que cambiael estado de peticion01.readyState Y LO HACEMOS ANTES THE HACER ELSEND porque inicia la transmisin.*/

peticion01.onreadystatechange = estadoPeticion;peticion01.send(null); //No le enviamos datos a la pgina

que abrimos.}

}Coge un documento

Estado peticin

Sin resultado

/$'@_+ '+ .1'#: &)@.%)8 ', 0'd0: $', )8&7%N: AZXb 9:8 1#: @)+ )&:8$'2

/8&7%N: h'+9'8)2?+9i

X8:.)@:+ ,) 9_


24/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RW

!"#$%&'()*+ I c#) 9'0%&%I# )+J#&8:#)b @:+08)$) '# P:L%,,) ^%8'E:d2

Y, 8'+1,0)$: '+ +)0%+E)&0:8%:b ', 0'd0: V1' 7'@:+ 91'+0: 0)@9:&: '+ V1' N)R) )$%+08)'8 @1&7: ), 1+1)8%:2

T1)#$: )N)#&'@:+ 1# 9:&: @_+b 9:$8'@:+ &)8


25/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RL

X8%@'8) )98:d%@)&%I# 6Y88I#')=jT:@: ', :.?'0: J@KL%%89.2#.$%#: 0%'#' 1# &)@9: $' %$'#0%E%&)$:8b N)@:+ ))e)$J8+',:b $' '+0) @)#'8) 9:$8'@:+ 8'&:#:&'8,:6: '+: 9:$'@:+ 9'#+)8=b +%0'#'@:+ N)8%:+ +%@1,0_#')@'#0'2

/8&7%N: h'?'@9,:P),:270@,iPgina de ejemplofunction estadoPeticion(){window.alert( "Que peticin llego? (" + this.nombre + ")"); //Sesupone que debera ser la del objeto al que se asign.}

functionCoger(peticionAjax, url) //Le pusimos un campo mas, parausarla con cualquier peticin.{

if(peticionAjax){//Hacemos la peticin Ajax estndarpeticionAjax.open('GET', url, true);peticionAjax.onreadystatechange = estadoPeticion;peticionAjax.send(null);

}}var Peticion01 = ConstructorXMLHttpRequest(); //Usamos el constructorpara obtener un objeto compatible.Peticion01.nombre = "Peticion01"; //Un campo nombre, para saber quienes.window.alert( "Comprobando objeto 01 (nombre) = (" +Peticion01.nombre + ")"); //Vemos que se le asigna el nombre

varPeticion02 = ConstructorXMLHttpRequest(); //Usamos el constructorpara obtener un objeto compatible.Peticion02.nombre = "Peticion02"; //Un campo nombre, para saber quienes.window.alert( "Comprobando objeto 02 (nombre) = (" +Peticion02.nombre + ")"); //Vemos que se le asigna el nombreCoge eldocumento 01Coge eldocumento 02

!"#$%&'()*+ ?P ^),,: '# ,) :8%'#0)&%I# ) :.?'0:+ $' A)N)Z&8%90b @:+08)$) '# P:L%,,) ^%8'E:d2


26/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 R`

X'8: 9)8) #1'+08) +:898'+) 6$'+)


27/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RY

}}

this.objetoRequest.send(null); //Iniciamos la transmisin dedatos.}/*Las siguientes funciones las dejo en blanco ya que lasredefiniremos segn nuestra necesidad hacindolas muy sencillas o

complejas dentro de la pgina o omitindolas cuando no sonnecesarias.*/functionobjetoRequestCargando() {}functionobjetoRequestCargado() {}functionobjetoRequestInteractivo() {}functionobjetoRequestCompletado(estado, estadoTexto,respuestaTexto, respuestaXML) {}

/* Por ltimo diremos que las funciones que hemos creado, pertenecenal ObjetoAJAX, con prototype, de esta manera todos los objetoAjaxque se creen, lo harn conteniendo estas funciones en ellos*/

//Definimos la funcin de recoger informacin.objetoAjax.prototype.coger = peticionAsincrona ;//Definimos una serie de funciones que sera posible utilizar y las

dejamos en blanco en esta clase.objetoAjax.prototype.cargando = objetoRequestCargando ;objetoAjax.prototype.cargado = objetoRequestCargado ;objetoAjax.prototype.interactivo = objetoRequestInteractivo ;objetoAjax.prototype.completado = objetoRequestCompletado ;

/8&7%N: h'?'@9,:*1'#:270@,iPgina de ejemplovar PeticionAjax01 = newobjetoAjax(); //Definimos un nuevo

objetoAjax.PeticionAjax01.completado = objetoRequestCompletado01; //Funcincompletado del objetoAjax redefinida.functionobjetoRequestCompletado01(estado, estadoTexto,respuestaTexto, respuestaXML){/* En el ejemplo vamos a utilizar todos los parmetros para ver comoqueda, en un futuro prximo, solo te interesare la respuesta entexto o XML */document.getElementById('estado01').innerHTML = estado;document.getElementById('estadoTexto01').innerHTML = estadoTexto;document.getElementById('respuestaTexto01').innerHTML =respuestaTexto;document.getElementById('respuestaXML01').innerHTML = respuestaXML;}

varPeticionAjax02 = newobjetoAjax(); //Definimos un nuevoobjetoAjax.PeticionAjax02.completado = objetoRequestCompletado02; //Funcincompletado del objetoAjax redefinida.functionobjetoRequestCompletado02(estado, estadoTexto,respuestaTexto, respuestaXML) {/* En el ejemplo vamos a utilizar todos los parmetros para ver comoqueda,en un futuro prximo, solo te interesare la respuesta en texto o XML*/document.getElementById('estado02').innerHTML = estado;document.getElementById('estadoTexto02').innerHTML = estadoTexto;document.getElementById('respuestaTexto02').innerHTML =respuestaTexto;document.getElementById('respuestaXML02').innerHTML = respuestaXML;

}


28/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Rd

Coge eldocumento 01Cogeel documento 02

Documento 01

estado no recibidotexto estado no

recibidotexto respuesta no

recibidoxml respuesta no

recibido

Documento 02

estado no recibidotexto estado no

recibidotexto respuesta no

recibidoxml respuesta no

recibido

T:@: 91'$'+ N'8 '# ', &I$%


29/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 RX

!"#$%&'()*+ ?? 4'+1,0)$: &:88'&0: ) ,) 7:8) $' 1+)8 ,)+ &,)+'+ &:#+081%$)+2

/ &)1+) $' ,) '+9'8)b ,,'


30/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 Se

Defines una clase con una definicin de clase,instancias una clase con su constructor.

Defines y creas los objetos con losconstructores.

Creas un nuevo objeto con el operador new. Igual

Construyes una jerarqua de objetos usandodefiniciones de clases para definir subclases.

Construyes una jerarqua de objetosasignando un objeto como el prototipoasociado a una funcin constructor.

Heredan las propiedades siguiendo una cadenade clases.

Heredan las propiedades usando una cadenade prototipos.

Una definicin de clase describe todas laspropiedades de todas las instancias de la clase,no se pueden aadir dinmicamente.

La funcin constructora o prototipo especificael conjunto de propiedades inicial, luego se

pueden aadir mas ya sea a unos pocos otodos los objetos creados.

Traducido de Core JavaScript Guide de Netscape Communications Corp.

T:# ', +%


31/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 SN

T,)+'X'0%&%:#/?)d\K2?+functionobjetoAjax( ){/*Primero necesitamos un objeto XMLHttpRequest que cogeremos delconstructor para que sea compatible con la mayora de navegadores

posible. */this.objetoRequest = new ConstructorXMLHttpRequest();//Definimos la funcin de recoger informacin.this.coger = functionpeticionAsincrona(url) //Funcin asignada almtodo coger del objetoAjax.{

/*Copiamos el objeto actual, si usamos this dentro de la funcinque asignemos a onreadystatechange, no funcionara.*/

varobjetoActual = this;this.objetoRequest.open('GET', url, true); //Preparamos la

conexin./*Aqu no solo le asignamos el nombre de la funcin, sino la

funcin completa, as cada vez que se cree un nuevo objetoAjax seasignara una nueva funcin. */

this.objetoRequest.onreadystatechange =

function() {switch(objetoActual.objetoRequest.readyState){

case1: //Funcin que se llama cuando se estcargando.

objetoActual.cargando();break;case2: //Funcin que se llama cuando se a cargado.objetoActual.cargado();break;case3: //Funcin que se llama cuando se est en

interactivo.objetoActual.interactivo();break;case4: /* Funcin que se llama cuando se completo

la transmisin, se le envan 4 parmetros. */

objetoActual.completado(objetoActual.objetoRequest.status,objetoActual.objetoRequest.statusText,

objetoActual.objetoRequest.responseText,objetoActual.objetoRequest.responseXML);

break;}

}this.objetoRequest.send(null); //Iniciamos la transmisin de

datos.}//Definimos una serie de funciones que sera posible utilizar y lasdejamos en blanco.

this.cargando = functionobjetoRequestCargando() {}

this.cargado = functionobjetoRequestCargado() {}this.interactivo = functionobjetoRequestInteractivo() {}this.completado = function objetoRequestCompletado(estado,

estadoTexto, respuestaTexto, respuestaXML) {}}

\'@:+ V1' 0:$: V1'$) '#&'88)$: $'#08: $', @%+@: &:#+081&0:8b R +I,: 7)&'@:+8'E'8'#&%) ) 1#) E1#&%I# $'&,)8)$) E1'8) V1' &:#+081R' ', :.?'0:BP(U0094'V1'+0 R V1' 9:$8J)@:+ 0'#'8 0)@.%Q# $'#08:b $' @)#'8) V1' ',:.?'0: +' )10: &:#0'#$8J)2

/1#V1' 91'$) 9)8'&'8 .:#%0: '#&'88)8 ,)+ E1#&%:#'+ '# ', &:#+081&0:8 R '+ 1#)

.1'#) 0Q%&) 9)8) ,%@9%)8 &I$%


32/112

,#6M42)& N= ;) &OG'4& 1>HP446F'Q2'$4 SR

8'#$%@%'#0: R @'@:8%)b &)$) N'L V1' 7)R 1#) E1#&%I# '#&'88)$) '# ',&:#+081&0:8 Q+0) +' &8') 9)8) &)$) :.?'0:b ,: V1' #: '+ 1# 98:.,'@) +% N)@:+ )&8')8 9:&:+ :.?'0:+ ) ,) N'L '# 1# XT $' 7:R '# $J)2

X'8:b mV1Q 9)+) &:# :08:+ 0'8@%#),'+ @)+ $'+E)N:8'&%$:+ &:@: ,:+ $%E'8'#0'+

0'8@%#),'+ @IN%,'+ V1' '# 1# E1018: 9:$8J)# +:9:80)8 ', :.?'0:BP(U0094'V1'+0nb R) V1' #: #:+ &1'+0) #)$) @'?:8)8 ', 8'#$%@%'#0: '# '+0):&)+%I#b $'?'@:+ ,) E1#&%I# &:#+081&0:8) &:@: '+0).) )#0'+2

N9X9Sb#


33/112

SS

,#6M42)& R=P'


34/112

SW

!"#$%&'()*+ ?T T1)$8: +','&&%I# &:@9:#'#0'+ $' ,) %#+0),)&%I# 9'8+:#),%L)$) $' P:L%,,) ^%8'E:d2

\)@:+ ) '@9'L)8 %#+0),)#$: P:L%,,) ^%8'E:db &1)#$: 7)


35/112

SL

^%8'*12 H)@:+ N)8%:+ 9)+:+ 7)+0) ,,'


43/112

WS

!"#$%&'()*+ KO *:0I# $' %#%&%: $' ^%8'*1


44/112

WW

U)+0) )V1J 1#) &:#+:,) $' '88:8'+ &:#N'#&%:#), 9'8: V1' #:+ @1'+08) ),


45/112

WL

depuracion

function consola(){

vara = 10;

varb = "hola";varc = [10, 20, 30, 40] ;console.log(a); //Podemos poner simplemente una o varias variables.console.log(a,b);console.log("El valor de a es %d y el de b es %s",a,b); //Podemos usar la sintaxis del printf de c paralos mensajes.console.info(c);console.warn(b);console.error("Prueba de error, el valor de b es %s.",b);

}functionhagoalgo(){

varnombre = "Juan";

hagoalgo2() ;}functionhagoalgo2(){

hagoalgoreal();}functionhagoalgoreal(){

longitud = nombre.length;alert("La longitud del nombre es : "+ longitud);

}

PGINA PARA HACER PRUEBAS DE DEPURACIN SIMPLES
Llamo Funcin hagoalgoLlamo Funcin hagoalgo2Llamo Funcin hagoalgorealLlamo Funcin consola

Z% )7:8) ,,)@)@:+ ) ,) E1#&%I# h&:#+:,)ib :.0'#'@:+ ', 8'+1,0)$: @:+08)$: '# ,)+%


46/112

W`

(:+ @'#+)?'+ &:#+:,'2%#E:6= @1'+08)# 1# &)80', $' %#E:8@)&%I#2 (:+ @'#+)?'+ &:#+:,'2`)8#6= @1'+08)# 1# &)80', $' ),'80)2 (:+ @'#+)?'+ &:#+:,'2'88:86= @1'+08)# 1# &)80', $' '88:8b 9'8: ', 98:


47/112

WY

!"#$%&'()*+ T? P:+08)#$: ', _8.:, $' :.?'0:+ A)N)Z&8%90$', H[P &:# ^%8'*1


48/112

Wd

T:@: +' N' 9:8 ', +1.8)R)$: '+0).) +'e),)#$: ', 7%9'8'#,)&' ) ,) +'


49/112

X:8 )7:8) +' 7) N%+0: 0:$: ,: 8',)&%:#)$: ), :.?'0: BP(U0094'V1'+0 V1' '+ ',&:8)LI# $' /A/B R 0'8@%#)@:+ ', &)9J01,: )#0'8%:8 &:#+081R'#$: 1#) ,%.8'8J) V1'#:+ $'?)8_ 10%,%L)8,: $' E:8@) @)+ &I@:$)b 9'8: V1' 0:$)NJ) #: #:+ ).+08)'0:0),@'#0' $', 1+: $', :.?'0: BP(U0094'V1'+02

(: 8'),@'#0' %#0'8'+)#0' $' '+0' :.?'0: '+ 10%,%L)8,: 9)8) 08)'8 ) #1'+08) 9_


50/112

S9R

J($'H9

Y+0: '+ ,: @_+ E_&%,b )$'@_+ #:+ )R1$)8_ ) &:@98'#$'8 ),


51/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


52/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


53/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


54/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&

H%8'&&%:#5@) c#) %@)


55/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


56/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&'& .=.(#%'& (*3)M4 V'6'W(&)8% (4+ RVRJ+'8J)j

%#+'80)8A)N)+&8%90270@,Insertar JavascriptvarPeticionAjax01 = newobjetoAjax(); //Definimos un nuevo

objetoAjax.PeticionAjax01.completado = objetoRequestCompletado01; //Funcincompletado del objetoAjax redefinida.function objetoRequestCompletado01(estado, estadoTexto,respuestaTexto, respuestaXML){eval(respuestaTexto); //Solo nos interesa la respuesta como textopara lanzar el cdigo JavaScript

}Llama a unaFuncin

T:$%


57/112

T:@: N'@:+ #: '+ $%EJ&%, R R) V1' 9:$'@:+ &)8Llama a una Funcin

T:$%


58/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


59/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


60/112

!"#$%&'()*+ OK A'8)8V1J) $' :.?'0:+ $', #)N'


61/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


62/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


63/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


64/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


65/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


66/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


67/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


68/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


69/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


70/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


71/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


72/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


73/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


74/112

,#6M42)& S= TU8(78#$ %' 6'4787K( %' 7(V&


75/112

,#6M42)& W= ;G'36)&$


76/112

,#6M42)& W= ;G'36)&$ Y+V1'@) $' 1#) 9_


77/112

,#6M42)& W= ;G'36)&$


78/112

,#6M42)& W= ;G'36)&$


79/112

,#6M42)& W= ;G'36)&$


80/112

,#6M42)& W= ;G'36)&$


81/112

,#6M42)& W= ;G'36)&$


82/112

,#6M42)& W= ;G'36)&$


83/112

,#6M42)& W= ;G'36)&$


84/112

,#6M42)& W= ;G'36)&$


85/112

,#6M42)& W= ;G'36)&$


86/112

,#6M42)& W= ;G'36)&$


87/112

,#6M42)& W= ;G'36)&$


88/112

,#6M42)& W= ;G'36)&$


89/112

,#6M42)& W= ;G'36)&$


90/112

,#6M42)& W= ;G'36)&$


91/112

,#6M42)& W= ;G'36)&$


92/112

,#6M42)& W= ;G'36)&$


93/112

,#6M42)& W= ;G'36)&$


94/112

,#6M42)& W= ;G'36)&$


95/112

,#6M42)& W= ;G'36)&$


96/112

,#6M42)& W= ;G'36)&$


97/112

,#6M42)& W= ;G'36)&$


98/112

,#6M42)& W= ;G'36)&$


99/112

,#6M42)& W= ;G'36)&$


100/112

,#6M42)& W= ;G'36)&$ P'#f 0J9%&: $' 1# 98:


101/112

,#6M42)& W= ;G'36)&$


102/112

,#6M42)& W= ;G'36)&$


103/112

,#6M42)& W= ;G'36)&$


104/112

,#6M42)& W= ;G'36)&$


105/112

,#6M42)& W= ;G'36)&$


106/112

,#6M42)& W= ;G'36)&$


107/112

,#6M42)& W= ;G'36)&$


108/112

,#6M42)& W= ;G'36)&$


109/112

,#6M42)& W= ;G'36)&$


110/112

,#6M42)& W= ;G'36)&$


111/112

,#6M42)& W= ;G'36)&$


112/112

"7O)7&@

Documents

Manual de Ajax Completo