AJAX nos permite enviar variables utilizando el método GET y POST sin recargar la página, para ello, lo que haremos será cargar un archivo externo (recuerdo, sin recargar la página), dentro de una etiqueta DIV.

En este caso, vamos a utilizar el método GET para el envio de la variable, para ello necesitamos crear el codigo javascript que envie la información a traves del navegador, por lo que hay que tener cuidado con la compatibilidad de los mismos con nuestro código.

El código Javascript que hay que colocar entre el de nuestra página web, o desde un archivo externo .js, según más os guste. <script type="text/javascript" language="javascript"> var http_request = false; function makeRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType("text/xml"); // Ver nota sobre esta linea al final } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert("ERROR :( No es posible crear una instancia XMLHTTP"); return false; } http_request.onreadystatechange = alertContents; http_request.open("GET", url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert("Hubo problemas con la petición."); } } } </script>  Como veis, el código incluye mensajes de alerta en el caso de que no sea posible enviar nuestra petición.

Ahora para cargar el archivo externo en el DIV que deseemos, tendremos que hacer lo siguiente: <div style="cursor: pointer; text-decoration: underline" onclick="makeRequest("test.html")">Hacer una petición</div> Ahora bien, este ejemplo no es todo lo potente que nos gustaría, ya que lo ideal sería poder cargar el archivo externo en la capa que nos interese, para ello, podemos utilizar el siguiente código:

Primero utilizaremos la librería XHConn:

Licencia de la librería:

XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08 Code licensed under Creative Commons Attribution-ShareAlike License http://creativecommons.org/licenses/by-sa/2.0/ function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); }}; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } Este código al igual que antes, es necesario cargarlo desde el de nuestra página web.

Ahora añadimos otra función para cargar contenidos dentro de un contenedor: DIV, SPAN,... function cargar_contenido(target, url) { document.getElementById(target).innerHTML = "<p class="load">Cargando...</p>"; var myConn = new XHConn(); if (!myConn) alert("XMLHTTP no esta disponible. Inténtalo con un navegador más actual."); var peticion = function (oXML) { document.getElementById(target).innerHTML = oXML.responseText; }; myConn.connect(url, "GET", "", peticion); } Este código también debería ir en el de la web. Con esto conseguimos poder cargar en el lugar que deseemos el archivo que queramos.

El siguiente paso sería el de cargar el contenido en el HTML del web, para ello haríamos: <a href="#" onclick="cargar_contenido("MostrarCapa", "CargarArchivo.php"); return false;">Cargar Contenido en la Capa</a> <div id="MostrarCapa"></div> Al pulsar sobre el link, conseguiremos que la página CargarArchivo.php, se cargue dentro del