En este artículo veremos qué es XMLHttpRequest Object, además de conocer sus propiedades con su implementación a través de las ilustraciones.
Propiedades del objeto XMLHttpRequest:
- onload: cuando se recibe (carga) la solicitud, define una función a llamar.
- onreadystatechange : se llamará a una función cada vez que cambie la propiedad readyState.
- readyState : define el estado actual de la solicitud o mantiene el estado actual de XMLHttpRequest. Hay cinco estados de una solicitud:
- readyState= 0 : Representa la Solicitud no inicializada.
- readyState= 1 : Establecimiento de conexión con el servidor.
- readyState= 2 : Se ha recibido la solicitud
- readyState= 3 : Durante el tiempo de procesamiento de la solicitud
- readyState= 4 : La respuesta está lista después de finalizar la solicitud
- responseText : Devolverá los datos recibidos por la solicitud en forma de string.
- responseXML : Devolverá los datos recibidos por la solicitud en forma de datos XML.
- status : Devolverá el número de estado de la solicitud. (es decir, 200 y 404 para OK y NOT FOUND respectivamente).
- statusText : devolverá el texto de estado en forma de string. (es decir, OK y NO ENCONTRADO para 200 y 404 respectivamente).
Exploraremos estos conceptos y los entenderemos a través de las ilustraciones.
Ejemplo 1: En este ejemplo, la página se muestra con el botón ‘Obtener los contenidos’. Al hacer clic en el botón, onload define una función a llamar. Intentará acceder a gfg.html que está presente dentro del mismo servidor y dado que está disponible, tomará los contenidos y los mostrará en la etiqueta <div>
XMLHttpRequest.html
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest Object</title>
</head>
<body>
<div id="gfgdemo">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
The XMLHttpRequest Object onLoad Example
</h3>
<button type="button" onclick="loadDoc()">
Get the contents
</button>
</div>
<script>
function loadDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("gfgdemo").innerHTML =
this.responseText;
}
// Trying to open with GET method.
// We just want to get the contents from gfg.txt
// which is present in the server
xmlhttp.open("GET", "gfg.html");
xmlhttp.send();
}
</script>
</body>
</html>
gfg.html
<!DOCTYPE html> <html> <body> <h2>XMLHttpRequest Properties</h2> <table border="2"> <th>onload</th> <th>onreadystatechange</th> <th>readyState</th> <th>responseText</th> <th>responseXML</th> <th>status</th> <th>statusText</th> </table> </body> </html>
Salida: aquí, podemos ver que al hacer clic en el botón, se llama a la carga y se procesa el contenido del archivo gfg.html .
Ejemplo 2: Este ejemplo ilustra la propiedad onreadystatechange que se invocará cuando cambie la propiedad readyState . Aquí, usaremos el archivo gfg.html anterior.
onreadystatechange.html
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest Object</title>
</head>
<body>
<div id="gfgdemo">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
The XMLHttpRequest Object onreadystatechange Example
</h3>
<button type="button"
onclick="loadDoc()">
onreadystatechange demo
</button>
</div>
<script>
function loadDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Only when readyState is 4 and status as 200,
// we can get proper response
if(this.readyState == 4 && this.status == 200) {
document.getElementById("gfgdemo").innerHTML
= this.responseText;
}
};
xmlhttp.open("GET", "gfg.html");
xmlhttp.send();
}
</script>
</body>
</html>
Explicación: al ejecutar esto, como gfg.html está presente en el mismo servidor y suponiendo que no haya problemas para recuperarlo, obtendremos el estado listo como 4 y la respuesta como 200 y, por lo tanto, podemos ver el siguiente resultado.
Producción:
Nota: Es muy importante tener en cuenta que la URL que se abre debe estar disponible en el mismo servidor. Si no, arrojará un error de dominio cruzado.
Ejemplo 3: En este ejemplo, estamos usando el ejemplo de código anterior. La página solicitada puede ser un archivo HTML/XML/texto. Aquí, intentaremos obtener el contenido de un archivo XML.
foodDetails.xml
<breakfast_menu> <food> <name>Idli</name> <price>30</price> <description> Famous South Indian Healthy Food </description> <calories>650</calories> </food> <food> <name>Dosa</name> <price>100</price> <description> Famous South Indian Most wanted Food </description> <calories>900</calories> </food> </breakfast_menu>
XMLHttpRequests.html
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest Object</title>
</head>
<body>
<div id="gfgdemo">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
The XMLHttpRequest Object onreadystatechange Example
</h3>
<button type="button"
onclick="loadDoc()">
onreadystatechange demo
</button>
</div>
<script>
function loadDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Only when readyState is 4 and status as 200,
// we can get proper response)
if(this.readyState == 4 && this.status == 200) {
document.getElementById("gfgdemo").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "foodDetails.xml");
xmlhttp.send();
}
</script>
</body>
</html>
Salida: desde la salida, podemos ver que el contenido del archivo XML se procesa.
Las propiedades XMLHttpRequest son muy útiles para abrir una página web que está presente en el mismo servidor. Dentro de la página web, podemos mantener la información necesaria, incluso obtener los contenidos de la llamada API Rest y configurar la respuesta de eso a los controles de elementos HTML presentes en el archivo de llamada o un archivo XML.
Publicación traducida automáticamente
Artículo escrito por priyarajtt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA