La tarea es mostrar cómo se puede usar XMLHttpRequest para PONER/Actualizar 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 PUT mediante el método XMLHttpRequest creando una biblioteca HTTP personalizada.
API utilizada: https://jsonplaceholder.typicode.com/posts/5
¿Qué es Ajax?
JavaScript asíncrono y XML se utilizan para comunicarse con el servidor sin actualizar la página web y, por lo tanto, aumentar la experiencia del usuario y mejorar 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 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:
- El archivo library.js crea una función easyHTTP para inicializar un nuevo método XMLHttpRequest() .
- Establezca easyHTTP.prototype.put en una función que contenga tres parámetros ‘url’, datos y devolución de llamada.
- 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 aquí que la función enviar() debe enviar datos después de convertir los datos del objeto en una string usando JSON.stringify (datos).
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 poner/actualizar datos.
- Pase la URL , los datos y una función de devolución de llamada en la función poner prototipo.
- 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
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Put request</title> </head> <body> <h1> Put request using xmlhttpRequest/Ajax by making custom HTTP library. </h1> <div class="result"></div> <!-- Including library.js and app.js files --> <script src="library.js"></script> <script src="app.js"></script> </body> </html>
Nombre de archivo: biblioteca.js
javascript
function easyHTTP() {
// Initializing new XMLHttpRequest method.
this.http = new XMLHttpRequest();
}
// Make an HTTP PUT Request
easyHTTP.prototype.put = function(url, data, callback) {
// Open an object (POST, PATH, ASYNC-TRUE/FALSE)
this.http.open('PUT', url, true);
// Set content-type
this.http.setRequestHeader(
'Content-type', 'application/json');
// Assigning this to self to have
// scope of this into the function onload
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));
}
Nombre de archivo: app.js
javascript
// Instantiating easyHTTP
const http = new easyHTTP;
// Data that that we need to update
const data = {
title: 'Custom Putt',
body: 'This is a custom put'
};
// Put prototype method(url, data,
// response text)
http.put(
'https://jsonplaceholder.typicode.com/posts/5',
data, function(err, post){
if(err) {
console.log(err);
} else {
console.log(post);
}
});
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.
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