El objeto XMLHttpRequest
Todos los navegadores modernos tienen un objeto XMLHttpRequest incorporado para solicitar datos de un servidor.
Todos los navegadores principales tienen un analizador XML incorporado para acceder y manipular XML.
El objeto XMLHttpRequest
El objeto XMLHttpRequest se puede utilizar para solicitar datos de un servidor web.
El objeto XMLHttpRequest es el sueño de un desarrollador , porque puede:
- Actualizar una página web sin recargar la página
- Solicitar datos de un servidor: después de que se haya cargado la página
- Recibir datos de un servidor: después de que se haya cargado la página
- Enviar datos a un servidor - en segundo plano
Ejemplo de XMLHttpRequest
Cuando escribe un carácter en el campo de entrada a continuación, se envía un XMLHttpRequest al servidor y se devuelven algunas sugerencias de nombres (desde el servidor):
Ejemplo
Start typing a name in the input field below:
Suggestions:
Envío de una solicitud XMLHttp
Todos los navegadores modernos tienen un objeto XMLHttpRequest integrado.
Una sintaxis de JavaScript común para usarlo se parece mucho a esto:
Ejemplo
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Creación de un objeto XMLHttpRequest
La primera línea del ejemplo anterior crea un objeto XMLHttpRequest:
var xhttp = new XMLHttpRequest();
El evento onreadystatechange
La propiedad readyState contiene el estado de XMLHttpRequest.
El evento onreadystatechange se activa cada vez que cambia readyState.
Durante una solicitud del servidor, readyState cambia de 0 a 4:
0: solicitud no inicializada
1: conexión con el servidor establecida
2: solicitud recibida
3: solicitud en proceso
4: solicitud finalizada y respuesta lista
En la propiedad onreadystatechange, especifique una función que se ejecutará cuando cambie readyState:
xhttp.onreadystatechange = function()
Cuando readyState es 4 y el estado es 200, la respuesta está lista:
if (this.readyState == 4 && this.status == 200)
Propiedades y métodos de XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Acceso a través de dominios
Por razones de seguridad, los navegadores modernos no permiten el acceso entre dominios.
Esto significa que tanto la página web como el archivo XML que intenta cargar deben estar ubicados en el mismo servidor.
Todos los ejemplos en W3Schools abren archivos XML ubicados en el dominio de W3Schools.
Si desea utilizar el ejemplo anterior en una de sus propias páginas web, los archivos XML que cargue deben estar ubicados en su propio servidor.
La propiedad de texto de respuesta
La propiedad responseText devuelve la respuesta como una cadena.
Si desea utilizar la respuesta como una cadena de texto, utilice la propiedad responseText:
Ejemplo
document.getElementById("demo").innerHTML = xmlhttp.responseText;
La propiedad responseXML
La propiedad responseXML devuelve la respuesta como un objeto DOM XML.
Si desea utilizar la respuesta como un objeto DOM XML, utilice la propiedad responseXML:
Ejemplo
Solicite el archivo cd_catalog.xml y use la respuesta como un objeto DOM XML:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
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 robusto y seguro que GET
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:
xmlhttp.open("GET", "xmlhttp_info.txt", 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?
Para enviar la solicitud de forma asíncrona, el parámetro asíncrono del método open() debe establecerse en verdadero:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
El envío de solicitudes de forma asíncrona es una gran mejora para los desarrolladores web. Muchas de las tareas realizadas 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
- lidiar con la respuesta cuando la respuesta esté lista
asíncrono = verdadero
Cuando use async = true, especifique una función para ejecutar cuando la respuesta esté lista en el evento onreadystatechange:
Ejemplo
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
asíncrono = falso
Para usar async = false, cambie el tercer parámetro en el método open() a false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
No se recomienda usar async = false, pero para algunas solicitudes pequeñas puede estar bien.
Recuerde que el 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 una función onreadystatechange; simplemente coloque el código después de la instrucción send():
Ejemplo
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Analizador XML
Todos los navegadores modernos tienen un analizador XML incorporado.
El modelo de objeto de documento XML (DOM XML) contiene muchos métodos para acceder y editar XML.
Sin embargo, antes de poder acceder a un documento XML, debe cargarse en un objeto DOM XML.
Un analizador XML puede leer texto sin formato y convertirlo en un objeto DOM XML.
Análisis de una cadena de texto
Este ejemplo analiza una cadena de texto en un objeto DOM XML y extrae la información con JavaScript:
Ejemplo
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Navegadores antiguos (IE5 e IE6)
Las versiones antiguas de Internet Explorer (IE5 e IE6) no admiten el objeto XMLHttpRequest.
Para manejar IE5 e IE6, verifique si el navegador admite el objeto XMLHttpRequest, o bien cree un ActiveXObject:
Ejemplo
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Las versiones antiguas de Internet Explorer (IE5 e IE6) no admiten el objeto DOMParser.
Para manejar IE5 e IE6, verifique si el navegador admite el objeto DOMParser, o bien cree un ActiveXObject:
Ejemplo
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Más ejemplos
Recuperar información de encabezado de un recurso (archivo).
Recuperar información de encabezado específica de un recurso (archivo).
Cómo una página web puede comunicarse con un servidor web mientras un usuario escribe caracteres en un campo de entrada.
Cómo una página web puede obtener información de una base de datos con el objeto XMLHttpRequest.
Cree una XMLHttpRequest para recuperar datos de un archivo XML y mostrar los datos en una tabla HTML.