AJAX, acrónimo de Asynchronous JavaScript And XML nos permite comunicarnos desde el cliente con el servidor de manera asincrónica, es decir, podemos ejecutar código, por ejemplo PHP, en segundo plano, sin tener que recargar la página.
Necesitamos el objeto
XMLHttpRequest para poder hacer peticiones HTTP a nuestro servidor web.
Este es nuestro archivo index.html
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- function loadXMLDoc()
- {
- var xmlhttp;
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- }
- }
- xmlhttp.open("GET","respuesta.php?data=HolaMundo",true);
- xmlhttp.send();
- }
- </script>
- </head>
- <body>
- <div id="myDiv"><h2>Let AJAX change this text</h2></div>
- <button type="button" onclick="loadXMLDoc()">Change Content</button>
- </body>
- </html>
De la linea 8 a la 15 se ocupa de iniciar el objeto HttpRequest y almacenarlo en la variable xmlhttp, dependiendo del navegador se hace de una manera o de otra.
En la linea 16 el evento onreadystatechange se pone a la escucha del estado del HttpRequest.
En la linea 18 verificamos el readyState y status si los dos son correctos pasamos a cambiar el innerHTML de myDiv con el contenido de la respuesta del servido como se ve en la linea 19.
En la linea 23 con el método open llamamos al servidor este caso mi página respuesta.php y le mandamos un parámetro GET llamado data con el texto 'HolaMundo'.
El método send de la linea 24 sirve para mandar la peticion, en este caso no tiene parametros porque usamos el metodo GET.
Solo nos queda crear el archivo respuesta.php.
Las posibilidades son muchas si quereis saber mas podeis entrar a http://www.w3schools.com/ajax/.
Solo nos queda crear el archivo respuesta.php.
- <?php
- echo $_GET['data'];
- ?>
Las posibilidades son muchas si quereis saber mas podeis entrar a http://www.w3schools.com/ajax/.