Código completo de este ejemplo Ajax Nivel II

Aquí está el código completo del Ejemplo Ajax Nivel II.

Archivo index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Segundo Ejemplo en Ajax</title>
</head>
<script language="javascript" type="text/javascript">
   var request = false;
   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = false;
       }  
     }
   }

if (!request)
     alert("Error inicializando XMLHttpRequest!");

     function obtenerInfoCliente() {
     var phone = document.getElementById("telefono").value;
     var url = "buscarcliente.php?phone=" + encodeURIComponent(phone);  // Podemos poner escape aqu en cada variable o urlencode en la variable de PHP.
     request.open("GET", url, true);
     request.onreadystatechange = actualizarPagina;
     request.send(null);
}

function actualizarPagina () {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var respuesta = request.responseText.split("|");
 				 		 document.getElementById("solicitud").value = respuesta[0];
						 if (respuesta[1]!=undefined)
									 document.getElementById("direccion").innerHTML = respuesta[1].replace(/\n/g, "<br>");
		} else
	alert("Estado es " + request.status);
	}
}

/*
En los archivos PHP todas las variables que vayamos a enviar pasarlas antes por un urlencode

Cdigo PHP:
$variable = urlencode($variable);  

En el archivo de AJAX al recoger el resultado debemos hacer un unescape, para mostrar los carcteres correctamente y no su cdigo


Cdigo PHP:
txt=unescape(ajax.responseText); 
txt2=txt.replace(/+/gi," "); 
document.getElementById(contenidor).innerHTML=txt2;  

Tambin hice el replace debido a que el unescape dejaba en lugar de los espacios en blanco un +.
*/
</script>
<body>
<p><img src="pizzahut.jpg" alt="Pizza Hut Pizza" /></p>
<form action="POST">
	<p>Introduzca su n&uacute;mero:
		<input type="text" size="14" name="telefono" id="telefono" onChange="obtenerInfoCliente();" />
	</p>
	<p>Su pizza ser&aacute; entregada en la direcci&oacute;n:</p>
	<div id="direccion"></div>
	<p>Escriba su solicitud aqu&iacute;:</p>
	<p>
		<textarea name="solicitud" rows="6" cols="50" id="solicitud"></textarea>
	</p>
	<p>
		<input type="submit" value="Pedir una Pizza" id="submit" />
	</p>
</form>
</body>
</html>

Codigo de buscarcliente.php:

<?php
if ($_GET['phone']=="123")

	echo utf8_encode("Pizza Tropical|Rua Fray Rosendo Salvado Nº 25, 3º C\n15705 Santiago de Compostela\nA Coruña");

else

	echo "No esta en la base de datos.|No existe.";
?>

Fichero con los archivos y la imagen: http://informatica.iessanclemente.net/manuais/images/6/65/Ejemplo-Ajax-Nivel-II.zip

Código completo de este ejemplo Ajax Nivel II

Menú de navegación

Buscar