En este artículo, conoceremos XMLHttpRequest y cómo puede ser útil para la solicitud cliente-servidor y las propiedades de XMLHttpRequest.
XMLHTTPRequest es un objeto que envía una solicitud HTTP al servidor e interactúa con el servidor para abrir una URL y recuperar datos sin cargar la página completa, por lo que solo cambió una parte de la página web. Aquí, es una función de constructor global XMLHttpRequest integrada en el navegador expuesta en javascript que está disponible sin ningún paquete agregado y no es solo para documentos XML, hoy en día JSON se usa principalmente para intercambiar datos entre el navegador y el servidor.
Usos del objeto XMLHTTPRequest:
- Se utiliza para realizar llamadas AJAX para intercambiar datos desde un servidor web remoto.
- Con la ayuda de este objeto, los usuarios envían requests al servidor de forma asíncrona y el servidor envía los datos que solicitamos para ajax.
- El objeto XMLHTTPRequest se utiliza para evitar ataques desde el lado del servidor
- Se utiliza en diferentes protocolos para realizar requests como HTTP, HTTPS, FTP y FRPS.
- Se utiliza para recuperar cualquier tipo de datos como XML, JSON, etc.
- Con la ayuda de esto, no hay necesidad de cargar toda la página, extrae algunas partes y realiza cambios.
- Se utiliza en el intercambio de datos con la ayuda de API.
Sintaxis :
var objectname = new XMLHTTPRequest();
Para obtener una descripción detallada de los métodos del objeto XMLHttpRequest y las propiedades del objeto XMLHttpRequest, consulte el artículo Objeto XMLHttpRequest de AJAX .
Ejemplo: este ejemplo describe cómo se usa XMLHttpRequest en AJAX y utiliza los diferentes objetos XMLHttpRequest para realizar la solicitud y obtener una respuesta del servidor usando datos JSON.
Javascript
//create new request through constructor
const xhrReq = new XMLHttpRequest();
//set up listener
xhrReq.onload = () => {
//get response from the server server
let resJSON = JSON.parse(xhrReq.response);
console.log(resJSON);
};
//open url and get new created request
xhrReq.open("get", "https://jsonplaceholder.typicode.com/users", true);
//send request to server
xhrReq.send();
Producción:
Ejemplo 2: este ejemplo describe el objeto XMLHttpRequest mediante el uso de la API para obtener el perro.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="fetch" style="margin:20px">Fetch</button> <div id="container" style="margin:20px"> <img id="dog-image"> </div> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"> </script> <script src="script.js"></script> </body> </html>
script.js
$('#fetch').click(()=>{
//create a new request
var xhr=new XMLHttpRequest();
//request is received
xhr.onload=()=>{
console.log(xhr.response)
//convert string into json object
var response=JSON.parse(xhr.response);
var image=response.message;
$('#dog-image').attr('src',image)
};
//cant get response
xhr.onerror=()=>{
alert("response failed")
}
//open a request
xhr.open('get','https://dog.ceo/api/breeds/image/random',true)
//send a request
xhr.send()
})
Producción
Publicación traducida automáticamente
Artículo escrito por surbhikumaridav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA