¿Estás en busca de una manera rápida y eficiente de obtener datos de un servidor web sin necesidad de recargar la página? Entonces AJAX XMLHttpRequest es la herramienta que necesitas. En este artículo exploraremos cómo utilizar esta tecnología para recibir respuestas de datos XML y cómo aprovechar sus ventajas para mejorar tu desarrollo web. ¡No esperes más y descubre todo lo que AJAX XMLHttpRequest tiene para ofrecerte!
El XMLHttpRequest objeto tiene un responseXML propiedad que se puede utilizar para recibir datos XML desde un servidor web. En el tutorial anterior, investigamos cómo usar el responseText propiedad para recibir datos de texto del servidor web.
El responseText La propiedad no se puede utilizar para analizar datos XML. Vamos a ver cómo podemos usar el responseXML propiedad con más detalle.
Ejemplo HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadAjax() {
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
xmlDoc=xhr.responseXML;
xmlData="";
x=xmlDoc.getElementsByTagName("name");
for (i=0;i<x.length;i++) {
xmlData=xmlData + x[i].childNodes[0].nodeValue + ", ";
}
document.getElementById("div1").innerHTML = xmlData;
}
xhr.open("GET", "/demo/ajax_load.txt", true);
xhr.send(null);
}
}
}
</script>
</head>
<body>
<img id="img1" onclick="loadAjax()" src="https://www.itgeared.com/ajax-xml-responsexml-data-tutorial/go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Sintaxis
xhr.responseXML;propiedad de respuestaXML
Si la respuesta del servidor web es XML, deberá analizarlo como un objeto XML. Utilizar el responseXML propiedad.
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
xmlDoc=xhr.responseXML;
xmlData="";
x=xmlDoc.getElementsByTagName("name");
for (i=0;i<x.length;i++) {
xmlData=xmlData + x[i].childNodes[0].nodeValue + ", ";
}
document.getElementById("div1").innerHTML = xmlData;
}
}
}Contenido del archivo XML
<?xml version="1.0" encoding="utf-8" ?>
<company>
<employee>
<name>John Smith</name>
<tile>Clerk</tile>
<age>25</age>
</employee>
<employee>
<name>Jane Watson</name>
<tile>Manager</tile>
<age>35</age>
</employee>
<employee>
<name>Sally Franco</name>
<tile>Accountant</tile>
<age>40</age>
</employee>
</company>