Cómo hacer una llamada Ajax en JavaScript?

JavaScript es un lenguaje de programación de alto nivel donde el código se ejecuta en línea por línea y se llama ejecución sincrónica de código. La desventaja de la ejecución síncrona es que las siguientes líneas de código tienen que esperar la ejecución completa de la línea de código actual. La respuesta a este problema es la ejecución asincrónica, en asíncrono una declaración o una línea no tiene que esperar a que el código anterior se ejecute por completo en lugar de que puedan ejecutarse en paralelo. Para lograr la ejecución asincrónica del código, Ajax entra en juego.

En esta publicación, veremos qué es Ajax y cómo hacer una llamada de Ajax en JavaScript con la ayuda de un ejemplo.

Que es ajax?

Ajax se hizo popular en 2005 cuando Google lo puso en su sugerencia de Google y significa JavaScript y XML asíncrono. Xml significa un lenguaje de marcado extensible que se utiliza para cifrar mensajes que pueden leer humanos y máquinas. XML es similar a HTML, pero le permite construir y personalizar sus propias etiquetas. La función de AJAX es transmitir solicitudes a un servidor y luego recibir datos de ese servidor de manera asíncrona.

La ventaja de AJAX es que realiza su función sin la necesidad de actualizar toda la página. Por ejemplo, cuando escribe algo para buscar en la barra de búsqueda de Google, con cada tecla Presione la barra de búsqueda realiza llamadas AJAX y el usuario recibe sugerencias sin actualizar la página realmente.

Cabe señalar que el AJAX se comunica con el servidor utilizando el objeto xmlhttprequest, JavaScript/DOM para realizar solicitudes y XML como un mecanismo de transmisión de datos.

AJAX se activa con un evento y luego realiza su funcionalidad creando primero un Xmlhttprequest objeto y luego enviando el Httprequest al servidor donde el Httprequest se procesa y se genera una respuesta que luego se envía de vuelta al navegador con algunos datos. El navegador procesa los datos devueltos y actualiza el contenido de la página usando JavaScript.

Ahora que sabemos qué es Ajax y cómo hacer una llamada Ajax usando JavaScript.

AJAX Llamada usando JavaScript

En este ejemplo, primero inicializaremos el objeto xmlhttprequest que se utiliza para comunicarse con el servidor o para ponerlo en pocas palabras, hacer una llamada AJAX. El XMLHTTPREQUEST tiene muchos métodos incorporados que podemos usar para manipular o jugar con el servidor enviando, interrumpiendo respuestas y recibiendo datos del servidor. Nos conectaremos a una API falsa gratuita para probar nuestra llamada Ajax. El enlace de la API que vamos a usar se da a continuación:

https: // jsonplaceholder.típico.com/

El código completo para hacer una llamada AJAX se da a continuación:

functionMyFunc ()
// Inicializando el objeto XMLHTTPREQUEST
varxhttp = newxmlhttprequest ();
// Establecer conexión con API falsa
varurl = 'https: // jsonplaceholder.típico.com/Todos/1 ';
// Obtener API de URL
xhttp.Abrir ("Get", URL, verdadero);
// Cuando la solicitud sea exitosa, la siguiente función se ejecutará
xhttp.onreadyStateChange = function ()
// Si la solicitud es completa y exitosa
si esto.ReadyState == 4 && esto.estado == 200)
consola.Log (esto.ResponsetExt);


// Enviar petición
xhttp.enviar();

// llamar a la función myfunc
myFunc ();

En el código anterior, primero, inicializamos una función con el nombre de myFunc (), Y dentro de esta función, creamos un Xmlhttprequest objeto. A continuación, establecemos la conexión con una API usando una URL. Para obtener la API usamos el xhttp.abierto() método y pasar el método HTTP CONSEGUIR y el Url. El método get se usa cuando obtenemos algunos datos de un servidor y el CORREO El método se utiliza cuando estamos escribiendo o actualizando datos en el servidor.

Ahora, cuando la solicitud finalice de ejecutar y si es exitosa, el OnreadyStateChange El evento se ejecutará donde estamos utilizando una condición de que si la solicitud está completa y la solicitud fue exitosa, el registro de la consola los datos. El código de estado 200 se usa, lo que significa OK. El 400 El código de estado significa error y el 300 El código de estado significa redirigir a alguna página. El siguiente paso es enviar la solicitud usando el método send ().

Al final, llamamos a la función myFunc () y veremos la siguiente salida en el registro de la consola:

El código de estado visto en las herramientas del desarrollador es 200, lo que significa OK:

Conclusión

AJAX significa JavaScript y XML asíncrono donde XML se usa para cifrar mensajes que se realizan en formato legible para humanos y máquinas, excepto que XML le permite personalizar sus propias etiquetas. AJAX le permite transmitir datos al servidor sin tener que actualizar toda la página. Realiza su operación de forma asincrónica, por lo tanto, mejora la velocidad, ya que el código no tiene que esperar a que el código anterior complete su ejecución. En JavaScript, el objeto xmlhttprequest se usa para hacer una llamada ajax.

En esta publicación, primero, discutimos qué es Ajax y luego pasamos a discutir cómo hacer una llamada de Ajax en JavaScript usando el objeto xmlhttprequest.