AJAX El objeto XMLHttpRequest

Tabla de contenido

    Mostrar tabla de contenidos

La piedra angular de AJAX es el objeto XMLHttpRequest.

  1. Crear un objeto XMLHttpRequest

  2. Definir una función de devolución de llamada

  3. Abra el objeto XMLHttpRequest

  4. Enviar una solicitud a un servidor

El objeto XMLHttpRequest

Todos los navegadores modernos admiten el objeto XMLHttpRequest.

El objeto XMLHttpRequest se puede utilizar para intercambiar datos con un servidor web detrás del escenas. Esto significa que es posible actualizar partes de una página web, sin recargando toda la página.

Crear un objeto XMLHttpRequest

Todos los navegadores modernos (Chrome, Firefox, IE, Edge, Safari, Opera) tienen un objeto XMLHttpRequest incorporado.

Sintaxis para crear un objeto XMLHttpRequest:

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 a ejecutar cuando el 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 utilizar los métodos open() y send() del Objeto XMLHttpRequest:

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();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Acceso entre 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 de 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

new XMLHttpRequest()

Crea un nuevo objeto XMLHttpRequest

abort()

Cancela la solicitud actual

getAllResponseHeaders()

Devuelve información del encabezado

getResponseHeader()

Devuelve información de encabezado específica

open(method, url, async, user, psw)

Especifica la solicitud

método: el tipo de solicitud GET o POST
url: la ubicación del archivo
async: verdadero (asíncrono) o falso (sincrónico)
usuario: nombre de usuario opcional
psw: contraseña opcional

send()

Envía la solicitud al servidor
Utilizado para solicitudes GET

send(string)

Envía la solicitud al servidor.
Utilizado para solicitudes POST

setRequestHeader()

Agrega un par etiqueta/valor al encabezado que se enviará

Propiedades del objeto XMLHttpRequest

onload

Define una función que se llamará cuando se reciba (cargue) la solicitud.

onreadystatechange

Define una función que se llamará cuando cambie la propiedad readyState

readyState

Mantiene el estado de XMLHttpRequest.
0: solicitud no inicializada
1: conexión del servidor establecida
2: solicitud recibida
3: solicitud de procesamiento
4: solicitud finalizada y respuesta lista

responseText

Devuelve los datos de respuesta como una cadena.

responseXML

Devuelve los datos de respuesta como datos XML

status

Devuelve el número de estado de una solicitud
200: "OK"
403: "Prohibido"
404: "No encontrado"
Para obtener una lista completa, vaya al Http Referencia de mensajes

statusText

Devuelve el texto de estado (por ejemplo, "OK" o "No encontrado")

La propiedad de carga

Con el objeto XMLHttpRequest puede definir una función de devolución de llamada que se ejecutará cuando la solicitud recibe respuesta.

La función se define en la propiedad onload del objeto XMLHttpRequest:

Ejemplo

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
 }
 xhttp.open("GET", "ajax_info.txt");
 xhttp.send();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

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 ejecutando el objeto XMLHttpRequest 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 propiedad readyState mantiene el estado de XMLHttpRequest.

La propiedad onreadystatechange define una función de devolución de llamada que se ejecutará cuando cambie readyState.

La propiedad status y las propiedades statusText mantienen el estado del objeto XMLHttpRequest.

onreadystatechange

Define una función que se llamará cuando cambie la propiedad readyState

readyState

Mantiene el estado de XMLHttpRequest.
0: solicitud no inicializada
1: conexión del servidor establecida
2: solicitud recibida
3: solicitud de procesamiento
4: solicitud finalizada y respuesta lista

status

200: "OK"
403: "Prohibido"
404: "Página no encontrada"
Para obtener una lista completa, vaya a Referencia de mensajes HTTP

statusText

Devuelve el texto de estado (por ejemplo, "OK" o "No encontrado")

La función onreadystatechange 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();
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
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();
}
</script>

</body>
</html>

El evento onreadystatechange se activa cuatro veces (1-4), una vez por cada cambio en readyState.