Que es ajax?
En esta publicación, discutiremos qué es Ajax, el funcionamiento gradual de Ajax, y caminar a través de un ejemplo para comprender mejor la implementación de AJAX.
Que es ajax?
Ajax, que representa JavaScript asíncrono y XML, es un método (no un lenguaje de programación) que se utiliza para aplicaciones web para transmitir y recibir datos del servidor de forma asincrónica, sin afectar el resto del contenido de la página o requerir una recarga de la página.
La abreviatura Xml representa Lenguaje de marcado extensible que se usa para cifrar mensajes para que puedan ser leído por humanos y máquinas. XML es similar a HTML, pero le permite construir y personalizar sus propias etiquetas.
AJAX se comunica con el servidor utilizando el objeto XMLHTTPRequest, JavaScript/DOM para realizar solicitudes y XML como mecanismo de transmisión de datos. Se hizo popular solo cuando Google lo puso en Google Sugerir en 2005
Ponerlo en palabras simples AJAX es un método para reducir las interacciones servidor-cliente que se realizan solo actualizando una parte de una página web en lugar de actualizar toda la página web. El objetivo de AJAX es enviar pequeñas cantidades de datos al servidor sin tener que actualizar la página.
Funcionamiento paso a paso de AJAX
- Se ejecuta algún evento y el navegador crea un objeto xmlhttprequest después de lo cual se envía el httprequest al servidor.
- El servidor obtiene la HTTPRequest y luego la procesa, después del procesamiento, el servidor genera una respuesta y envía la respuesta al navegador con algunos datos.
- El navegador procesa los datos devueltos con la ayuda de JavaScript y, dependiendo de la respuesta, JavaScript actualiza el contenido de la página web.
Pasamos por algunos ejemplos para comprender mejor Ajax.
Ejemplo 1:
Este ejemplo demostrará cómo cambiar el contenido de un H2 Etiqueta usando AJAX. Primero, implementaremos la estructura de nuestra página web utilizando HTML.
El objeto xmlhttprequest
En el código anterior, definimos un div contenedor y le dio el atributo de identificación debido al cual podemos hacer referencia a este contenedor DIV más adelante en nuestro código JavaScript. Esta sección Div se define para que pueda mostrar información de un servidor. A continuación, definimos una etiqueta H2 y un botón en el que pasamos un al hacer clic evento. Siempre que un usuario haga clic en este botón, se generará un evento y la función ChangeContent () será ejecutado.
functionChangeContent ()// inicialización del objeto xmlhttprequest
constxhttp = newxmlhttprequest ();
// Uso de la función incorporada de Onload
xhttp.onload = function ()
// Actualización del contenido del elemento Div
documento.getElementById ("Ejemplo").innerhtml =
este.Responsetxt;
// Obtener archivo AJAX_INFO.TXT
xhttp.Abrir ("Get", "Ajax_info.TXT");
// Enviar petición
xhttp.enviar();
Ahora que hemos terminado con la configuración de la página HTML, necesitamos escribir algún código de script. Para este tutorial, incluiremos el código JavaScript dentro del etiqueta. En nuestro código de script, primero necesitamos crear la función ChangeContent () que se ejecutará con el clic del botón, podemos hacerlo con las siguientes líneas de código:
functionChangeContent ()// inicialización del objeto xmlhttprequest
constxhttp = newxmlhttprequest ();
// Uso de la función incorporada de Onload
xhttp.onload = function ()
// Actualización del contenido del elemento Div
documento.getElementById ("Ejemplo").innerhtml =
este.Responsetxt;
// Obtener archivo AJAX_INFO.TXT
xhttp.Abrir ("Get", "Ajax_info.TXT");
// Enviar petición
xhttp.enviar();
Como puede ver en el fragmento de código anterior, la función genera una nueva xmlhttprequest y espera la respuesta del servidor. Al recibir la respuesta, el contenido del DIV será reemplazado por esta función.
Ahora creamos un archivo con el nombre de ajax_info.TXT y escriba información ficticia en este archivo, por ejemplo:
Todo el código se da a continuación:
El objeto xmlhttprequest
La salida del código anterior se proporciona a continuación:
Podemos ver que cuando el usuario hace clic en el botón, el texto "cambia" al texto que estaba presente dentro del AJAX_INFO.archivo txt.
Conclusión
JavaScript ejecuta el código de línea por línea que se llama ejecución sincrónica y, por lo tanto, AJAX entra en juego, ya que es un método que ayuda a implementar la ejecución asincrónica del código en JavaScript. En la ejecución asíncrona, una declaración o una línea de código no tiene que esperar el final de la línea de código anterior y ambos pueden ejecutar paralelo. AJAX se usa para transmitir y recibir datos del servidor de forma asincrónica sin afectar el resto de la página y ni siquiera requiere la recarga de la página completa.
En esta publicación, vimos qué es Ajax y luego fuimos a ver cómo funciona Ajax al describir el proceso por paso, y al final, le proporcionamos un ejemplo para aclarar su concepto.