Why not responseHTML?

There is no responseHTML attribute belong responseText and responseXML in XMLHttpRequest, but this is not a problem. If we want to get data from another HTML page and insert it into the displayed page, this can be achieved easily.
The responseXML attribute holds an XML document DOM can access, and to provide the equivalent for HTML we need just for a <div> tag and a JavaScript function that extends Ajax or the framework we are using.

The principle...

  1. A variable or a <div> tag to store the other web page.
    In the second case, the content is not be displayed, as we make use of the display attribute of CSS with the none value.
    Once the other page assigned to the variable or inserted into the tag , its content is accessible with DOM's methods.
    Actually, only the content of the <body> tag is taken from the page, as <html> and <head> tags do not have to appear inside the body of the page.
  2. A JavaScript function.
    It makes use of Ajax to read the other web page as a plain-text, into the responseText attribute and it extracts the content of the <body> tag.
    With three indexOf calls and one slice call, the content is extracted. Regular expression could be used alternatively.

Creating the responseHTML element

This may be a variable of type Element.

var responseHTML = document.createElement("body");
This works with Firefox, not with Opera.

Creating a permanent <div> storage tag

To store the other document inside the page, the following tag has to be included anywhere into the page:

<div id="storage" style="display:none;"> </div>

The content is empty. It will be filled when the other HTML page is loaded.

JavaScript functions

A function extracts the useful part of the content of the other page and stores it into the tag above.

function getBody(content) 
{ 
   var x = content.indexOf("<body");
   x = content.indexOf(">", x);    
   var y = content.lastIndexOf("</body>"); 
   return content.slice(x + 1, y);
}

Another function fills the container, either a variable or a tag, and is used as callback by Ajax.

function getContent(content, target)
{
   target.innerHTML =  getBody(content);
}

Displaying the other page

Once the content of the other page stored into the invisible <div> tag, it may be processed and extracted with DOM methods and used into the current page. In this first example it is just copied into the page.

The following tag is used to display the other page:

<div id="displayed"> </div>

To put the data into the page and make it visible to readers, the content is stored into this <div> tag, with the "displayed" id (or the id of your choice), with the following statement:

document.getElementById("displayed").innerHTML = responseHTML.innerHTML;

Demonstration

A very simple demo will display below the content of another HTML page anotherpage.html.

Using DOM's method

The process is the same with a more step. Rather than using the innerHTML attribute, we will use either document.getElementById object, or the document.name[.list-of-names] path.
The code of the callback:

var x = responseHTML.getElementsByTagName("div").namedItem("two");
target.innerHTML = x.innerHTML;
var y = responseHTML.getElementsByTagName("form").namedItem("ajax");
target.innerHTML += y.dyn.value;

The code of the main function:

var responseHTML = document.getElementById("storage"); 
var target = document.getElementById("displayed"); 
loadHTML(url, callback, responseHTML, target);

The script

Forum

© 2006-2022 Xul.fr