Ing. Pablo Almeida Haro Msc.

AJAX

CONCEPTO

Asynchronous JavaScript And XML ((JavaScript asíncrono y XML), es una técnica de desarrollo web

CARACTERISTICAS

*Es una de las tecnologías para desarrollo de RIA (Rich Internet Applications)

*Permite una comunicación asincrónica

*Está ligada a algunos frameworks JSF

*En algunos browsers puede existir problemas

*Muchas herramientas están emergiendo conjuntamente

*Sirve para validación en línea con el servidor

*Permite el autocompletado

*Permite el uso de maestro detalle

*Permite el refrescamiento en pantalla

*Realiza llamadas al servidor bajo demanda

*Actualiza parcialmente la pantalla

 

 

 

 

 

 

EJERCICIO

El ejemplo que sigue a continuación consiste en la presentación de un menú compuesto por 2 zonas:

a)      Zona de menú formada por enlaces

b)      Zona de despliegue del resultado

Cada vez que el usuario seleccione una opción del menú, mediante tecnología Ajax la zona de despliegue se actualiza de forma dinámica e inmediata sin la necesidad de recarga total de la página

*En Notepad u otro editor de texto crear la página ajax.htm que contendrá el menú. Ingresar el código que sigue a continuación:

<html>

<script language  ="JavaScript" type="text/javascript">

 

function llamarasincrono(url, id_contenedor)

{

var pagina_requerida = false

if (window.XMLHttpRequest)

{// Si es Mozilla, Safari etc

    pagina_requerida = new XMLHttpRequest()

} else

if (window.ActiveXObject)

{ // pero si es IE

      try {

            pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")

          }

      catch (e)

          { // en caso que sea una versión antigua

             try

                  {

                        pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")

                  }

            catch (e)

                  {

                  }

            }

}

else

return false

 

pagina_requerida.onreadystatechange=function(){cargarpagina(pagina_requerida, id_contenedor)

}

pagina_requerida.open('GET', url, true) // asignamos los métodos open y send

pagina_requerida.send(null)

}

// poner la información requerida

// en su sitio en la pagina xhtml

 

function cargarpagina(pagina_requerida, id_contenedor)

{

      if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))

       document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText

 

 

}

 

</script>

</head>

 

<body>

<div id="menu">

 

<a id="uno" href="javascript:llamarasincrono('tutorial1.htm', 'contenidos');">Opcion 1</a>

 

<a href="javascript:llamarasincrono('tutorial2.htm', 'contenidos');">Opcion 2</a>

 

</div>

 

<div id="contenidos">

 

</div>

 

</body>

</html>

 

 

*En Notepad u otro editor de texto crear la página tutorial1.htm que contendrá el código que se ejecutará cuando el usuario seleccione opción 1. Colocar el código que sigue a continuación:

<html>

<h1>Usted ha seleccionado la opcion 1  </h1>

</html>

*En Notepad u otro editor de texto crear la página tutorial2.htm que contendrá el código que se ejecutará cuando el usuario seleccione opción 2. Colocar el código que sigue a continuación:

<html>

<h1>Usted ha seleccionado la opcion 2  </h1>

</html>

 

*El resultado se visualizara como sigue a continuación: