Ejercicios resueltos

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 página que muestre una imagen y permita calificarla con un valor entre 1 y 10. Permitir ingresar el nombre del visitante. Disponer de un control de tipo select para seleccionar el valor. Luego al presionar un botón enviar el valor seleccionado utilizando el objeto XMLHttpRequest al servidor donde almacenaremos en un archivo de texto el nombre del visitante y el puntaje. Retornar luego todos los votos hasta el momento. Actualizaremos la página HTML con todos los nombres y votos hasta el momento.

pagina.html
<html> <head> <title>Problema</title> <script src="funciones.js" language="JavaScript"></script> </head> <body> <h1>Vote esta foto</h1> <p> <img src="../foto1.jpg" alt="cuadro sobre geometria generativa"> </p> Nombre:<input type="text" id="nombre" size="20"><br> Voto:<select id="voto"> <option value="0" selected>seleccione</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select><br> <input type="button" id="boton1" value="votar"> <div id="resultados"></div> </body> </html>

Ejecutar ejemplo

funciones.js
addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('boton1'); addEvent(ob,'click',presionBoton,false); } function presionBoton(e) { var ob1=document.getElementById('voto'); var ob2=document.getElementById('nombre'); cargarVoto(ob1.value,ob2.value); } var conexion1; function cargarVoto(voto,nom) { conexion1=crearXMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true); conexion1.send(null); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4) { resultados.innerHTML = conexion1.responseText; } else { resultados.innerHTML = 'Cargando...'; } } //*************************************** //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 header('Content-Type: text/html; charset=ISO-8859-1'); $ar=fopen("puntaje.txt","a") or die("No se pudo abrir el archivo"); fputs($ar,"Nombre:".$_REQUEST['nombre']."<br>"); fputs($ar,"Voto:".$_REQUEST['puntaje']."<br><br>"); fclose($ar); $ar=fopen("puntaje.txt","r") or die("No se pudo abrir el archivo"); while (!feof($ar)) { $linea=fgets($ar); echo $linea; } fclose($ar); ?>

5 - Objeto XMLHttpRequest