AJAX - XMLHttpRequest

El objeto XMLHttpRequest se utiliza para intercambiar datos con el servidor.

Enviar solicitud al servidor

Para enviar solicitudes al servidor, utilizamos el objeto open() y send() Método:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
método descripción
open(method, url, async)

Especifica el tipo de solicitud

  • method：tipo de solicitud: GET o POST
  • url：ubicación del servidor (archivo)
  • async：true（asincrónico）o false（sincrónico）
send() Enviar solicitud al servidor (usado para GET)
send(string) Enviar solicitud al servidor (usado para POST)

GET o POST?

GET es más simple y rápido que POST, y se puede usar en la mayoría de los casos.

Sin embargo, utilice siempre POST en las siguientes situaciones:

  • Los archivos en caché no son una opción (actualizar archivos o bases de datos en el servidor)
  • Enviar grandes cantidades de datos al servidor (POST no tiene límite de tamaño)
  • Enviar la entrada del usuario (puede contener caracteres desconocidos), POST es más poderoso y seguro que GET

Solicitud GET

Una solicitud GET simple:

Ejemplo

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Prueba personalmente

En el ejemplo anterior, es posible que obtenga un resultado en caché. Para evitar esto, agregue un ID único a la URL:

Ejemplo

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Prueba personalmente

Si necesita enviar información utilizando el método GET, agregue esta información a la URL:

Ejemplo

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Prueba personalmente

Solicitud POST

Una solicitud POST simple:

Ejemplo

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Prueba personalmente

Si necesita enviar datos POST como un formulario HTML, utilice setRequestHeader() Añadir un encabezado HTTP. Por favor, en send() Se especifica en el método los datos que necesita enviar:

Ejemplo

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Prueba personalmente

método descripción
setRequestHeader(header, value)

Agregar cabeceras HTTP a la solicitud

  • header：especificar el nombre de la cabecera
  • value：especificar el valor de la cabecera

url - archivo en el servidor

método url parámetro, es la dirección del archivo en el servidor:

xhttp.open("GET", "ajax_test.asp", true);

Este archivo puede ser de cualquier tipo, como .txt y .xml, o archivos de scripts del servidor, como .asp y .php (que pueden ejecutarse en el servidor antes de enviar la respuesta).

¿Asincrónico - true o false?

Si desea enviar solicitudes de manera asíncrona:open() método async los parámetros deben configurarse como true:

xhttp.open("GET", "ajax_test.asp", true);

El envío de solicitudes asíncronas representa un gran progreso para los desarrolladores web. Muchas tareas ejecutadas en el servidor son muy consumidoras de tiempo. Antes de AJAX, esta operación podría causar que la aplicación se congele o se detenga.

Al enviar de manera asíncrona, JavaScript no necesita esperar la respuesta del servidor, sino que puede:

  • Ejecutar otros scripts mientras espera la respuesta del servidor
  • Manejar la respuesta cuando esté lista

propiedad onreadystatechange

A través del objeto XMLHttpRequest, puede definir la función que se ejecutará cuando la solicitud reciba una respuesta.

Esta función se ejecuta en el objeto onreadystatechange definida en las propiedades:

Ejemplo

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Prueba personalmente

Aprenderá más sobre onreadystatechange en los capítulos posteriores.

solicitudes sincrónicas

Si desea realizar solicitudes sincrónicas, por favor configure open() El tercer parámetro del método se establece en false:

xhttp.open("GET", "ajax_info.txt", false);

A veces async = false se utiliza para pruebas rápidas. También verás solicitudes sincrónicas en código JavaScript más antiguo.

Dado que el código esperará a que el servidor se complete, no es necesario el función onreadystatechange:

Ejemplo

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Prueba personalmente

No recomendamos XMLHttpRequest sincrónico (async = false), ya que JavaScript se detendrá hasta que el servidor esté listo para responder. Si el servidor está ocupado o lento, la aplicación se congelará o detendrá.

XMLHttpRequest sincrónico está siendo eliminado de los estándares web, pero este proceso puede tardar muchos años.

Se alienta a los herramientas de desarrollo moderno para emitir advertencias sobre el uso de solicitudes sincrónicas y, en caso de que ocurra esta situación, puede lanzar la excepción InvalidAccessError.