How to extract HMTL content through the use of XMLHttpRequest object?

DangerDev 107 Posting Pro in Training · 2009-08-01T12:51:12+00:00

I'll suggest you to send only the part of page B, which you want to display in page A.
Or please let us know why it is necessary for you to send entire content of page B during ajax request.

essential 84 Posting Shark Featured Poster · 2009-08-01T13:45:43+00:00

Hi,

Here's a chained document sample that you may use and expand along with your web activities.

Here's the code for the startpage:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>http://www.daniweb.com/</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */

/* ]]> */
</style> 
<script type="text/javascript">
/* <![CDATA[ */

/*
*******************************
  #1 AJAX Live EXAMPLE
*******************************
 * Unobtrusive AJAX Demo -

 * This notice must remain 
   intact for use.

 * Get more live JavaScript
   solutions :

 @ http://www.daniweb.com
*******************************
*/


var AjaxRequest = ( function() {
var activeX = 0;
var xmlHttp = 0;
   try {
      (( xmlHttp = new XMLHttpRequest() ) ? activeX = 0 : activeX = 1 );
      if ( activeX ) {
         try {
         var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
            for ( x = 0; !!( client[ x ] ); x++ ) {
               if ( xmlHttp = new ActiveXObject( client[ x ] )) {
               break;
               }
            } delete x;
         } catch( e0 ) {
            xmlHttp = 0;
         }
      } 
   } catch( e ) {
      (( xmlHttp = window.createRequest() ) ? xmlHttp : xmlHttp = 0 );
   } return xmlHttp;
} );

var AjaxBuilder = ( function( url ) {
xml = AjaxRequest();
   if ( xml ) {
      (( "overrideMimeType" in xml ) ? xml.overrideMimeType("text/xml") : xml );
      xml.onreadystatechange = ( function() {
      if ( this.status === ( { 4 : 0 // Set this to 200 when working online...

/* Server Status: When 
   Working offline, this should 
   be set to zero-value
   instead of the normal 200
   OK status */ }[{ 4 : 4, complete : 4 }[  this.readyState ]] )) {
      var div;
         (( div = document.getElementById("main")) ? div : div = document.all.main );
      var clonedDiv;
      var xDiv;
      (( xDiv = this.responseXML.getElementsByTagName( div.nodeName )) ? xDiv : xDiv = this.responseXML.documentElement.all.tags( div.tagName ));

         for ( x = 0; x < xDiv.length; x++ ) {
            if ( xDiv[ x ].getAttribute( "id" ) === div.id ) {
            clonedDiv = document.importNode( xDiv[ x ], true );
            break;
            }
         } delete x; 
      div.appendChild( clonedDiv );
      }   
      } );
      xml.open( "GET", url, true );
      xml.send( null );
   return;
   } alert( "Your browser does not handle AJAX Request.", "unsupported feature" );
} )( "xhtml10-doc.html" );
/* ]]> */
</script>
</head>
<body>
<div id="main">

</div>
</body>
</html>

and here's is the request file xhtml10-doc.html:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="./images/main.css" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com/</title>
</head>
<body>
<div id="main"><p>This is the requested content from page <b>B</b> that has the same identifier : namely (<em style="color : #00AA00">main</em>).</p></div> <!-- main -->

<!-- DUMMY TAG -->
<div id="main2"><p>This is the requested content from page B that has the same identifier : namely (<em style="color : #00AA00">main</em>).</p></div> <!-- main2 -->

</body>
</html>

-essential