Legido Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
El ejemplo consta de tres piezas:

| htm.htm | El archivo que incluye 'ajax.js' y el formulario donde está la '<div>' donde se mostrará el contenido de lo que devuelva 'php.php' |
| ajax.js | Contiene el código que crea el objeto 'XMLHttpRequest', la madre del cordero |
| php.php | Recibe los datos que le llegan a través del objeto 'XMLHttpRequest', procesa la información y devuelve una salida, que irá a parar a la '<div>' especificada en 'ajax.js' |

El proceso es el siguiente:

1. Se crea un archivo .htm con un evento que dispare ajax, en nuestro caso un 'onChange'

2. Ajax crea el objeto 'XMLHttpRequest', que de forma asíncrona enviará datos al servidor 

3. El servidor (página php) procesa los datos que le llegan y procesa la respuesta

4. Ajax obtiene la respuesta del servidor y la coloca en una etiqueta '<div>'


**htm.htm**

<code>
<html>

<head>

<script type="text/javascript" src="javascript.js"></script>

</head>

<body onload="Iniciar()" onunload="Finalizar()">

<table width="100%">
<tr>
	<td>
	
	<table width="100%">
	<tr>
		<td>
		Habitaciones:
		</td>
	</tr>
	<tr>
		<td>
		<select id="habitaciones" onChange="Procesar()">
		<option value="0" selected>CUALQUIERA</option>
		<option value="1">1 o m&aacute;s</option>
		<option value="2">2 o m&aacute;s</option>
		</select>
		</td>
	</tr>
	</table>
	
	</td>
</tr>
<tr>
	<td>

	<table width="100%">
	<tr>
		<td>
		<div id="resultado"></div>
		</td>
	</tr>
	</table>
	
	</td>
</tr>
</table>
</body>

</html>
</code>

**ajax.js**

<code>
function Procesar()
{
	var xmlhttp;

	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
	}
	else
	{
		alert('Your browser does not support XMLHTTP!');
	}	

	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState==4)
		{
			// OJO ahí va el nombre de la <div> donde se mostrará el resultado
			document.getElementById('resultado').innerHTML=xmlhttp.responseText;
		}
	}	
	
	var oHabitaciones=document.getElementById('habitaciones');
	var nNumeroHabitaciones=oHabitaciones.selectedIndex;

	// OJO ese es el nombre del archivo que procesará, en el lado servidor, los datos
	var sUrl='php.php';
	// OJO la variable que se le pasa al servidor es $_GET['Variable']
	sUrl=sUrl+'?Variable='+nNumeroHabitaciones;
	sUrl=sUrl+'&sid='+Math.random();	
	xmlhttp.open('GET',sUrl,true);
	xmlhttp.send(null);
}
</code>

**php**

<code>
<?php

echo 'Se ha recibido la variable: '.$_GET['Variable'];

?>
</code>