Cómo hacer AJAX con PHP y HTML

Escrito por sue smith Google | Traducido por juan manuel rodriguez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer AJAX con PHP y HTML
Las funciones de AJAX pueden hacer sitios web más interactivos. (Goodshoot/Goodshoot/Getty Images)

Las funciones de AJAX permiten que las páginas Web actualicen el contenido HTML sin que el usuario tenga que actualizar la página o navegar a una diferente. El código HTML puede llamar a una función de JavaScript, que a su vez puede llamar a un script PHP. Este script puede obtener datos adicionales, a veces a partir de una base de datos y tiene formato marcado XML, devolviendo esto a la función de JavaScript. El código JavaScript puede entonces escribir estos nuevos datos en el código HTML, por lo que la nueva información aparece del mismo modo que el usuario interactúa con la página Web.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Crear un nuevo documento HTML. Escribe el siguiente código en un archivo en blanco en tu editor de texto y asígnale una extensión ".html" al guardarlo:

    <html> <head> <script type="text/javascript"> function processData() { //fetch new data } </script> </head> <body> <div id="update">Some content</div> <input type="button" value="press me" onclick="processData()"/> </body> </html>

    Cuando el usuario hace clic en el botón que se muestra en esta página, el navegador llama a la función JavaScript en la sección de cabecera de la página.

  2. 2

    Crea un objeto XMLHttpRequest. Agrega el siguiente código dentro de la función de JavaScript:

    var xmlHTTP; if (window.XMLHttpRequest) { xmlHTTP=new XMLHttpRequest(); } else { xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP"); }

    Esto permite que la página Web maneje los diferentes navegadores.

  3. 3

    Envía tu solicitud de datos a un script PHP. Agrega el siguiente código dentro de la función JavaScript, dejando espacio para el código antes de este:

    xmlHTTP.open("GET", "get_data.php", true); xmlHTTP.send();

    Esto indica al navegador que solicite información adicional a la secuencia de comandos PHP especificada.

  4. 4

    Crea un script PHP. Abre un nuevo archivo en un editor de texto y guárdalo como "get_data.php" para que coincida con el parámetro con el método de envío que utilizas en tu código JavaScript. Escribe el siguiente código de ejemplo:

    <?php echo "New data"; ?>

    Este es un ejemplo sencillo para la demostración, pero puedes agregar cualquier tratamiento PHP que necesites, incluidas las consultas de bases de datos. También puedes construir tu texto de respuesta en el formato XML si este se adapta a tu sitio.

  5. 5

    Maneja la respuesta de tu script PHP. En tu función de JavaScript, antes de la línea en la que se abre el objeto XMLHttpRequest, agrega el siguiente código:

    xmlHTTP.onreadystatechange=function() { if (xmlHTTP.readyState==4 && xmlHTTP.status==200) { //handle the response data }}

    Cuando JavaScript reciba una respuesta del script PHP, este código se ejecutará. El código comprueba que la respuesta sea válida. Dentro de esta sentencia condicional, puedes agregar código para escribir los nuevos datos en la página HTML.

  6. 6

    Actualiza el contenido de tu página. En la sentencia de respuesta condicional de JavaScript, agrega el siguiente código:

    document.getElementById("update").innerHTML = xmlHTTP.responseText;

    Este código identifica el elemento div de la página y luego escribe el texto de la respuesta del código PHP en este.

  7. 7

    Guarda los archivos y súbelos a tu servidor. Navega a la página y haz clic en el botón para comprobar que la función funciona. Deberías ver el contenido de la modificación del elemento div.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles