AJAX: el objeto XMLHttpRequest
La piedra angular de AJAX es el objeto XMLHttpRequest.
- Crear un objeto XMLHttpRequest
- Definir una función de devolución de llamada
- Abra el objeto XMLHttpRequest
- Enviar una solicitud a un servidor
El objeto XMLHttpRequest
Todos los navegadores modernos admiten el XMLHttpRequest
objeto.
El XMLHttpRequest
objeto se puede utilizar para intercambiar datos con un servidor web en segundo plano. Esto significa que es posible actualizar partes de una página web sin recargar toda la página.
Crear un objeto XMLHttpRequest
Todos los navegadores modernos (Chrome, Firefox, IE, Edge, Safari, Opera) tienen un XMLHttpRequest
objeto incorporado.
Sintaxis para crear un XMLHttpRequest
objeto:
variable = new XMLHttpRequest();
Definir una función de devolución de llamada
Una función de devolución de llamada es una función que se pasa como parámetro a otra función.
En este caso, la función de devolución de llamada debe contener el código para ejecutar cuando la respuesta esté lista.
xhttp.onload = function() {
// What to do when the response is ready
}
Enviar una solicitud
Para enviar una solicitud a un servidor, puede usar los métodos open() y send() del
XMLHttpRequest
objeto:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Ejemplo
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Acceso a través de dominios
Por razones de seguridad, los navegadores modernos no permiten el acceso entre dominios.
Esto significa que tanto la página web como el archivo XML que intenta cargar deben estar ubicados en el mismo servidor.
Todos los ejemplos en W3Schools abren archivos XML ubicados en el dominio de W3Schools.
Si desea utilizar el ejemplo anterior en una de sus propias páginas web, los archivos XML que cargue deben estar ubicados en su propio servidor.
Métodos de objeto XMLHttpRequest
Method | Description |
---|---|
new XMLHttpRequest() | Creates a new XMLHttpRequest object |
abort() | Cancels the current request |
getAllResponseHeaders() | Returns header information |
getResponseHeader() | Returns specific header information |
open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
send() | Sends the request to the server Used for GET requests |
send(string) | Sends the request to the server. Used for POST requests |
setRequestHeader() | Adds a label/value pair to the header to be sent |
Propiedades del objeto XMLHttpRequest
Property | Description |
---|---|
onload | Defines a function to be called when the request is recieved (loaded) |
onreadystatechange | Defines a function to be called when the readyState property changes |
readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
responseText | Returns the response data as a string |
responseXML | Returns the response data as XML data |
status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
statusText | Returns the status-text (e.g. "OK" or "Not Found") |
La propiedad onload
Con el XMLHttpRequest
objeto puede definir una función de devolución de llamada que se ejecutará cuando la solicitud reciba una respuesta.
La función se define en la onload
propiedad del XMLHttpRequest
objeto:
Ejemplo
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Múltiples funciones de devolución de llamada
Si tiene más de una tarea AJAX en un sitio web, debe crear una función para ejecutar el XMLHttpRequest
objeto y una función de devolución de llamada para cada tarea AJAX.
La llamada a la función debe contener la URL y qué función llamar cuando la respuesta esté lista.
Ejemplo
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
La propiedad onreadystatechange
La readyState
propiedad mantiene el estado de XMLHttpRequest.
La onreadystatechange
propiedad define una función de devolución de llamada que se ejecutará cuando cambie readyState.
La status
propiedad y las statusText
propiedades mantienen el estado del objeto XMLHttpRequest.
Property | Description |
---|---|
onreadystatechange | Defines a function to be called when the readyState property changes |
readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
statusText | Returns the status-text (e.g. "OK" or "Not Found") |
La onreadystatechange
función se llama cada vez que cambia readyState.
Cuando readyState
es 4 y el estado es 200, la respuesta está lista:
Ejemplo
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
El onreadystatechange
evento se activa cuatro veces (1-4), una vez por cada cambio en el estado listo.