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);
}
}
}
}
}
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"}
}
}
})
}
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);
}
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);?>"; 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>
