Hola a todos, este es mi primer post en taringa básicamente es una mejora a un código que encontré en otro articulo con el mismo nombre, articulo al que llegue después de mucho buscar como mejorar otro código que encontré, parece un enredo así que vamos por partes, lo primero que encontré esta en este enlace
Miremos que fue lo que encontré allí que me llamo tanto la atención
En el archivo HTML debemos ubicar la llamada al archivo que queremos ejecutar: index.htm
<HTML>
<HEAD>
<TITLE>Ejectuar código PHP o ASP con JavaScript</TITLE>
</HEAD>
<BODY>
<script language="JavaScript" src="archivo. php "></script>
</BODY>
</HTML>
El archivo del Script debe contener la función document.write al final del mismo para poder imprimir el contenido que generó dinámicamente:
archivo. php
<?
// En este espacio pondremos todo el
// código PHP que queremos ejecutar
// y luego juntar todo lo que es
// necesario imprimir en una sola
// variable.
$variable = "Script PHP ejecutado desde una página HTML";
?>
document.write("<?=$variable;?>"
;
Cuando leí este articulo me dije uff, que bien esto es como ajax , claro que medio, porque puedo llamar una pagina escrita en php y mostrar su resultado en donde incluya esta etiqueta <script language="JavaScript" src="archivo. php "></script>
Entonces me puse en la tarea de volverlo más interactivo y puse el código php dentro de una funcion que llame escribir(); y también en vez de ir guardando todas las etiquetas html o los que se fuera a imprimir en una variable, use las funciones ob_start(); y ob_get_contents(); para que se pudieran usar los echo normalmente ya que estas recogen lo que haya en el buffer de salida y lo guarda en una variable, luego cambie el document.write("<?=$variable;?>"
; por
document.getElementById("algo"
.innerHTML += "<?=$variable;?>"; donde “algo” es el id o name del body o de un div que es donde aparecerá el resultado del
php
. Así que también cambie unas cositas en el html ahora puedo llamar la función escribir() desde el evento onclick de un botón
<HTML>
<HEAD>
<TITLE>Ejectuar código PHP o ASP con JavaScript</TITLE>
<script src="archivo. php "></script>
</script>
</HEAD>
<BODY id="algo">
<br>
<input name="valor" type="Text" value="sirve">
hola esta es una prueba de escritura <br>
<input name="asdf" type="button" onclick="escribir()"> <br>
<div >
</div>
</body>
</html>
Y archivo. php
function escribir() {
<?
ob_start();
echo "esto es una prueba <br>";
for ($i = 1; $i <= 10; $i++) {
print $i;
}
echo "<h4>Titulo</h4>";
$variable=ob_get_contents();
// limpiando el buffer
ob_end_clean();
?>
document.getElementById("algo"
.innerHTML += "<?=$variable;?>";
}
Esto fue lo máximo que logre con esto, pero yo quería mas, tenia la mitad de lo que quería lograr es decir podía llamar una pagina php ejecutarla y ver los resultados sin refrescar la pagina o hacer un submit, pero no le podía enviar parámetros a la pagina php para que ella trabajara con esos datos. Por ejemplo poner un input del tipo entre su código y Luego un botón tipo enviar y que mas abajo en un div muestre los datos de la persona que este en una base de datos, ya que el php buscaría el código de la persona y arrojaría los resultados sin refrescar la pagina, estilo ajax , pero, ¿como mandar el valor del input? Lo intente de muchas formas y lo mas cercano fue guardar las variables y los valores en cookies con javascript y luego leerlos con php pero no funciono como quería ya que la cookie solo se hace visible en la siguiente actualización de la pagina, ósea que no logre nada.
Así que por un día deje las cosas así, pero después me dedique a buscar en Internet si alguien había hecho lo que yo apenas intentaba hacer, es decir hacer ajax sin xmlhttprequest y si lo encontré acá http://www.anieto2k.com/2007/01/04/ ajax -sin-usar-el-objeto- xmlhttprequest /, en esta ocasión ya no eran dos archivos sino tres los necesarios para hacer esta magia y son estos:
Primero necesitamos un fichero alojado en el servidor que será el encargado de devolvernos los datos. En nuestro caso un . php .
<? php
$html = '<b>This content came from our Ajax Engine</b>';
// Generamos un JS con el contenido de $html
?>
div = document.getElementById('contentdiv');
div.innerHTML = '<? php echo $html; ?>';
Una vez montado este fichero que nos carga una variable ($html) y que mediante Javascript queremos que la inserte dentro del elemento con ID contentdiv, tenemos que montar la función que nos llamará a esta página para obtener los datos.
url = document.location.href;
xend = url.lastIndexOf("/"
+ 1;
var base_url = url.substring(0, xend);
function ajax_do (url) {
// ¿La URL empieza por http?
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
// Creamos un nuevo elemento <script></script>
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url;
// Añadimos el elemento al body de nuestro fichero.
document.body.appendChild (jsel);
}
Y este es el html
<html>
<head>
<title>Demo 1 - The Basic's</title>
<script type="text/javascript" src=engine.js>
</script>
</head>
<body>
<div id="contentdiv"></div>
<a href="javascript:ajax_do ('pagina. php ');">Cargar contenido</a>
</body>
</html>
Pero incluso con esta otra forma de llamar paginas que es mucho mas ventajosa y sofisticada que la anterior ya que le podemos pasar como parámetro la pagina php que queremos ejecutar, aun no le podemos enviar parámetros a dicha pagina, pero con la forma en que programaron la manera de llamar la pagina php solo era cuestión de añadirle un par de detalles para que hiciera los que yo tanto anhelaba, no entiendo porque el que hizo esta función no lo visualizo y se lo agrego, hubiera quedado mucho mas funcional, pero bueno para eso estoy yo, para mejorar las cosas, así que le agregué lo que hacia falta para enviarle parámetros a la pagina escrita en php , y listo.
Pero entonces veamos el código modificado:
El php :
<? php
ob_start();
$html = '<b>Este contenido lo agrego nuestro motor de ajax <br>';
echo $html;
echo $valor.”<br>”;
echo $otro. ”<br>”;
$variable=ob_get_contents();
// limpiando el buffer
ob_end_clean();
?>
div = document.getElementById('contentdiv');
div.innerHTML = '<? php echo $variable; ?>';
el javascript
url = document.location.href;
xend = url.lastIndexOf("/"
+ 1;
var base_url = url.substring(0, xend);
function ajax_do (form,url) { //envio el formulario tambien
params="?";
for(i = 0; i<form.length;i++) //recorre el formulario en busca de los valores de los campos
{
if(form.elements.name.indexOf('_',0)==-1) // este if discrimina los inputs a los que se les tomara el valor para agregarlo a params
{
params+=form.elements.name+"="+form.elements.value+"&"; //params almacena una cadena estilo “?var1=’valor’&var2=’12’
}
}
params=params.substr(0,params.length-1); //esto quita el ultimo “&”
// ¿La URL empieza por http?
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
// Creamos un nuevo elemento <script></script>
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url+params; //acá esta la magia de todo pues, el src del script creado es una llamada a un php con parámetros
// Añadimos el elemento al body de nuestro fichero.
document.body.appendChild (jsel);
//alert(jsel.src); para ver como queda la variable
}
Si ven lo que hice no fue algo que necesito gran conocimiento, pero si un poco de malicia y quedo mucho mejor, en mi concepto.
Entonces su uso es muy sencillo puedo crear un php que imprima una consulta o lo que sea, la única condición es que tenga la estructura del mostrada arriba, y que en el html se llame a la función pasándole como primer argumento la palabra form, y luego la pagina php a procesar, y los inputs que tienen valores que no se necesiten procesar en el php pues se le antepone el subguión ejemplo “_no” esta no será tomada en cuenta, las demás si, esto hace necesario ponerle nombre a todos los elementos dentro del formulario, teniendo en cuenta eso
<html>
<head>
<title>Ejemplo 1</title>
<script type="text/javascript" src="engine.js"></script>
</head>
<body>
<div id="contentdiv">
</div>
<form name="a">
<input name="valor" type="Text" value="uno">
<input name="otro" type="Text" value="dos">
<input name="_no" type="Text" value="tres">
<input name="_tampoco" type="button" onclick="ajax_do (form,'page1. php ');" value="Get content" />
</form>
</body>
</html>
Conclusiones: esta forma me parece muy fácil para hacer cosas parecidas a lo hecho con el objeto xmlhttprequest que no he usado porque lo que he leído me ha parecido un poco complicado y me ha dado pereza, lo cual comprueba que esto es mas fácil de usar, pero no que es mas poderoso o infalible.
Algo que veo de malo es que de esta forma no se puede separar el php del html almenos no he podido hacerlo ya que la salida se debe hacer a punta de echo o printf, por lo cual no se puede escribir directamente html en el archivo php que guarda todo el buffer de salida en una variable y al final javascript lo manda al documento.
Pero para mi, usare esta forma como sustituto xmlhttprequest para hacer ajax hasta que se me quede pequeño y me obligue a escoger una mejor solución.
Espero les haya servido de algo y cualquier comentario, mejora u opinión será bien recibida.
Enlace a los fuentes del post http://mygnet.net/it/descargas/codigos/ajax_sin_xmlhttprequest.2398.zip