Descubre cómo la tecnología AJAX ha revolucionado la experiencia de usuario en la web. En este artículo hablaremos sobre el objeto XMLHttpRequest, una de las herramientas más utilizadas para hacer peticiones asíncronas en la página web y mejorar su funcionamiento de manera eficiente. ¡Sumérgete en el mundo de AJAX y conoce más sobre este objeto imprescindible!
El XMLHttpRequest El objeto es la base que hace que Ajax posible con la comunicación de back-end entre el navegador y el servidor web. Afortunadamentetodos los navegadores modernos ahora son compatibles con XMLHttpRequest objeto.
sin el apoyo para este objeto, el navegador no podría intercambiar datos con el servidor web y actualizar partes de la página sin recargar la página completa. Con Ajax, podemos hacer GET y POST Solicitudes HTTP. Sin embargo, hay algunas limitaciones para XMLHttpRequest objeto.
Estos son principalmente por razones de seguridad. Primero, este objeto solo puede realizar solicitudes HTTP(S). No se admiten las referencias a direcciones URL de archivos. En segundo lugar, solo puede realizar solicitudes al mismo dominio que la página cargada actualmente. Si XMLHttpRequest solicitudes permitidas a cualquier sitio web, podría ser utilizado con fines maliciosos.
Ejemplo
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// ... JavaScript code
</script>
</head>
<body>
<img id="img1" onclick="callFunction()" src="https://www.itgeared.com/ajax-xmlhttprequest-object-tutorial/go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Sintaxis
variable = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Safari, and Opera
variable = new ActiveXObject("MSXML2.XMLHTTP.6.0");
variable = new ActiveXObject("MSXML2.XMLHTTP.5.0");
variable = new ActiveXObject("MSXML2.XMLHTTP.4.0");
variable = new ActiveXObject("MSXML2.XMLHTTP.3.0");
variable = new ActiveXObject("MSXML2.XMLHTTP");
variable = new ActiveXObject("Microsoft.XMLHTTP");Para garantizar que todos los navegadores, incluidos IE5 y IE6será compatible, primero comprueba si el navegador es compatible con XMLHttpRequest objeto. Si es así, cree un XMLHttpRequest objeto. Si no es así, cree un ActiveXObject.
Ha habido varias versiones lanzadas con cada lanzamiento subsiguiente del biblioteca MSXML. Cada versión trae consigo una mejor estabilidad y velocidad, por lo que desea asegurarse de que siempre está utilizando la versión más reciente disponible en la máquina del usuario.
Si quieres asegurarte de que eres compatible IE5tendrá que comprobar contra ActiveXObject("Microsoft.XMLHTTP"). No es necesario verificar cada ActiveXObject versión. Si no está interesado en admitir IE5, pero desea admitir IE6, puede volver a consultar MSXML2.XMLHTTP.3.0.
Métodos XMLHTTPRequest
| Método | Descripción |
|---|---|
abort() |
Cancela la solicitud actual |
getAllResponseHeaders() |
Devuelve información de encabezado |
getResponseHeader() |
Devuelve información de encabezado específica |
open(method,url) |
Especifica el método y la URL (GET, POST, HEAD) |
open(method,url,async) |
El async el parámetro especifica si la solicitud es asíncrona o síncrona; true = asíncrono, asíncrono es predeterminado |
open(method,url,async,userName) |
Especifica el nombre de usuario para conectarse |
open(method,url,async,userName,password) |
Especifica la contraseña para conectarse |
send(string) |
Envía la solicitud al servidor. |
setRequestHeader() |
Agrega un par de etiqueta/valor al encabezado que se enviará |
Propiedades de XMLHTTPRequest
| Propiedad | Descripción |
|---|---|
onreadystatechange |
Función a llamar cuando el readyState cambios de propiedad |
readyState |
Mantiene el estatus de XMLHttpRequestvalores de 0 – 4 |
responseText |
Devuelve los datos de respuesta como una cadena. |
responseXML |
Devuelve los datos de respuesta como datos XML |
status |
Devuelve el número de estado. 200-OK, 404-No encontrado |
statusText |
Devuelve el texto de estado: Ok, no encontrado |
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// IE5-IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}Aquí hay otro método para crear el XMLHTTPRequest objeto. Llamaría a la función y verificaría si la variable asignada no es NULL. Si esto es NULLregistrar el error o informar al usuario que el navegador no es apoyen el XMLHTTPRequest objeto.
Usando un try o catch bloque es una buena idea cuando se utiliza ActiveXOjbects porque cualquier falla en la creación de un objeto generará un error.
function getXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest;
} else {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(ex) {
return null;
}
}
}Aquí hay un ejemplo simple que utiliza una combinación de las recomendaciones proporcionadas hasta ahora. En este ejemplo, intentamos crear el nativo XMLHTTPRequest objeto.
Si no tenemos éxito, tratamos de crear el ActiveXObject. Si eso es Sin éxitoatrapamos el error.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest;
} else {
try {
xhr = ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
window.console.log("Ajax not supported.");
}
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "demo_ajax_load.txt", true);
xhr.send(null);
}
}
</script>
</head>
<body>
<img id="img1" src="#" onclick="loadAjax()" />
<div id="div1">Click the icon to load data via Ajax!</div>
</body>
</html>Aquí hay otra forma de escribir el código JavaScript. Este enfoque organiza las distintas partes del código Ajax en funciones distintas.
<script type="text/javascript">
function loadAjax() {
var xhr = getXHR();
if (xhr != null) {
xhr.open("GET", "/demo/ajax_load.txt", true);
xhr.onreadystatechange = handler;
xhr.send();
} else {
window.console.log("Ajax not supported.");
}
function getXHR() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest;
}
else {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ex) {
return null;
}
}
}
function handler() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
}
}
</script>