La tarea es mostrar cómo se puede usar XMLHttpRequest para obtener datos de una API creando una biblioteca HTTP personalizada. Tomaré una API falsa que contendrá una array de objetos como ejemplo y, a partir de esa API, mostraremos cómo obtener datos mediante el método XMLHttpRequest creando una biblioteca HTTP personalizada.
Enlace API: https://jsonplaceholder.typicode.com/posts
¿Qué es Ajax?
Ajax o Asynchronous JavaScript and XML se utiliza para comunicarse con el servidor sin actualizar la página web y, por lo tanto, aumenta la experiencia del usuario y mejora el rendimiento. Para leer más sobre Ajax, haga clic en https://www.geeksforgeeks.org/ajax-introduction/ .
Requisitos previos: solo se requieren conocimientos básicos de HTML, CSS y JavaScript.
Nota: Primero, cree un archivo HTML y agregue el marcado HTML según sea necesario. En la parte inferior del cuerpo, se adjuntan dos archivos de script, a saber, «library.js» y «app.js» en el mismo orden.
Enfoque: los pasos necesarios para crear el archivo «library.js» son los siguientes.
- En el archivo library.js , cree una función easyHTTP para inicializar un nuevo método XMLHttpRequest() .
- Establezca easyHTTP.prototype.get en una función que contenga dos parámetros ‘url’ y una devolución de llamada.
- Ahora inicie un objeto usando la función abierta . Toma tres parámetros, el primero es el tipo (GET o POST o PUT o DELETE), el segundo es la URL de la API y el último es un valor booleano («verdadero» significa llamada asíncrona y «falso» significa llamada síncrona).
- Ahora usaremos la función onload para mostrar los datos. La función de carga se ejecuta después de que se realiza la llamada a la API. Comprobaremos el estado de éxito. Si el código de estado es 200, ejecutaremos una función de devolución de llamada que contiene dos argumentos, error y texto de respuesta. Si el código de estado no es 200, la función de devolución de llamada simplemente imprimirá el mensaje de error.
- El último paso es enviar la solicitud usando la función enviar() .
Pasos necesarios para crear el archivo app.js
- En primer lugar, cree una instancia de easyHTTP con una nueva palabra clave.
- Pase la URL y una función de devolución de llamada en la función de prototipo .
- La función de devolución de llamada contiene dos argumentos error para imprimir los errores que ocurren y response , para obtener la respuesta real.
Implementación de los pasos anteriores:
archivo HTML:
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Get request</title></head> <body> <h1> Get request using xmlhttpRequest/ Ajax by making custom HTTP library. </h1> <!-- Including library.js and app.js files --> <script src="library.js"></script> <script src="app.js"></script></body> </html> |
biblioteca.js:
JavaScript
function easyHTTP() { // Initialising new XMLHttpRequest method this.http = new XMLHttpRequest();} // Make an HTTP GET RequesteasyHTTP.prototype.get = function (url, callback) { // Open an obejct (GET/POST, PATH, // ASYN-TRUE/FALSE) this.http.open('GET', url, true); // Assigning this to self to have // scope of this into the function let self = this; // When response is ready this.http.onload = function () { // Checking status if (self.http.status === 200) { // Callback function (Error, response text) callback(null, self.http.responseText); } else { // Callback function (Error message) callback('Error: ' + self.http.status); } } // At last send the request this.http.send();} |
aplicación.js
JavaScript
// Instantiating easyHTTPconst http = new easyHTTP; // Get prototype method(URL, callback(error,// response text)) function (err, posts) { if (err) { console.log(err); } else { // parsing string data to object let data = JSON.parse(posts); console.log(data); } }); |
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA