18 - Encuenta con AJAX
Simulador
(Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.
)
Confeccionar una encuesta utilizando AJAX.
pagina1.html
<html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <body> <h1>Implementación de una encuesta empleando AJAX.</h1> <form action="pagina1.php" method="post" id="formulario"> <fieldset> <h2>Que lenguaje utiliza para la implementación de páginas dinámicas?</h2> <div id="encuesta"> <input type="radio" id="radio1" name="radio">PHP<br> <input type="radio" id="radio2" name="radio">ASP<br> <input type="radio" id="radio3" name="radio">JSP<br> <input type="submit" value="Enviar" id="enviar"> </fieldset> </div> </form> </body> </html>
funciones.js
addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ref=document.getElementById('formulario'); addEvent(ref,'submit',enviarDatos,false); } function enviarDatos(e) { if (window.event) window.event.returnValue=false; else if (e) e.preventDefault(); if (document.getElementById('radio1').checked) enviarSeleccion(1); else if (document.getElementById('radio2').checked) enviarSeleccion(2); else if (document.getElementById('radio3').checked) enviarSeleccion(3); } var conexion1; function enviarSeleccion(cod) { conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; var aleatorio=Math.random(); conexion1.open('GET','pagina1.php?codigo='+cod+"&aleatorio="+aleatorio, true); conexion1.send(null); } function procesarEventos() { var encuesta = document.getElementById("encuesta"); if(conexion1.readyState == 4) { encuesta.innerHTML = '<img src="encuesta.png">'; } else { encuesta.innerHTML = '<img src="../cargando.gif">'; } } //*************************************** //Funciones comunes a todos los problemas //*************************************** function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } function crearXMLHttpRequest() { var xmlHttp=null; if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); return xmlHttp; }
pagina1.php
<?php $preg=$_REQUEST['codigo']; $conexion=mysql_connect("localhost","root","z80") or die("Problemas en la conexion"); mysql_select_db("bdajax",$conexion) or die("Problemas en la seleccion de la base de datos"); if ($preg==1) $registros=mysql_query("update encuesta set pregunta1=pregunta1+1 where codigo=1",$conexion) or die("Problemas en el select:".mysql_error()); if ($preg==2) $registros=mysql_query("update encuesta set pregunta2=pregunta2+1 where codigo=1",$conexion) or die("Problemas en el select:".mysql_error()); if ($preg==3) $registros=mysql_query("update encuesta set pregunta3=pregunta3+1 where codigo=1",$conexion) or die("Problemas en el select:".mysql_error()); $registro=mysql_query("select * from encuesta where codigo=1",$conexion) or die(mysql_error()); $reg=mysql_fetch_array($registro); $barra=new Barra(500,300); $barra->fijarprofundidad(20); $barra->sumar($reg['pregunta1'],"PHP"); $barra->sumar($reg['pregunta2'],"ASP"); $barra->sumar($reg['pregunta3'],"JSP"); $barra->graficar(); class Barra { var $ancho; var $alto; var $imagen; var $profundidad; var $colorfondo; var $vectorcolorfondo; var $colorbarra; var $vectorcolorbarra; var $colorvalores; //almacena los valores y los titulos de cada barra var $datos; function sumar($valor,$titulo) { $indice=count($this->datos); $this->datos[$indice]['valor']=$valor; $this->datos[$indice]['titulo']=$titulo; } function fijarcolorfondo($rojo,$verde,$azul) { $this->vectorcolorfondo[0]=$rojo; $this->vectorcolorfondo[1]=$verde; $this->vectorcolorfondo[2]=$azul; $this->colorfondo=ImageColorAllocate($this->imagen,$this->vectorcolorfondo[0],$this->vectorcolorfondo[1],$this->vectorcolorfondo[2]); ImageFill($this->imagen,0,0,$this->colorfondo); } function fijarcolorbarra($rojo,$verde,$azul) { $this->vectorcolorbarra[0]=$rojo; $this->vectorcolorbarra[1]=$verde; $this->vectorcolorbarra[2]=$azul; $this->colorbarra=ImageColorAllocate($this->imagen,$this->vectorcolorbarra[0], $this->vectorcolorbarra[1],$this->vectorcolorbarra[2]); } function fijarprofundidad($profundidad) { $this->profundidad=$profundidad; } //Metodo privado function mayor() { $primera=true; $may=0; foreach ($this->datos as $val) { if ($primera) { $primera=false; $may=$val['valor']; } if ($val['valor']>$may) $may=$val['valor']; } return $may; } function graficarsombraizquierda($columna,$y1,$y2) { $rojo=$this->vectorcolorbarra[0]-90; if ($rojo<0) $rojo=0; $verde=$this->vectorcolorbarra[1]-90; if ($verde<0) $verde=0; $azul=$this->vectorcolorbarra[2]-90; if ($azul<0) $azul=0; $colorsombra=imageColorAllocate($this->imagen,$rojo,$verde,$azul); $puntos[]=$columna; $puntos[]=$y1; $puntos[]=$columna; $puntos[]=$y2; $puntos[]=$columna+$this->profundidad; $puntos[]=$y2-$this->profundidad; $puntos[]=$columna+$this->profundidad; $puntos[]=$y1-$this->profundidad; imagefilledpolygon($this->imagen,$puntos,4,$colorsombra); $colorbordebarra=imageColorAllocate($this->imagen,0,0,0); imagepolygon($this->imagen,$puntos,4,$colorbordebarra); } function graficarsombrasuperior($columna,$y1,$anchobarra) { $rojo=$this->vectorcolorbarra[0]-40; if ($rojo<0) $rojo=0; $verde=$this->vectorcolorbarra[1]-40; if ($verde<0) $verde=0; $azul=$this->vectorcolorbarra[2]-40; if ($azul<0) $azul=0; $colorsombra=imageColorAllocate($this->imagen,$rojo,$verde,$azul); $puntos[]=$columna; $puntos[]=$y1; $puntos[]=$columna+$anchobarra; $puntos[]=$y1; $puntos[]=$columna+$anchobarra+$this->profundidad; $puntos[]=$y1-$this->profundidad; $puntos[]=$columna+$this->profundidad; $puntos[]=$y1-$this->profundidad; imagefilledpolygon($this->imagen,$puntos,4,$colorsombra); $colorbordebarra=imageColorAllocate($this->imagen,0,0,0); imagepolygon($this->imagen,$puntos,4,$colorbordebarra); } function Barra($ancho,$alto) { $this->ancho=$ancho; $this->alto=$alto; $this->imagen=imageCreate($this->ancho,$this->alto); $this->vectorcolorfondo[0]=0; $this->vectorcolorfondo[1]=0; $this->vectorcolorfondo[2]=255; $this->colorfondo=ImageColorAllocate($this->imagen,$this->vectorcolorfondo[0],$this->vectorcolorfondo[1],$this->vectorcolorfondo[2]); ImageFill($this->imagen,0,0,$this->colorfondo); $this->vectorcolorbarra[0]=255; $this->vectorcolorbarra[1]=255; $this->vectorcolorbarra[2]=0; $this->colorbarra=ImageColorAllocate($this->imagen,$this->vectorcolorbarra[0], $this->vectorcolorbarra[1],$this->vectorcolorbarra[2]); $this->profundidad=10; $this->colorvalores=ImageColorAllocate($this->imagen,0,0,0); } function graficar() { $may=$this->mayor(); $anchobarra=($this->ancho-110)/count($this->datos); $x1=10; $y1=$this->alto-50; $colorbordebarra=imageColorAllocate($this->imagen,0,0,0); foreach($this->datos as $reg) { $altura=($reg['valor']/$may)*($this->alto-80); imagefilledrectangle($this->imagen,$x1,$y1-$altura,$x1+$anchobarra,$y1,$this->colorbarra); imagerectangle($this->imagen,$x1,$y1-$altura,$x1+$anchobarra,$y1,$colorbordebarra); ImageString($this->imagen,2,$x1+3,$y1,$reg['titulo'],$this->colorbarra); $this->graficarsombraizquierda($x1+$anchobarra,$y1-$altura,$y1); $this->graficarsombrasuperior($x1,$y1-$altura,$anchobarra); ImageString($this->imagen,2,$x1+3,$y1-$altura+5,$reg['valor'],$this->colorvalores); $x1=$x1+$anchobarra+(100/count($this->datos)); } Header ("Content-type: image/png"); ImagePNG ($this->imagen,"encuesta.png"); ImageDestroy($this->imagen); } } ?>