AJAX - Enviar una solicitud a un servidor
El objeto XMLHttpRequest se utiliza para intercambiar datos con un servidor.
Enviar una solicitud a un servidor
Para enviar una solicitud a un servidor, usamos los métodos open() y send() del objeto XMLHttpRequest:
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) |
OBTENER o PUBLICAR?
GET es más simple y rápido que POST y se puede utilizar 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 solicitud GET:
Ejemplo
xhttp.open("GET", "demo_get.asp", true);
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(), true);
xhttp.send();
Si desea enviar información con el método GET, agregue la información a la URL:
Ejemplo
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Solicitudes POST
Una simple solicitud POST:
Ejemplo
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Para publicar datos como un formulario HTML, agregue un encabezado HTTP con setRequestHeader(). Especifique los datos que desea enviar en el método send():
Ejemplo
xhttp.open("POST", "demo_post2.asp", true);
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 |
La url - Un archivo en un servidor
El parámetro url del método open() 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
La propiedad onreadystatechange
Con el objeto XMLHttpRequest puede definir una función que se ejecutará cuando la solicitud reciba una respuesta.
La función se define en la propiedad onreadystatechange del objeto XMLHttpResponse:
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();
El archivo "ajax_info.txt" utilizado en el ejemplo anterior es un archivo de texto simple y se ve así:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Aprenderá más sobre el cambio de estado listo en un capítulo posterior.
Solicitud síncrona
Para ejecutar una solicitud síncrona, cambie el tercer parámetro en el método open() a falso:
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 función onreadystatechange:
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á.
Synchronous XMLHttpRequest está en proceso de ser eliminado del estándar web, pero este proceso puede demorar muchos años.
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.