XMLHttpRequest es un objeto que se usa para enviar una solicitud al servidor web para intercambiar datos o transferirlos y manipularlos desde el servidor detrás de escena. Puede utilizar los datos recibidos para actualizar los datos presentes en la página web sin siquiera recargar la página.
A continuación se muestra la sintaxis completa para usar el objeto XMLHttpRequest.
Sintaxis:
Al principio, debe invocar el método XMLHttpRequest() como se muestra a continuación.
var variable_name = new XMLHttpRequest();
Después de llamar al método XMLHttpRequest() , debe definir una función de devolución de llamada que se activará después de obtener la respuesta.
variable_name.onload = function () {
// Content of callback function
// after getting the response
}
Enviar una solicitud usando los métodos open() y send() como se muestra a continuación.
variable_name.open("GET", "textFile.txt");
variable_name.send();
El objeto XMLHttpRequest tiene diferentes funciones y propiedades que se enumeran a continuación.
Métodos de objeto XMLHttpRequest:
- new XMLHttpRequest(): Crea un nuevo objeto XMLHttpRequest.
- abortar(): este método cancelará la solicitud actual para intercambiar datos.
- getAllResponseHeaders(): devolverá un conjunto de encabezados HTTP en forma de string.
- getResponseHeader(): devolverá la información del encabezado HTTP especificado.
- open(método, URL, asíncrono, nombre de usuario, contraseña): este método especifica el método, la URL y otros parámetros de una solicitud. En esta llamada de función, el parámetro de método define la operación que debe realizarse en los datos como GET, POST, HEAD y algunos otros métodos HTTP como PUT, DELETE. El parámetro async especifica el comportamiento asíncrono de la solicitud. Tiene dos valores verdadero y falso . Si el valor es verdadero , el procesamiento del script continuará después del método send() sin esperar la respuesta, mientras que el valor falso significa que el script esperará una respuesta antes de procesarlo.
- send(): Enviará la solicitud al servidor para el intercambio de datos. Para OBTENER las requests, se usa send() .
- send(string): También envía la solicitud al servidor para el intercambio de datos, pero se usa para POSTear las requests.
- setRequestHeader(): agregará el par de etiqueta y valor al encabezado que debe enviarse.
Ejemplo: El siguiente ejemplo ilustra el uso de métodos de objetos XMLHttpRequest() .
HTML
<!DOCTYPE html>
<html>
<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>Ready states of a request in ajax</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var state = new XMLHttpRequest();
state.onload = function () {
document.getElementById("container")
.innerHTML = state.getAllResponseHeaders();
}
state.open("GET", "gfgInfo.txt", true);
state.send();
}
</script>
</body>
</html>
Producción:
Propiedades del objeto XMLHttpRequest:
- onload: define una función de devolución de llamada que se llamará cuando se cargue o reciba la solicitud.
- onreadystatechange: también define una función de devolución de llamada que se invocará cuando cambie la propiedad readyState .
- readyState: la propiedad readyState define el estado actual de la solicitud o contiene el estado actual de XMLHttpRequest . Hay cinco estados de una solicitud que se enumeran a continuación.
- readyState=0: Indica que la solicitud aún no está inicializada.
- readyState=1: en este estado, se establece la conexión con el servidor y se liquida la solicitud.
- readyState=2: este estado indica que el servidor recibe la solicitud.
- readyState=3: esta solicitud se encuentra en un estado de procesamiento en este nivel.
- readyState=4: la solicitud finaliza o se completa en esta etapa y la respuesta está lista para su uso posterior.
- 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.
- estado: 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)
Ejemplo: El siguiente ejemplo ilustra el uso de las propiedades del objeto XMLHttpRequest() .
HTML
<!DOCTYPE html>
<html>
<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>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var state = new XMLHttpRequest();
state.onload = function () {
if (this.readyState == 4) {
document.getElementById("container").innerHTML =
this.responseText + "Status Text: "
+ this.statusText;
}
};
state.open("GET", "gfgInfo.txt", true);
state.send();
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA