Document Loading with AJAX

For security reasons (the browser's same-origin policy), the HTML file and the XML file it loads by AJAX must be located on the same server.

Some browsers allow reading the content of an XML node through innerHTML, even though the source document is XML rather than HTML. Where this is not supported, fall back to walking childNodes[i].nodeValue, or serialize the node with XMLSerializer.

ch07-ajax-a.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<a>
   <b>Hello <c/> <d>World</d></b>
   <b>!</b>
</a>

<?xml version="1.0" encoding="UTF-8" ?>
<a>
   <b>Hello <c/> <d>World</d></b>
   <b>!</b>
</a>

ch07-ajax-loader.html:

<!DOCTYPE html>
<html>
<head>
   <script>
      function loadXMLDoc(file){
         xhr=new XMLHttpRequest();
         xhr.open("GET",file,false);
         xhr.send();
         return xhr.responseXML;
      }
      XML = loadXMLDoc("ch07-ajax-a.xml");
      b = XML.getElementsByTagName("b")[0];
      document.write(b.innerHTML+"<br/>");
      bc = b.childNodes;
      for (i=0; i<bc.length; i++){
         if (bc.item(i).nodeType==1)
            document.write(bc.item(i).nodeName);
      }
      b.setAttribute("id","10");
      document.write("<br/>"+b.getAttributeNode("id").textContent);
   </script>
</head>
<body></body>
</html>

<!DOCTYPE html>
<html>
<head>
   <script>
      function loadXMLDoc(file){
         xhr=new XMLHttpRequest();
         xhr.open("GET",file,false);
         xhr.send();
         return xhr.responseXML;
      }
      XML = loadXMLDoc("ch07-ajax-a.xml");
      b = XML.getElementsByTagName("b")[0];
      document.write(b.innerHTML+"<br/>");
      bc = b.childNodes;
      for (i=0; i<bc.length; i++){
         if (bc.item(i).nodeType==1)
            document.write(bc.item(i).nodeName);
      }
      b.setAttribute("id","10");
      document.write("<br/>"+b.getAttributeNode("id").textContent);
   </script>
</head>
<body></body>
</html>

Hello World
cd
10

MENU

Document Loading with AJAX