Todos los navegadores modernos tienen un objeto incorporado XMLHttpRequest para solicitar datos de un servidor.
Todos los principales navegadores tienen un analizador XML integrado 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 a developers dream , porque usted puede:
- Actualizar una página web sin tener que recargar la página
- solicitar datos de un servidor - después de que la página se ha cargado
- Recibir datos de un servidor - después de que la página se ha cargado
- Enviar datos a un servidor - en el fondo
Ejemplo XMLHttpRequest
Cuando se escribe un carácter en el campo de entrada de abajo, un XMLHttpRequest se envía al servidor, y se devuelven algunas sugerencias de nombres (from the server) :
Ejemplo
Start typing a name in the input field below:
Suggestions:
El envío de un XMLHttpRequest
Todos los navegadores modernos tienen un objeto XMLHttpRequest incorporado.
Una sintaxis común para el uso de JavaScript, se parece a esto:
Ejemplo
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Inténtalo tú mismo " Creación de un objeto XMLHttpRequest
La primera línea en el ejemplo anterior crea un objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
El evento onreadystatechange
La propiedad readyState mantiene el estado de la XMLHttpRequest.
El evento onreadystatechange se dispara cada vez que cambia el readyState.
Durante una solicitud del servidor, el readyState cambia de 0 a 4:
0: solicitud no inicializado
1: conexión del servidor estableció
2: solicitud recibida
3: Solicitud de procesamiento
4: solicitar acabado y la respuesta está listo
En la propiedad onreadystatechange, especificar una función a ejecutar cuando el readyState cambia:
xhttp.onreadystatechange = function()
Cuando readyState es 4 y el estado es de 200, la respuesta está lista:
if (xhttp.readyState == 4 && xhttp.status == 200)
Propiedades y métodos XMLHttpRequest
| Método | Descripción |
|---|---|
| new XMLHttpRequest() | Crea un nuevo objeto XMLHttpRequest |
| open( method, url, async ) | Especifica el tipo de solicitud method : el tipo de solicitud: GET o POST url : la ubicación del archivo async : verdadero (asynchronous) o falsa (synchronous) |
| send() | Envía una petición al servidor (used for GET) |
| send( string ) | Envía una cadena de petición al servidor (used for POST) |
| onreadystatechange | Una función que se llamará cuando cambia la propiedad readyState |
| readyState | El estado de la XMLHttpRequest 0: solicitud no inicializado 1: conexión del servidor estableció 2: solicitud recibida 3: Solicitud de procesamiento 4: solicitar acabado y la respuesta está listo |
| status | 200: OK 404 Pagina no encontrada |
| responseText | Los datos de respuesta como una cadena |
| responseXML | Los datos de respuesta como datos XML |
El acceso entre dominios
Por razones de seguridad, los navegadores modernos no permiten el acceso a través de dominios.
Esto significa que tanto la página web y el archivo XML que intenta cargar, deben estar ubicados en el mismo servidor.
Los ejemplos de w3ii todos los archivos XML abiertos situados en el dominio w3ii.
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 responseText
La propiedad responseText devuelve la respuesta como una cadena.
Si desea utilizar la respuesta como una cadena de texto, utilice la propiedad 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
Solicitar el archivo cd_catalog.xml y utilizar 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; Inténtalo tú mismo " GET o POST?
GET es más simple y más rápido que POST, y se puede utilizar en la mayoría de los casos.
Sin embargo, siempre use las peticiones POST cuando:
- Un archivo almacenado en caché no es una opción (update a file or database on the server)
- El envío de una gran cantidad de datos al servidor (POST no tiene limitaciones de tamaño)
- Envío de entrada del usuario (which can contain unknown characters) , POST es más robusta y segura que LLEGAR
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:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
El archivo puede ser cualquier tipo de archivo, como .txt y .xml o los archivos de secuencias de comandos de servidor como .asp y .php (que puede llevar a cabo acciones en el servidor antes de enviar la respuesta de vuelta).
Asíncrono - Verdadero o Falso?
Para enviar la solicitud de forma asíncrona, el parámetro asíncrono del open() método tiene que ser establecido en true:
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 que se realizan en el servidor son mucho tiempo.
Mediante el envío de forma asíncrona, el código JavaScript no tiene que esperar a la respuesta del servidor, sino que puede:
- ejecutar otros scripts a la espera de respuesta del servidor
- hacer frente a la respuesta cuando la respuesta está listo
Async = true
Cuando se utiliza async = true, especificar la función que se ejecutará cuando la respuesta está listo en caso onreadystatechange:
Ejemplo
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Inténtalo tú mismo " Async = false
Para utilizar async = falso, cambie el tercer parámetro en el open() método en false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
El uso asíncrono = false no es recomendable, pero para algunos pedidos pequeños esto puede ser aceptable.
Recuerde que el JavaScript no continuará para ejecutar, hasta que la respuesta del servidor está listo. Si el servidor está ocupado o lento, la aplicación se cuelgue o se detiene.
Note: Cuando se utiliza async = falso, no escriba una función onreadystatechange - sólo hay que poner el código después de que el send() declaración:
Ejemplo
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Inténtalo tú mismo " Analizador XML
Todos los navegadores modernos tienen un analizador XML incorporado.
El modelo de objetos de documento XML (the XML DOM) contiene una gran cantidad de métodos para acceder y editar XML.
Sin embargo, antes se puede acceder a un documento XML, debe ser cargado en un objeto DOM XML.
Un analizador XML puede leer texto sin formato y convertirlo en un objeto DOM XML.
Analizar una cadena de texto
En este ejemplo se analiza una cadena de texto en un objeto DOM XML, y extrae la información de él 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>
Inténtalo tú mismo " Los navegadores antiguos (IE5 and IE6)
Las versiones antiguas de Internet Explorer (IE5 and IE6) no son compatibles con el objeto XMLHttpRequest.
Para manejar IE5 y IE6, comprobar si el navegador es compatible con el objeto XMLHttpRequest, o bien crear una ActiveXObject:
Ejemplo
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Inténtalo tú mismo " Las versiones antiguas de Internet Explorer (IE5 and IE6) no son compatibles con el objeto DOMParser.
Para manejar IE5 y IE6, comprobar si el navegador es compatible con el objeto DOMParser, o bien crear una 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);
}
Inténtalo tú mismo " 
Más ejemplos
Recuperar información de cabecera con getAllResponseHeaders()
Recuperar información de la cabecera de un recurso (file) .
Recuperar información de cabecera específica con getResponseHeader()
Recuperar información de cabecera específica de un recurso (file) .
Recuperar el contenido de un archivo ASP
¿Cómo una página web puede comunicarse con un servidor web, mientras que unos caracteres de tipo de usuario en un campo de entrada.
Recuperar contenido de una base de datos
¿Cómo una página web puede recuperar información de una base de datos con el objeto XMLHttpRequest.
Recuperar el contenido de un archivo XML
Crear un XMLHttpRequest para recuperar datos de un archivo XML y mostrar los datos en una tabla HTML.