La tarea aquí es mostrar cómo se puede usar XMLHttpRequest para ELIMINAR datos en una API creando una biblioteca HTTP personalizada. Se usaría como ejemplo una API de marcador de posición que contiene una array de objetos. La solicitud DELETE se realiza en esta API. La URL de la API es https://jsonplaceholder.typicode.com/posts/
requisitos previos:
- Se requieren conocimientos básicos de HTML, CSS y JavaScript.
- Se debe crear un archivo HTML donde se agrega el marcado HTML básico como se muestra en el ejemplo a continuación. Al final del cuerpo, adjuntamos dos scripts que son library.js y app.js en el orden respectivo. A continuación, crearemos estos archivos.
Creando el archivo library.js:
- Primero se crea una función easyHTTP y se inicializa un nuevo objeto XMLHttpRequest() .
- Se crea un nuevo prototipo para el método de eliminación usando easyHTTP.prototype.delete. Contiene dos parámetros url y una devolución de llamada.
- Se abre una nueva solicitud utilizando el método abierto . Toma tres parámetros, el primero es el tipo de solicitud (GET, POST, PUT o DELETE), el segundo es la URL de la API y el último es un valor booleano, donde verdadero significa una llamada asíncrona y falso significa una llamada síncrona . .
- El controlador de carga se utiliza para mostrar los datos. Se ejecuta después de que se realiza la llamada a la API. Se comprueba el estado de la respuesta. Si el código de estado es 200 , se ejecuta 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() .
Creando el archivo app.js:
- Primero crearemos una instancia de easyHTTP que se creó anteriormente usando la nueva palabra clave.
- Luego pasamos la URL y una función de devolución de llamada en la función de eliminación del prototipo.
- La función de devolución de llamada contendrá dos argumentos, es decir, error para imprimir si ocurre algún error y respuesta para obtener la respuesta real.
Los ejemplos de código a continuación demuestran la creación de todos los archivos necesarios.
Código para index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Delete request</title> </head> <body> <h1> Delete 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>
Código para biblioteca.js
Javascript
function easyHTTP() {
// Initialising new XMLHttpRequest method.
this.http = new XMLHttpRequest();
}
// Make an HTTP Delete Request
easyHTTP.prototype.delete
= function (url, callback) {
// Open an request (GET/POST/PUT/DELETE,
// PATH, ASYNC - TRUE/FALSE)
this.http.open("DELETE", url, true);
// Assigning this to self to have
// scope of this into the function
let self = this;
// When the response is ready
this.http.onload = function () {
// Checking status
if (self.http.status === 200) {
// Callback function (Error, response text)
callback(null, "Post Deleted");
} else {
// Callback function (Error message)
callback("Error: " + self.http.status);
}
};
// Send the request
this.http.send();
};
Código para app.js
Javascript
// Instantiate easyHTTP
const http = new easyHTTP();
// Use the delete prototype
// method with (URL, callback(error, response text))
http.delete("https://jsonplaceholder.typicode.com/posts/1",
function (
err,
response
) {
if (err) {
console.log(err);
} else {
console.log(response);
}
});
Producción:
Abra el archivo index.htm l en cualquier navegador y abra la consola del desarrollador. La salida del programa sería visible aquí. La solicitud DELETE junto con sus detalles también se puede observar mediante la pestaña Redes.
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