Tutorial: Ajax sin iframes ni xmlhttprequest

[MaBoRaK]

He publicado este tutorial en mi sitio http://leimnud.info y veran un ejemplo funcionando

Ajax sin iframes ni xmlhttprequest


Intro: He visto en muchos sitios web que hacen AJAX con el objeto XMhttpRequest o con iframes pero pocos con este m'etodo, es sencillo r'apido y accesible en cuanto a seguridad aun lo voy investigando.

La idea: Primeramente aclarar que no se como explicar la idea... pero el fin justifica los medios, soy malo explicando pero la idea es esta ..... tener un objeto global llamada AJI la cual se encargara de todo el proceso AJAX, luego cargar un javascript externo con parametros GET:

http://www.algo.com/as.js?a=121212&b=kaskj;


el cual actuar'a como servidor y que soltar'a una variable -> aji.database['nroInstancia'].aji="response Ajax" <- entonces la idea AJAX es tener un controlador que verifique si se ha creado esa variable cada x segundos y si al final se ha creado la variable terminamos el proceso y llamamos a una funcion callback con el valor de la variable -> aji.database['nroInstancia'].aji="response Ajax".

Eso es todo ...ni yo me entend'i pero la idea es esa talvez la entiendan mejor en codigo este es el objeto que he llamado AJI.

Código PHP:

  var aji={
    database:[],
    nuevo:function(param)
    {
        _1="ajaxN"+Math.floor(Math.random()*2199);
        _2=aji.database[_1]=param;
        _2.name=_1;
        _2.completed=false;
        uri=_2.url+"?ajiId="+_2.name+((_2.param)?"&"+_2.param:"");
        _n = document.createElement('script');
        _n.src = uri;
        _n.type = "text/javascript";
        document.getElementsByTagName("HTML")[0].getElementsByTagName("HEAD")[0].appendChild(_n);
        _2.script=_n;
        _2.interval = setInterval("aji.verificar('"+_2.name+"')", 500);
    },
    verificar:function(param)
    {
        _1=aji.database[param];
        if(!_1.aji)
        {
            _1.g+=1;
            return;
        }
        else
        {
            clearInterval(_1.interval);
            aji.tools.element.remove(_1.script);
            aji.finish(param);
        }
    },
    finish:function(param)
    {
        _1=aji.database[param];
        _2=_1.callback.funcion.param;
        if(!_2)
        {
            _2={};
            _2.aji=_1.aji;
        }
        else
        {
            _2.aji=_1.aji;
        }
        delete aji.database[param];
        _1.callback.funcion.exec(_2);
    },
    tools:{
        element:{
            remove:function(elemID) {
                elem = (typeof elemID == "string")?document.getElementById(elemID):elemID;
                if(elem.parentNode)
                {
                    elem.parentNode.removeChild(elem);
                }
                else if(elem.parentElement)
                {
                    elem.parentElement.removeChild(elem);
                }
            }
        }
    }
} 
   

Como usarlo: Tan simple como esto:

Código PHP:

  ajsa=function()
{
    aji.nuevo({ 
        url:"http://wilmer.colosa.net/ajiserver.php", //url del servidor
        param:"valor1=8&valorN=9", //valores GET
        callback:{                 //objeto de retorno
            funcion:{            //funcion de retorno
                exec:ajsa2,        //nombre de la funcion
                param:false        //parametros de la funcion de retorno. NOTA:
                                   //Los parametros deben pasarse como un OBJETO LITERAL
                                   //{valor1:12,valorN:"algo"}
            }
        }
    })
} 
   

en nuestra funcion callback.

Código PHP:

  sjsa2=function(param)
{
/*
Lo que contiene param son los parametros que se pasaron como un  OBJETO LITERAL
param.valor1=algo;
param.valorN=algo;
 
y se aniade un elemento al objeto:
param.aji : contiene el response de la operacion
*/
alert(aram.aji);
} 
   

Nuestro Servidor: En el lado del servidor tenemos:

Código PHP:

  <?php
$a=$_GET['ajiId']; //importante contiene el ID de la instancia
$result="Este contenido es generado en una variable JS entonces podemos devolver desde el servidor 
un String, objeto,array,etc.";
/*
La siguiente linea es importante porque recuerden que devolvemos un
valor javascript y debe ir en una sola linea asi que si devuelven una cadena
con \n o \r deben parsearla para que sea de una sola linea
*/
$result=str_replace("\n","",$result);
?>
/*
Aqui se crea el response;
*/
aji.database['<?=$a;?>'].aji="<?=addslashes($result);?>";  

Bueno es hasta donde puedo explicar, el resto del codigo es intuitivo espero que les sirva.


abajo un ejemplo en html funcional

Código:

<script type="text/javascript" src="http://wilmer.colosa.net/aji.js">
</script>
<script type="text/javascript">
ajsa=function()
{
	document.getElementById("aji_container").innerHTML="Loading......";
	aji.nuevo({
		url:"http://wilmer.colosa.net/ajiserver.php",
		param:"k=8&j=9",
		callback:{
			funcion:{
				exec:ajsa2,
				param:false
			}
		}
	})
}
ajsa2=function(param)
{
	document.getElementById("aji_container").innerHTML=param.aji
}
</script>




<a href="#" onClick="ajsa(); return false"> Cargar contenido</a> (<b>aji</b>)<br>
<div id="aji_container" style="border:1px dashed #006699;padding:5px;"></div>