Autor Tema: [APORTE] ¡Actualiza tu web al pasar el ratón!  (Leído 7449 veces)

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
[APORTE] ¡Actualiza tu web al pasar el ratón!
« 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:
Código: [Seleccionar]
<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 ;)

#Fdo. Physlet

Comunidad PHPeros

[APORTE] ¡Actualiza tu web al pasar el ratón!
« en: 30 de Noviembre de 2010, 20:48:52 pm »

Desconectado тockηick

  • PHPero Avanzado
  • ****
  • Mensajes: 374
  • Karma: 11
    • Ver Perfil
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #1 en: 10 de Diciembre de 2010, 13:21:11 pm »
Muy bueno Siqui, mis felicitaciones!

PD; Amigos, no cuesta nada agradecer.

Desconectado Physlet

  • PHPero Experto
  • *****
  • Mensajes: 822
  • Karma: 41
  • Sexo: Masculino
  • Todo es posible con esfuerzo, dedicación e interés
    • Ver Perfil
    • PanamaDev
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #2 en: 10 de Diciembre de 2010, 14:58:32 pm »
¿Para qué nos puede servir realmente algo así?

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #3 en: 07 de Enero de 2011, 00:34:47 am »

¿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?.

#Fdo. Physlet

Desconectado Edwin

  • PHPero Avanzado
  • ****
  • Mensajes: 404
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #4 en: 07 de Enero de 2011, 17:36:48 pm »
Muy buena utilidad, tal vez me serviría muy pronto para un proyecto. Gracias 1+.

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #5 en: 07 de Enero de 2011, 18:34:07 pm »

Muy buena utilidad, tal vez me serviría muy pronto para un proyecto. Gracias 1+.

De nada!

#Fdo. Physlet

Desconectado Fermin

  • PHPero Experto
  • *****
  • Mensajes: 783
  • Karma: 7
  • Sexo: Masculino
  • Nada que decirte.
    • Ver Perfil
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #6 en: 08 de Enero de 2011, 16:47:41 pm »
+1 gracias por el aporte (:

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[APORTE] ¡Actualiza tu web al pasar el ratón!
« Respuesta #7 en: 23 de Enero de 2011, 00:22:45 am »

+1 gracias por el aporte (:

De nada! :P

#Fdo. Physlet