Hacer una llamada Ajax sin jQuery

  2. HowTo
  3. JavaScript Howtos
  4. Hacer una llamada Ajax sin jQuery
Habdul Hazeez 15 febrero 2024
JavaScript JavaScript Ajax
  1. Cómo hacer una llamada Ajax con XMLHttpRequest en JavaScript
  2. Cómo hacer una llamada Ajax con la API Fetch en JavaScript
Hacer una llamada Ajax sin jQuery

Este tutorial le enseñará cómo realizar una llamada AJAX en JavaScript sin necesidad de una biblioteca externa. Por ello, te enseñaremos lo siguiente.

  1. Cómo hacer una llamada AJAX con XMLHttpRequest
  2. Cómo hacer una llamada AJAX con la API Fetch

Cómo hacer una llamada Ajax con XMLHttpRequest en JavaScript

El XMLHttpRequest es un objeto en JavaScript que le permite realizar una llamada AJAX. Lo hace posible gracias a su conjunto de métodos.

Estos métodos incluyen:

  1. XMLHTTPRequest.onreadystatechange()
  2. XMLHTTPRequest.readyState
  3. XMLHTTPRequest.estado()
  4. XMLHTTPRequest.open()
  5. XMLHTTPRequest.send()

Si se combinan correctamente, estos métodos le permitirán realizar una llamada AJAX. Además, los nombres de los objetos le dan una idea de lo que hacen.

Por ejemplo, XMLHTTPRequest.send() enviará la llamada AJAX cuando esté listo. El siguiente es un algoritmo típico para usar XMLHttpRequest para una llamada AJAX.

  1. Cree un nuevo objeto XMLHTTPRequest

  2. Adjunte una función a XMLHTTPRequest.onreadystatechange()

    2.1 La función comprobará si XMLHTTPRequest.readyState devuelve DONE
    2.2 Marque XMLHTTPRequest.status() y actúe en consecuencia

  3. Abra la conexión AJAX

    3.1 Esta es la parte donde especifica si la conexión será una solicitud GET o POST.

  4. Envía la llamada AJAX

Mientras tanto, dependiendo de lo que intente lograr, es posible que tenga un algoritmo más largo. Sin embargo, para nuestro ejemplo que se detalla a continuación, el algoritmo sirve para nuestro propósito.

El usuario puede iniciar una llamada AJAX haciendo clic en el botón HTML del ejemplo. La llamada reemplazará el contenido del elemento <main>.

<head>
	<meta charset="utf-8">
	<title>Plain AJAX Request</title>
	<style>
		body {
			display: grid;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		button {
			padding: 1.2em;
			background-color: #1a1a1a;
			color: #ffffff;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<main id="button_container">
		<button type="button"  onclick="load_ajax_button()">CLICK ME</button>
	</main>
	<script>
		function load_ajax_button() {
			const xhttp = new XMLHttpRequest();
			xhttp.onload = function() {
				let button_container = document.getElementById("button_container")
				button_container.innerHTML = this.responseText;
			}
			xhttp.open("GET", "ajax-button.html", true);
			xhttp.send();
		}
	</script>
</body>

Producción:

Solicitud Ajax con XMLHttpRequest

Cómo hacer una llamada Ajax con la API Fetch en JavaScript

La API Fetch es una función integrada de los navegadores web modernos que le permite realizar llamadas AJAX. Además, puede considerar la API Fetch como una versión moderna de XMLHttpRequest.

Por ejemplo, en nuestro código a continuación, cada vez que presiona el botón HTML, obtenemos una imagen aleatoria de la API Picsum. Mientras tanto, lo siguiente es cómo funciona el proceso.

  1. Haga clic en el botón HTML para iniciar la solicitud Fetch a la API Picsum.
  2. Tomamos la propiedad url de la respuesta de la API Picsum. Eso es porque la url contiene la dirección de la imagen aleatoria.
  3. Utilice la dirección de la API Picsum como fuente de la imagen.
  4. Por lo tanto, cada vez que haga clic en el botón HTML, obtendrá una nueva imagen aleatoria.
<head>
	<meta charset="utf-8">
	<title>Fetch API</title>
	<style>
		main {
			text-align: center;
			margin: 0 auto;
			max-width: 800px;
		}

		img {
			max-width: 100%;
			display: inline-block;
		}

		button {
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<main>
		<h2>A Simple Fetch API Example</h2>
		<div class="img-container">
			<img src="" id="random_image" width="300" height="300">
		</div>
		<button>Click Me for a Random Image</button>
	</main>

	<script>
		let button = document.querySelector('button');

		button.addEventListener('click', function () {
			fetch('https://picsum.photos/200/300')
			.then((response) => {
				return response;
			})
			.then((image_source) => {
				random_image.src = image_source['url'];
			});
		}, false);
	</script>
</body>

Producción:

Ajax con la API Fetch

Autor: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

Artículo relacionado - JavaScript Ajax