Enviar solicitudes AJAX

Después de crear el objeto XMLHttpRequest (consulte el capítulo anterior), debemos enviar la solicitud al servidor.

Enviar solicitud al servidor

Para enviar la solicitud al servidor, utilizamos dos métodos del objeto XMLHttpRequest:

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

El método open() acepta tres parámetros:

• El primer parámetro es el método de solicitud HTTP-GET, POST

• El segundo parámetro es la URL a la que envía la solicitud

• El tercer parámetro opcional establece si la solicitud es asíncrona (por defecto true)

El método send() acepta un parámetro opcional:

• Para solicitudes GET, no transmita ningún valor

• Para solicitudes POST, transmitanombre=valorPara

Solicitudes HTTP: GET y POST?

EnGETEn el método, el navegador colocará el contenido del formulario (nombres/Agregue pares de valores (nombre=valor) al final de la URL.

GET se utiliza generalmente para formularios sin preocuparse por la seguridad. GET ofrece muchos beneficios para formularios simples.

• Las solicitudes GET pueden almacenarse en caché

• Las solicitudes GET se conservan en el historial del navegador

• Las solicitudes GET pueden agregar marcadores

• No utilice solicitudes GET para manejar datos sensibles

• Las solicitudes GET tienen un límite de longitud (sólo2048caracteres）

EnPOSTEn el método, el contenido no se muestra en la URL.

Si los datos del formulario contienen información sensible o personal, siempre debe usar POST.

• Las solicitudes POST nunca se almacenan en caché

• Las solicitudes POST no se conservan en el historial del navegador

• Las solicitudes POST no pueden agregar marcadores

• Utilice solicitudes POST para manejar datos sensibles

• La solicitud POST no tiene límite de longitud de datos

Solicitud GET

El siguiente ejemplo muestra cómo realizar una solicitud Ajax GET simple utilizando JavaScript:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

En el ejemplo anterior, podría obtener resultados en caché. Para evitar esto, agregue un número aleatorio a la URL:

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

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

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

Solicitud POST

El siguiente ejemplo muestra cómo realizar una solicitud Ajax POST simple utilizando JavaScript:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

Si desea enviar información utilizando el método POST, utilice la configuración de encabezados HTTP, setRequestHeader(), y especifique los datos que se enviarán en el método send():

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

El método setRequestHeader() acepta dos parámetros:

• El primer parámetro especifica el nombre del encabezado

• El segundo parámetro especifica el valor del encabezado

URL-El archivo en el servidor

El segundo parámetro (url) del método open() es la dirección del archivo en el servidor.

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX puede enviar y recibir varios formatos de información, incluyendo JSON, XML, HTML, PHP, ASP, texto, etc.

Propiedad onreadystatechange

El objeto XMLHttpRequest te permite definir funciones a ejecutar para manejar las respuestas.

La función de respuesta onreadystatechange se define en las propiedades del objeto XMLHttpRequest.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

Conocerás más sobre la propiedad onreadystatechange en la parte posterior de este tutorial.

Solicitud sincronizada

El tercer parámetro del método open() especifica si la solicitud esAsincrónicooSincronizado.

Para enviarSincronizadoPara la solicitud, cambie el tercer parámetro del método open() afalse.

Si se utilizaSincronizadoNo es necesario especificar la función de respuesta para la solicitud:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

No se recomienda su usoSincronizadoSolicitudes, porque:

• 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á

• Ofrecer una mala experiencia de usuario