AJAX
Asynchronous JavaScript and XML
AJAX
Nos permite cargar contenido en nuestro sitio de forma dinámica sin necesidad de recargar el documento.
Su funcionamiento depende de la interacción con el servidor.
Nos permite obtener recursos ubicados en los servidores mediante el uso de JavaScript e insertarlos dentro de nuestro documento.
<html>
<head>
<title>Hola Mundo</title>
<script type="text/javascript">
function obtenerArchivo() {
var peticion = new XMLHttpRequest();
peticion.onreadystatechange = muestraContenido;
peticion.open('GET', 'http://localhost/holamundo.txt', true);
peticion.send(null);
function muestraContenido() {
if(peticion.readyState == 4) {
if(peticion.status == 200) {
alert(peticion.responseText);
}
}
}
}
window.onload = obtenerArchivo;
</script>
</head>
<body>
</body>
</html>XMLHttpRequest
Es un clase JavaScript creada por Microsoft y adoptada por Mozilla, Google y Safari.
Proporciona una manera fácil de obtener información a partir de una URL sin necesidad de recargar la pagina entera.
Podemos instanciar un objeto de esta clase de la siguiente manera:
var peticion = new XMLHttpRequest();XMLHttpRequest
Es soportado por Internet Explorer 7+, Google Chrome, Mozilla Firefoz y Safari. Si deseamos utilizarlo con Internet Explorer 5 o 6, debemos hacer uso de otra clase JavaScript llamada ActiveXObjec
var peticion = new ActiveXObject("Microsoft.XMLHTTP");Esta clase solo existe en esos navegadores, por lo tanto solo basta por consultar por la existencia de la clase para saber si debemos utilizarla o no.
if (window.ActiveXObject) { ... }Petición
Una vez instanciada la clase XMLHttpRequest, usamos el método open, el cual indica el método, el recurso y si la peticion sera asincronica, y el método send que envía la petición.
HttpObject.open(metodo, url, sincronismo);
HttpObject.send(string);var peticion = new XMLHttpRequest();
peticion.open("GET", "holamundo.txt", true);
peticion.send();Por ejemplo
Respuesta
El servidor Web procesa la petición y emite una respuesta.
Cuando se obtiene la respuesta se dispara un evento llamado onreadystatechange.
Podemos capturar el evento desde el objeto instanciado.
HttpRequest.onreadystatechange = function() { ... }Respuesta
Dependiendo del contenido de la respuesta, podemos acceder al cuerpo de la misma mediante los atributos responseText y responseXML.
document.querySelector("div").innerHTML=HttpRequest.responseText;responseText obtiene la respuesta como si se tratase de un string, en cambio, responseXML lo hace como si fuese XML
XMLHttpRequest
El codigo de estado de la respuesta y el texto descriptivo del mismo puede ser conocido a partir de atributos status y statusText.
También podemos conocer el estado de la petición mediante el atributo readyState.
- 0 - No Incializado
- 1 - Conexión establecida
- 2 - Petición recibida
- 3 - Procesando peticion
- 4 - Completo
XMLHttpRequest
El metodo abort nos permite detener una peticion en curso.
El metodo getAllResponseHeaders obtiene una cadena de texto que representa la cabecera de la respuesta.
El metodo getResponseHeader obtiene una cadena de texto que representa una cabecera en particular.
El metodo setRequestHeader establece una cabecera de la petición.
AJAX
By Neri Guidi
AJAX
- 468
