Hacer una llamada Ajax sin jQuery
-
Cómo hacer una llamada Ajax con
XMLHttpRequesten JavaScript -
Cómo hacer una llamada Ajax con la API
Fetchen JavaScript
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.
- Cómo hacer una llamada AJAX con
XMLHttpRequest - 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:
XMLHTTPRequest.onreadystatechange()XMLHTTPRequest.readyStateXMLHTTPRequest.estado()XMLHTTPRequest.open()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.
-
Cree un nuevo objeto
XMLHTTPRequest -
Adjunte una función a
XMLHTTPRequest.onreadystatechange()2.1 La función comprobará si
XMLHTTPRequest.readyStatedevuelveDONE
2.2 MarqueXMLHTTPRequest.status()y actúe en consecuencia -
Abra la conexión AJAX
3.1 Esta es la parte donde especifica si la conexión será una solicitud
GEToPOST. -
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:
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.
- Haga clic en el botón
HTMLpara iniciar la solicitudFetcha la APIPicsum. - Tomamos la propiedad
urlde la respuesta de la APIPicsum. Eso es porque laurlcontiene la dirección de la imagen aleatoria. - Utilice la dirección de la API
Picsumcomo fuente de la imagen. - 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:
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