XMLHttpRequestObjeto
Con el objeto XMLHttpRequest, puede actualizar una parte de una página web sin recargar toda la página.
Objeto XMLHttpRequest
El objeto XMLHttpRequest se utiliza para intercambiar datos con el servidor en segundo plano.
El objeto XMLHttpRequest esel sueño de los desarrolladores, porque puedes:
- Actualizar una página web sin recargarla
- Solicitar datos del servidor después de que la página se haya cargado
- Recibir datos del servidor después de que la página se haya cargado
- Enviar datos al servidor en segundo plano
Crear el objeto XMLHttpRequest
Todos los navegadores modernos (IE7+, Firefox, Chrome, Safari y Opera) tienen un objeto XMLHttpRequest integrado.
Sintaxis para crear el objeto XMLHttpRequest
Las versiones antiguas de Internet Explorer (IE5 e IE6) usan el objeto ActiveX:
Para manejar todos los navegadores modernos, incluidos IE5 e IE6, verifique si el navegador admite el objeto XMLHttpRequest. Si lo admite, cree un objeto XMLHttpRequest; si no lo admite, cree un objeto ActiveX:
Ejemplo
Pruébalo »
Enviar una solicitud al servidor
Para enviar una solicitud al servidor, usamos los métodos open() y send() del objeto XMLHttpRequest:
xmlhttp.send();
| Método | Descripción |
|---|---|
| open(method,url,async) | Especifica el tipo de solicitud, la URL y si la solicitud debe procesarse de forma asíncrona. method: el tipo de solicitud: GET o POST url: la ubicación del archivo en el servidor async: true (asíncrono) o false (síncrono) |
| send(string) | Envía la solicitud al servidor. string: solo para solicitudes 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, use siempre solicitudes POST en los siguientes casos:
- Cuando el archivo en caché no es una opción (actualizar archivos o una base de datos en el servidor)
- Cuando la cantidad de datos enviados al servidor es grande (POST no tiene límite de tamaño)
- Para enviar entradas del usuario (que pueden contener caracteres desconocidos), POST es más potente y seguro que GET
URL: archivo en el servidor
El parámetro url del método open() es la dirección de un archivo en el servidor:
El archivo puede ser de cualquier tipo (como .txt y .xml), o un script del servidor (como .html y .php, que pueden ejecutar acciones en el servidor antes de enviar la respuesta).
Asíncrono: ¿true o false?
Para enviar la solicitud de forma asíncrona, el parámetro async del método open() debe establecerse en true:
Enviar solicitudes asíncronas es un gran avance para los desarrolladores web. Muchas tareas que se ejecutan en el servidor consumen mucho tiempo.
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
- Manejar la respuesta cuando esté lista
Async=true
Cuando se usa async=true, especifique una función para ejecutar en el evento onreadystatechange cuando la respuesta esté lista:
Ejemplo
Pruébalo »
Async=false
Para usar async=false, cambie el tercer parámetro del método open() a false:
No se recomienda usar async=false, pero es aceptable para manejar algunas solicitudes pequeñas.
Recuerde que JavaScript no continuará ejecutándose hasta que la respuesta del servidor esté lista. Si el servidor está ocupado o lento, la aplicación se colgará o se detendrá.
Nota:Cuando use async=false, no escriba la función onreadystatechange; simplemente coloque el código después de la sentencia send():
Ejemplo
Pruébalo »
Respuesta del servidor
Para obtener la respuesta del servidor, use las propiedades responseText o responseXML del objeto XMLHttpRequest.
| Propiedad | Descripción |
|---|---|
| responseText | Obtener los datos de la respuesta como una cadena |
| responseXML | La propiedad ResponseXML devuelve un objeto de documento XML que se puede examinar y analizar utilizando los métodos y propiedades del árbol de nodos DOM. |
Propiedad responseText
Si la respuesta del servidor no es XML, use la propiedad responseText.
La propiedad responseText devuelve la respuesta como una cadena, y puede usarla en consecuencia:
Propiedad responseXML
Si la respuesta del servidor es XML y desea analizarla como un objeto XML, use la propiedad responseXML:
Ejemplo
Solicitar el archivoy analizar la respuesta:
Pruébalo »
Evento onreadystatechange
Cuando la solicitud se envía al servidor, queremos realizar algunas acciones según la respuesta.
El evento onreadystatechange se dispara cada vez que cambia readyState.
La propiedad readyState contiene el estado de XMLHttpRequest.
Las tres propiedades importantes del objeto XMLHttpRequest:
| Propiedad | Descripción |
|---|---|
| onreadystatechange | Almacena la función (o el nombre de la función) que se llama automáticamente cada vez que cambia la propiedad readyState |
| readyState | Contiene el estado de XMLHttpRequest. Cambia de 0 a 4: 0: solicitud no inicializada 1: conexión con el servidor establecida 2: solicitud recibida 3: procesando la solicitud 4: solicitud completada y respuesta lista |
| status | 200："OK" 404: página no encontrada |
En el evento onreadystatechange, especificamos qué ocurre cuando la respuesta del servidor está lista para procesarse.
Cuando readyState es 4 o el estado es 200, la respuesta está lista:
Ejemplo
Pruébalo »
Nota:El evento onreadystatechange se dispara cada vez que readyState cambia, es decir, cuatro veces en total.
Más ejemplos
Recuperar información de cabecera con getAllResponseHeaders()
Recupera la información de cabecera del recurso (archivo).
Recuperar información de cabecera específica con getResponseHeader()
Recupera la información de cabecera especificada del recurso (archivo).
Cómo se comunica una página web con el servidor web cuando el usuario escribe caracteres en un campo de entrada.
Cómo extrae información una página web de una base de datos mediante el objeto XMLHttpRequest.
Crear un XMLHttpRequest para recuperar datos de un archivo XML y mostrar los datos en una tabla HTML.
Otras extensiones