Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: G2K en 20 de Febrero de 2008, 18:46:59 pm
-
Bueno pues aquí estamos... otro tuto más, que me puesto a programar antes de ponerme a estudiar para el examen... manias mias jajajja
Pues bueno empezemos...
Seguro que os abreis preguntado como hacer una pagina Web que cambiara unos pequeños numerillos de toda la pagina o "chorraditas" de estas jejeje
Empezamos con el index.php
<html>
<head>
<style>
.titulo {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#990000;
font-size:24px;
}
.titulo_ac {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#990000;
font-size:14px;
font-weight:bold;
}
.titulo_sec {
font-family:Arial, Helvetica, sans-serif;
color:#333333;
font-weight:bold;
}
td {
border:thin solid #000000;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>
<script language="javascript" type="text/javascript">
//ESTA PARTE ES LA MÁS USUAL DE LOS CODIGOS AJAX Y LA MÁS NECESARIA QUE ES LA QUE NOS PERMITIRA CONTACTAR CON EL SERVIDOR EN TODO MOMENTO
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();
//Creamos la función que llamara a la pagina para que nos devuelva los valores el servidor
function refrescar_acciones() {
var pagina = 'script_server.php';
al = parseInt(Math.random()*999999999999999);
var pagina_entera = pagina+"?aleatorio="+al;
http.open("GET", pagina_entera, true);
http.onreadystatechange = dar_acciones;
http.send(null);
}
function dar_acciones() {
if (http.readyState == 4) {
if(http.status == 200) {
for(id=1;id<=5;++id){ //Creamos un bucle para colocar los datos en sus respectivas celdas
var acciones = http.responseXML.getElementsByTagName("porcentaje")[id-1]; //sacamos el valor de la etiqueta porcentaje del document XML que nos envia el servidor y le restamos 1 porque al igual que con los arrays este empieza siempre por 0
document.getElementById('porcentaje'+id).innerHTML = acciones.childNodes[0].nodeValue+' %';
//Aquí nos encargaremos de mostrar una imagen u otra segun el porcentaje de la acción de bolsa
if(acciones.childNodes[0].nodeValue>0){
document.getElementById('imagen'+id).innerHTML = '<div align="center"><img height="9" width="9" src="arriba.gif"></div>';
} else if(acciones.childNodes[0].nodeValue<0){
document.getElementById('imagen'+id).innerHTML = '<div align="center"><img height="9" width="9" src="abajo.gif"></div>';
} else {
document.getElementById('imagen'+id).innerHTML = '';
}
}
}
}
}
setInterval("refrescar_acciones()", 3000); //Le decimos que se encarge de refrescar las acciones cada 3 minutos
</script>
</head>
<body onload="refrescar_acciones()">
<table width="550" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="61" colspan="3"><div class="titulo" align="center">Simple ejemplo de acciones en bolsa<font size="1"><br />(Usando AJAX)</font></div></td>
</tr>
<tr>
<td height="26" colspan="3" valign="middle"><div align="center" class="titulo_ac">Acciones</div></td>
</tr>
<tr>
<td width="332" height="35" valign="middle" class="titulo_sec">Nombre</td>
<td width="114" valign="middle" class="titulo_sec"><div align="center">Porcentaje </div></td>
<td width="104" class="titulo_sec"><div align="center">Imagen</div></td>
</tr>
<tr>
<td height="30" valign="middle"><font color="#000066">Timofónica</font></td>
<td valign="middle" id="porcentaje1"><!--DWLayoutEmptyCell--> </td>
<td valign="middle" id="imagen1"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="30" valign="middle"><font color="#000066">Estafatónica</font></td>
<td valign="middle" id="porcentaje2"><!--DWLayoutEmptyCell--> </td>
<td valign="middle" id="imagen2"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="30" valign="middle"><font color="#FF0000">Estafafone</font></td>
<td valign="middle" id="porcentaje3"><!--DWLayoutEmptyCell--> </td>
<td valign="middle" id="imagen3"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="30" valign="middle">Pijital Plus</td>
<td valign="middle" id="porcentaje4"><!--DWLayoutEmptyCell--> </td>
<td valign="middle" id="imagen4"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="30" valign="middle"><font color="#006600">Fanatik Soccer</font></td>
<td valign="middle" id="porcentaje5"><!--DWLayoutEmptyCell--> </td>
<td valign="middle" id="imagen5"><!--DWLayoutEmptyCell--> </td>
</tr>
</table>
</body>
</html>
Creamos el scrip_server.php
<?
header('Content-Type: text/xml'); //ponemos la cabezera para que lo muestre como XML
echo "<?xml version=\"1.0\"?>
<acciones>"; //indicamos version de XML y abrimos primera etiqueta
for($acciones=1;$acciones<=5;++$acciones){ //creamos un bucle
echo"<porcentaje>".(rand(-1000,1000)/100)."</porcentaje>"; //cremos los numeros aleatorios que mostrara el la pagina, la etiqueta porcetaje sirve para que tengamos una referencia luego a la hora de buscarla
}
echo"</acciones>"; //cerramos la etiquita acciones
?>
FIN!
Siento haver sido breve con las explicaciones, ya que no ando bien de tiempo... Si hay dudas comentarlas en el post.
Un saludo! ;)
Ejemplo On-line (http://fanatiksoccer.no-ip.biz/ejemplo_bolsa/)
-
Me gusta, me a encantado.
Te doy un karma.
Saludos
-
Muahah! Estaba esperando un tuto parecido! Karka +!
Saludos! :)
-
Gracias por los karmas ;)
La verdad es que tenia pensado hacerlo desde hace mucho tiempo y hoy me dio la venada y me puse en un rato y lo hice porque me parecio util ya que la gente puede tomarlo como ejemplo y hacer sus codigos parecidos :P
Espero que con esto haya quedado claro como usar AJAX generando un archivo XML con PHP y que os animeis a hacer codigos y hacer algunos tutos que no es tan dificil como parece :P
-
con esto se podria acer k al darle al link cmabiaran todas lass imagenes?
Intentaré acerlo
-
westwest para eso no te hace falta AJAX... con JS tienes de sobras ;)
-
joder xD, = intentaré
-
Suerte ;)
-
Justo esto queria hacer yo con php xD de Ajax no entiendo ni pio... pero se ve bueno.. +karma
-
Gracias por el karma ;)
-
Explicame como funciona :P porfavor