AJAX - XMLHttpRequest
El objeto XMLHttpRequest se utiliza para solicitar datos de un servidor.
Enviar una solicitud a un servidor
Para enviar una solicitud a un servidor, usamos los métodos open() y send() del XMLHttpRequestobjeto:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
La url - Un archivo en un servidor
El parámetro url del open()método es una dirección a un archivo en un servidor:
xhttp.open("GET", "ajax_test.asp", true);
El archivo puede ser cualquier tipo de archivo, como .txt y .xml, o archivos de secuencias de comandos del servidor como .asp y .php (que pueden realizar acciones en el servidor antes de devolver la respuesta).
Asíncrono: ¿verdadero o falso?
Las solicitudes del servidor deben enviarse de forma asíncrona.
El parámetro asíncrono del método open() debe establecerse en verdadero:
xhttp.open("GET", "ajax_test.asp", true);
Al enviar de forma asíncrona, JavaScript no tiene que esperar la respuesta del servidor, sino que puede:
- ejecutar otros scripts mientras espera la respuesta del servidor
- tratar la respuesta después de que la respuesta esté lista
El valor predeterminado para el parámetro async es async = true.
Puede eliminar con seguridad el tercer parámetro de su código.
No se recomienda XMLHttpRequest síncrono (async = false) porque JavaScript dejará de ejecutarse hasta que la respuesta del servidor esté lista. Si el servidor está ocupado o lento, la aplicación se colgará o se detendrá.
OBTENER o PUBLICAR?
GETes más simple y rápido que POST, y se puede usar en la mayoría de los casos.
Sin embargo, siempre use solicitudes POST cuando:
- Un archivo en caché no es una opción (actualizar un archivo o base de datos en el servidor).
- Enviar una gran cantidad de datos al servidor (POST no tiene limitaciones de tamaño).
- Al enviar la entrada del usuario (que puede contener caracteres desconocidos), POST es más sólido y seguro que GET.
OBTENER solicitudes
Una simple GETsolicitud:
Ejemplo
xhttp.open("GET", "demo_get.asp");
xhttp.send();
En el ejemplo anterior, puede obtener un resultado almacenado en caché. Para evitar esto, agregue una ID única a la URL:
Ejemplo
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
Si desea enviar información con el GETmétodo, agregue la información a la URL:
Ejemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Cómo el servidor usa la entrada y cómo responde el servidor a una solicitud, se explica en un capítulo posterior.
Solicitudes POST
Una simple POSTsolicitud:
Ejemplo
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Para publicar datos como un formulario HTML, agregue un encabezado HTTP con setRequestHeader(). Especifique los datos que desea enviar en el send()método:
Ejemplo
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
Solicitud síncrona
Para ejecutar una solicitud síncrona, cambie el tercer parámetro en el open()método a false:
xhttp.open("GET", "ajax_info.txt", false);
A veces, async = false se usa para pruebas rápidas. También encontrará solicitudes síncronas en código JavaScript más antiguo.
Dado que el código esperará a que se complete el servidor, no hay necesidad de una onreadystatechange
función:
Ejemplo
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
No se recomienda XMLHttpRequest síncrono (async = false) porque JavaScript dejará de ejecutarse hasta que la respuesta del servidor esté lista. Si el servidor está ocupado o lento, la aplicación se colgará o se detendrá.
Se alienta a las herramientas de desarrollo modernas a advertir sobre el uso de solicitudes síncronas y es posible que generen una excepción InvalidAccessError cuando ocurra.