MANEJO FRAMEWORK "AJAX TAGs v1.5.1"

Luego de postear anteriormente sobre el manejo de AJAX de forma NATIVA, esta vez les mostrare un ejemplo de como manejar este Framework que facilita el manejo de AJAX mediante una serie de TAGs que brinda el acceso al servidor sin la necesidad del clasico PostBack. Esta librería permite la aplicación de funcionalidad AJAX en el desarrollo de componentes como:

- COMBOBOX.
- LISTAS.
- CALLOUT.
- PORLET.
- TOGGLE.
- EDITOR.
- TREE.
- Etc.

La logica de este Framework esta basado al manejo de un Servlet especial que extiende de la clase: BaseAjaxServlet

Aqui el mapeo respectivo en el web.xml: (Ojo por motivos de Visualización he cambiado '<' por '[' & ']' por '>')

[servlet][display-name]AjaxServlet[/display-name]
[servlet-name]AjaxServlet[/servlet-name]
[servlet-class]org.java.servlet.AjaxServlet[/servlet-class]
[load-on-startup]2[/load-on-startup][/servlet]

[servlet-mapping]
[servlet-name]AjaxServlet[/servlet-name]
[url-pattern]/AjaxServlet[/url-pattern]
[/servlet-mapping]

[!-- **** SERVLET: CARGA LAS LIBRERIS DEL 'JAR' **** --]
[servlet]
[servlet-name]sourceloader[/servlet-name]
[servlet-class]net.sourceforge.ajaxtags.servlets.SourceLoader[/servlet-class]
[init-param]
[param-name]prefix[/param-name]
[param-value]/ajaxtags[/param-value]
[/init-param]
[/servlet]

[servlet-mapping]
[servlet-name]sourceloader[/servlet-name]
[url-pattern]/ajaxtags/js/*[/url-pattern]
[/servlet-mapping]

[servlet-mapping]
[servlet-name]sourceloader[/servlet-name]
[url-pattern]/img/*[/url-pattern]
[/servlet-mapping]

[servlet-mapping]
[servlet-name]sourceloader[/servlet-name]
[url-pattern]/css/*[/url-pattern]
[/servlet-mapping]
[!-- ************************************** --]


Para descargar el ejemplo completo, descargarlo de: AQUÌ.

MANEJO DE "AJAX" (FORMA NATIVA)

En esta oportunidad mostrare el manejo de AJAX (Asynchronous JavaScript And XML) de la forma Nativa, pero en dos formas distintas de realizar. Al decir forma Nativa, hago referencia a que no utilizare ningún Framework especializado, sino que me apoyare en funciones JavaScript o mediante un simple fichero .JS.

Lo más resaltante es el diseño del fichero .JS que permitirá el acceso al servidor de forma directa sin la realización de un Post Back, el fichero es el siguiente:

var vAJAX;

/*** GLOBALES ***/
var Id_OBJETO;
var URL_Redirec;
var Id_Mostrar;

function PROCESAR_AJAX( Id_OBJETO2, URL_Redirec2, Id_Mostrar2 ){

this.Id_OBJETO = Id_OBJETO2;
this.URL_Redirec = URL_Redirec2;
this.Id_Mostrar = Id_Mostrar2;

recuperaAjax();
}

function recuperaAjax(){

//CREAMOS EL CONTROL 'XMLHttpRequest', SEGÚN EL NAVEGADOR UTILIZADO:
if( window.XMLHttpRequest ){
vAJAX = new XMLHttpRequest(); //SI NO ES 'INTERNET EXPLORER'
}
else{
vAJAX = new ActiveXObject( "Microsoft.XMLHTTP" ); //SI ES 'INTERNET EXPLORER'
}

//ALMACENAMOS EN EL CONTROL, LA FUNCION QUE INVOCARA CUANDO LA PETICION CAMBIE DE ESTADO
vAJAX.onreadystatechange = funcionCallback; //IMPORTANTE LOS LLAMADOS A LOS METODOS SE HACEN SIN PONER '()'

//ENVIAMOS LA PETICION...
vAJAX.open( "GET", URL_Redirec + "?PERSONA=" + Id_OBJETO , true );
vAJAX.send( "" );
}

function funcionCallback(){
//alert(Id_OBJETO);
alert(URL_Redirec);
//alert(Id_Mostrar);

//COMPROBAMOS SI LA PETICION SE HA COMPROBADO: (TIENE QUE COINCIDIR CON EL ESTADO #4)
if( vAJAX.readyState == 4 ){

//COMPROBAMOS SI LA RESPUESTA HA SIDO CORRECTA: (TIENE QUE COINCIDIR CON 'HTTP 200')
if( vAJAX.status == 200 ){

//ESCRIBIMOS EL RESULTADO DE LA PAGINA 'HTML' MEDIANTE 'DHTML'
if( Id_Mostrar == "IMPRIMIR" ){
document.all.IMPRIMIR.innerHTML = "" + vAJAX.responseText + "";
}
else{
alert("");
}
}
}
}





Para descargar el ejemplo completo, descargarlo de: AQUÌ.