Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: Siquillote en 30 de Noviembre de 2010, 20:48:52 pm
-
¡Hola! Poco a poco voy adquiriendo conocimientos sobre este lenguaje y he podido crear un mini script que te permite actualizar cierto contenido de tu página web con solo pasar el ratón. De momento (Al no ser que tu sepas) este script está enfocado para usarlo para 1 cosa por cada página ya que no se hacer varias peticiones AJAX en un mimo documento.
Es decir, que solo podrás actualizar al pasar el ratón por un box o una ventana o una imagen... lo que quieras pero solo 1 cosa ya que como he dicho antes, solo se hacer una consultar por página. Bueno es un código bastante sencillo y eficaz.
index.php o index.html
Solo debemos agregar un código AJAX al documento donde queremos que se actualize el elemento. Mirar:
<script language="javascript" type="text/javascript">
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function enviarHTTP () {
var valor = document.getElementById("usuario").value;
var rand = parseInt(Math.random()*99999999);
var query= "usuario=" + valor + "&rand=" + rand;
http.open ("GET", "ajax.php?" + query, true);
http.onreadystatechange = respuestaHTTP; del servidor
http.send(null);
}
function respuestaHTTP () {
if (http.readyState == 4) {
if (http.status == 200) {
var respuesta_php = http.responseText;
document.getElementById("div_usuario").innerHTML = respuesta_php;
}
else
alert("Ha habido un problema al acceder al servidor: " + http.statusText);
setTimeout('Proceso()', 1000);
}
if (http.readyState < 4) {
document.getElementById("div_usuario").innerHTML = 'Cargando...';
}
}
</script>
Dentro de este código debemos diferenciar varios puntos que serán clave para que nuestro elemento a actualizar sea con éxito. Los puntos con los que debemos fijarnos son los siguientes (Son pocos):
- var valor = document.getElementById("usuario").value; //cambias "usuario" por la id o nombre del div donde pasas el ratón. Por ejemplo si es <div id="refrescar">Contenido....</div> pues cambiarías usuario por refrescar.
- var query= "usuario=" + valor + "&rand=" + rand; // esto será la dirección URL que manda AJAX a nuestro archivo PHP. Como hemos puesto usuario pues ajax mandará la petición al archivo PHP con la URL: ajax.php?usuario=nombre/datos recogidos en el div.
- http.open ("GET", "ajax.php?" + query, true); //Como he dicho antes, mandará los datos a ajax.php, lo puedes cambiar pero es aconsejable dejarlo ahora así para entender el tutorial ;)
- document.getElementById("div_usuario").innerHTML = respuesta_php; //Esto es la respuesta PHP que haya generado nuestro script para luego insertarla en la div: div_usuario
//(Cambialo si quieres, pero igualemnte, dejalo así de momento para entendernos). - document.getElementById("div_usuario").innerHTML = 'Cargando...'; // Este será el mensaje que se mostrará en el div donde pasaremos el ratón para que se actualize y mientras se realiza el proceso, mostrará el mensaje: Cargando..
ajax.php
Ahora tenemosque generar el archivo PHP para dar una respuesta a AJAX y este muestre el resultado. Como es material de tutorial, vamos a generar simples números y si te animas, practicas ;]. Es decir, como solo queremos que se refresque cierto contenido para que nos muestre unos numeros solo necesitamos un código PHP que genere los numeros aleatoriamente de esta manera.
<?php
$num = rand(0,35);
echo $num;
?>
Como es de esperar, este código PHP nos devolverá un numero aleatorio entre 0 y 35 para que AJAX lo muestre en el div div_usuario. ya cada uno puede realizar lo que quiera con este código php, es decir, que devuelva numeros o letras o datos de la bd...
Explicación
Como he ido comentando poco a poco los puntos del documento AJAX, digamos que no requiere mas explicación salvo algo que destaca en el archivo index.php/.html y resulta que al div usuario le hemos colocado un atributo llamado onmouserover con la acción EnviarHTTP () que quiere decir que al pasar el ratón por ese div, llame a AJAX y este a PHP.
Luego a parte de onmouseover (Pasar el ratón) existen muchos otros atributos como onclick (Al hacer click) que también llame a EnviarHTTP () de la siguiente manera: onclick="EnviarHTTP ()" ect... ¡Practica!.
Datos de importancia
Este tutorial sigue una base de tutorial por el usuario G2K/Martin10 en esta misma sección, es mas, lo puedes encontrar aquí: http://www.phperos.net/foro/index.php?topic=1935.0 y la finalidad del tutorial es querer aprender.
También podeis ver el ejemplo en vivo en una sección de un dominio que lo tengo medio inactivo pero muy bueno aquí: http://angelsamuel.com/AJAX/
Final
Pues nada, un saludo y espero que te sirva ;)
-
Muy bueno Siqui, mis felicitaciones!
PD; Amigos, no cuesta nada agradecer.
-
¿Para qué nos puede servir realmente algo así?
-
¿Para qué nos puede servir realmente algo así?
Quizás al pasar el ratón no tenga mucha utilidad pero basta con cambiar onmouseover por onclick para actualizar la página al hacer click en un botón o algo por el estilo, ¿Comprendes?.
-
Muy buena utilidad, tal vez me serviría muy pronto para un proyecto. Gracias 1+.
-
Muy buena utilidad, tal vez me serviría muy pronto para un proyecto. Gracias 1+.
De nada!
-
+1 gracias por el aporte (:
-
+1 gracias por el aporte (:
De nada! :P