August 17, 2006
Cuando trabajo con AJAX solo uso dos funciones: crear el objeto y cargar los datos, el resto es pura creatividad y javascript...
Bien, la funcion que hace todo es CARGARDATOS(pagina,capa, parametros)
- Indico la página
- Indico la capa o DIV
- Envio los parámetros ("cod="+valor+"&cod2"+valor2+"texto"+escape(textogrande))
Y como envio por el método POST, ya sea en PHP o ASP los recibo con un $_POST['valor']; o un Request.form("valor")
Bueno AJAX funciona con cualquier lenguaje...
Vamos hacer un ejemplo práctico....
Digamos que queremos que al dar click en un link y se muestren los datos de otra página....
Pagina.html
Este blog aun esta en BETA y no me deja escribir codigo HTML... asi que les usaré parentesis en ves de los simbolos mayor y menor
----------------------------------
(a href="#" onclick="CARGARDATOS('PaginaDos.php','Muestra_aqui', 'parametro=cadena123'); ">VER PAGINA 2(/a)
(div id="Muestra_aqui")(/div)
----------------------------------
PaginaDos.php
Para probar solo abrimos Pagina.html y le hamos click en el enlace...
No necesariamente es PHP, puedes probar con páginas HTML o ASP o lo que quieras... Al final AJAX llama al HTML generado por PaginaDos.php o PaginaDos.asp o PaginaDos.jsp o PaginaDos.html, etc...
Así de fácil
...
function AJAX()
{ //funcion que sirve para conectarse
var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
var ajax = false;
for(var i=0 ; !ajax && itry{ ajax = new ActiveXObject(ajaxs[i]); }
catch(e) { ajax = false; }
}
if(!ajax && typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
return ajax;
}
}
function CARGARDATOS(pagina,capa, parametros){
var ajax = AJAX();
if(!ajax){
alert("No se puede ejecutar este proceso: Error de navegador");
return false;
}
document.getElementById(capa).innerHTML = "Cargando Datos ";
ajax.open("POST",pagina,true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200)
{
document.getElementById(capa).innerHTML=ajax.responseText;
}
else
{
alert('Se detectó problemas en su conexion a internet o el servidor esta saturado, por favor pulse aceptar y luego Actualize la web pulsado la tecla F5');
}
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(parametros);
Bien, la funcion que hace todo es CARGARDATOS(pagina,capa, parametros)
- Indico la página
- Indico la capa o DIV
- Envio los parámetros ("cod="+valor+"&cod2"+valor2+"texto"+escape(textogrande))
Y como envio por el método POST, ya sea en PHP o ASP los recibo con un $_POST['valor']; o un Request.form("valor")
Bueno AJAX funciona con cualquier lenguaje...
Vamos hacer un ejemplo práctico....
Digamos que queremos que al dar click en un link y se muestren los datos de otra página....
Pagina.html
Este blog aun esta en BETA y no me deja escribir codigo HTML... asi que les usaré parentesis en ves de los simbolos mayor y menor
----------------------------------
(a href="#" onclick="CARGARDATOS('PaginaDos.php','Muestra_aqui', 'parametro=cadena123'); ">VER PAGINA 2(/a)
(div id="Muestra_aqui")(/div)
----------------------------------
PaginaDos.php
----------------------------------
<?
$valor=$_POST['parametro'];
echo "Hola, alguien me llamo desde otro lado?,mmm... seguro fué de AJAX ¬¬ ";
echo "
";
echo $valor;
?>
----------------------------------
Para probar solo abrimos Pagina.html y le hamos click en el enlace...
No necesariamente es PHP, puedes probar con páginas HTML o ASP o lo que quieras... Al final AJAX llama al HTML generado por PaginaDos.php o PaginaDos.asp o PaginaDos.jsp o PaginaDos.html, etc...
Así de fácil