Introducción a las llamadas Ajax

Publicado: 2021-11-01

¡Bienvenido a nuestra Introducción a Ajax! En este artículo, analizaremos los conceptos básicos de Ajax y cómo se usa en un ejemplo del mundo real. También veremos un ejemplo de una llamada Ajax-PHP. Aunque hemos hecho todo lo posible para simplificar este tutorial, un conocimiento práctico de Javascript, PHP y WordPress es muy importante para comprender completamente lo que sigue. Con esto en mente, ¡comencemos!

¿Qué es Ajax?

Ajax significa JavaScript asíncrono y XML.

Ajax no es un lenguaje de programación, sino un conjunto de técnicas que combinan tecnologías web existentes para crear mejores aplicaciones web.

Mejorando sitios web con Ajax

Ajax tiene una gran variedad de usos. Entre estos, una de las principales funciones son las llamadas Ajax. Las llamadas Ajax permiten que un sitio web actualice parte de su contenido tras la acción de un usuario sin necesidad de recargar la página. Así, a diferencia de una solicitud HTTP normal, no tenemos que esperar la respuesta del servidor para seguir interactuando con el sitio web.

Tradicionalmente, las solicitudes HTTP se realizan a un servidor web y, una vez procesadas, el servidor devuelve el resultado actualizado en una nueva carga de página. En una solicitud de Ajax, esta secuencia de acciones ocurre entre bastidores, de forma asincrónica, para que el usuario no sea interrumpido. Eso mejora la interactividad y la capacidad de respuesta y hace que el sitio web sea más dinámico.

¿Cómo funciona una llamada Ajax?

Una llamada Ajax comienza cuando el usuario final realiza una acción en la parte frontal de un sitio web (por ejemplo, hacer clic en un botón). Cuando se realiza esa acción, se activa un evento de Javascript y su oyente llama a una función.

Dentro de la función, se activa la llamada Ajax y, con la ayuda de XML, la información se empaqueta y la solicitud se envía a un script de servidor.

N OTA: Hoy en día, en casi todas las ocasiones, se prefiere JSON a XML ya que es más rápido, más fácil de leer y programar y más.

Dentro de la secuencia de comandos, la solicitud se procesa con la ayuda de un lenguaje de secuencias de comandos del lado del servidor como PHP, Java, Ruby, Python, etc.

La respuesta se devuelve al cliente y una función de devolución de llamada actualiza la parte de contenido correspondiente con los datos recibidos.

Veamos cómo funciona esto en un ejemplo.

Un ejemplo simple de llamada Ajax

Vamos a crear una aplicación de búsqueda que le permita ver los resultados de búsqueda en tiempo real al buscar en una lista de títulos de artículos.

Usaremos PHP como el lenguaje de secuencias de comandos del lado del servidor y lo guiaremos a través de esto, desde el punto de vista de los usuarios finales.

Paso 1: el formulario HTML

Primero, necesitamos un cuadro de texto que el usuario llenará con texto y en algún lugar para mostrar el resultado. Entonces, creemos un formulario HTML simple y un elemento que muestre los resultados.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Paso 2: Función Javascript

Cuando un usuario ingresa texto, queremos ver los resultados en tiempo real, si están disponibles. Usaremos el evento onkeyup Javascript que activa una función cuando el usuario suelta una tecla en el teclado.

La función tendrá que obtener el texto actual como parámetro para poder continuar con el proceso.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Rellenemos la función.

Paso 3: La Solicitud

Dentro de la función, primero tenemos que crear un objeto XMLHttpRequest para interactuar con el servidor y luego llamar a otra función que hará algo con el valor pasado en nuestra función foundArticles() .

En el proceso descrito anteriormente, la interacción con el servidor se logra mediante el uso de un controlador de eventos Javascript XMLHttpRequest.onready statechange, que se llama cuando se cambia la propiedad readyState . Aclaremos más estos pasos:.

  • La propiedad readyState devuelve el estado en el que se encuentra un cliente XMLHttpRequest .
  • Cada vez que readyState cambia, se activa el evento readystatechange .
  • La propiedad onreadystatechange contiene el controlador de eventos que se llamará cuando se active el evento readystatechange .

Paso 4: Qué hacer con la solicitud

Ahora, necesitamos hacer algo cuando la operación esté completa, y después de consultar qué estados están disponibles, establecemos esto en el estado 4.

Entonces, cuando se complete la operación, el texto dentro del elemento HTML con id txtHint debe reemplazarse con la respuesta del servidor. Aquí es cuando tenemos que usar la propiedad responseText , que devuelve el texto recibido del servidor después de enviar la solicitud.

Ahora agreguemos el código dentro de la función foundArticles() que corresponde a lo que acabamos de describir arriba.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

NOTA: Tenemos que señalar aquí que representar HTML de esta manera, sin escapar de él, es una mala práctica en cuanto a la seguridad y solo lo hacemos por el bien de este tutorial para que el código se mantenga lo más simple posible. ¡Solo para estar seguro, no use ninguno de los códigos provistos en este artículo para uso en el mundo real!

A continuación, tenemos que enviar la solicitud al servidor y utilizar los datos que se devuelven.

Paso 5: Los datos

En este ejemplo, los datos se almacenarán en un archivo PHP. Creamos un archivo data.php bajo la misma carpeta e incluimos el siguiente código:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

No se confunda con $req = $_REQUEST["req"]; línea. Así es como el script recupera la consulta dentro del archivo custom.js que veremos en breve.

Paso 6: Métodos de solicitud

Usaremos el método open() de nuestro objeto XMLHttpRequest para inicializar la solicitud y el método send() para intercambiar datos con el servidor.

Los parámetros que usamos para el método open() son:

  • El método. Es decir, el método de solicitud HTTP ("GET", "POST", "PUT", "DELETE", etc.).
  • La URL a la que enviar la solicitud.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Como puede ver, el método open() inicializa una solicitud GET a la URL “data.php?req=” + str.

La URL será entonces utilizada por $req = $_REQUEST[“req”]; variable dentro del archivo data.php para recuperar el valor.

Veamos una imagen de la solicitud de ejemplo:

En este punto, el formulario debería funcionar correctamente. Si ingresa, digamos la palabra “curso”, el resultado debe ser:

“Curso de Lengua C”,
“Curso de C++”,
“Curso CSS3”,
“Curso JAVA”.

Conclusión

Este fue un ejemplo de un ejemplo muy simple de solicitud Ajax, que es una técnica muy popular para usar al crear sitios web. Aunque es simple, con suerte, lo acercamos a comprender el enrutamiento en tales solicitudes y esto podría ayudarlo a comenzar a codificar el suyo propio. En un próximo artículo, volveremos a visitar Ajax, en un entorno de WordPress, ¡así que estad atentos!