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: