La tarea es mostrar cómo se puede usar XMLHttpRequest para publicar datos en una API creando una biblioteca HTTP personalizada. Tomaremos una API falsa que contendrá una array de objetos como ejemplo y, a partir de esa API, mostraremos los datos POST mediante el método XMLHttpRequest creando una biblioteca HTTP personalizada.
API utilizada: 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 requiere el conocimiento básico de HTML, CSS y JavaScript para asistir.
Nota: Primero cree un archivo HTML y agregue el marcado HTML de acuerdo con el requisito. En la parte inferior de la etiqueta del cuerpo, adjunte dos archivos de scripts como library.js y app.js en el mismo orden.
Pasos necesarios para crear el archivo library.js:
- En el archivo library.js, cree una función easyHTTP para inicializar un nuevo método XMLHttpRequest() .
- Establezca easyHTTP.prototype.post en una función que contenga tres parámetros ‘url’, data y callback .
- Ahora abra un objeto usando esta función.http.open . Toma tres parámetros, el primero es el tipo de solicitud (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. Pero antes de eso, primero debemos establecer el tipo de contenido con el método this.http.setRequestHeader y también asignar esta palabra clave a sí mismo para tener el alcance de esta palabra clave en la función de carga . La función de carga se ejecuta después de que se realiza la llamada a la API. Esta función ejecutará una función de devolución de llamada que tiene dos argumentos como error y texto de respuesta.
- El último paso es enviar la solicitud usando la función enviar() . Cabe señalar que la función send() debe enviar datos después de convertir los datos del objeto en strings mediante JSON.stringify(data) .
Pasos necesarios para crear el archivo app.js:
- En primer lugar, cree una instancia de easyHTTP con una nueva palabra clave.
- Cree un dato personalizado ( objeto ) para publicar.
- Pase URL, datos y una función de devolución de llamada en la función de prototipo posterior .
- La función de devolución de llamada contiene dos argumentos error para imprimir si ocurre algún error y respuesta para obtener la respuesta real.
Nombre de archivo: index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>POST request</title> </head> <body> <h1> POST 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>
Nombre de archivo: app.js
// Instantiating easyHTTP
const http = new easyHTTP;
// Create Data
const data = {
title: 'Custom HTTP Post',
body: 'This is a custom post data'
};
// Post prototype method(url, data,
// response text)
http.post(
'https://jsonplaceholder.typicode.com/posts',
data,
function(err, post) {
if(err) {
console.log(err);
} else {
// Parsing string data to object
// let data = JSON.parse(posts);
console.log(post);
}
});
Nombre de archivo: biblioteca.js
function easyHTTP() {
// Initializing new XMLHttpRequest method.
this.http = new XMLHttpRequest();
}
// Make an HTTP POST Request
easyHTTP.prototype.post = function(url, data, callback) {
// Open an object (POST, PATH, ASYN-TRUE/FALSE)
this.http.open('POST', url, true);
// Set content-type
this.http.setRequestHeader('Content-type', 'application/json');
// Assigning this to self to have
// scope of this into the function
let self = this;
// When response is ready
this.http.onload = function() {
// Callback function (Error, response text)
callback(null, self.http.responseText);
}
// Since the data is an object so
// we need to stringify it
this.http.send(JSON.stringify(data));
}
Salida:
Abra su archivo index.html en cualquier navegador y abra su consola haciendo clic con el botón derecho->Inspeccionar elemento->consola . Por lo tanto, verá el siguiente resultado.
Nota: Contiene un par clave-valor adicional como ‘id’ 101. No se preocupe por esto, ya que se crea de forma predeterminada.
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