domingo, 17 de octubre de 2010

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Ì.

No hay comentarios: