Member Avatar for beanryu

Hi professionals, I have a problem and it is the following:

Say I have 2 HTML pages. In page A, I want to display part of page B.(content between a div tag pair with ID in B) Now I was able to use the XMLHttpRequest object to get the complete page B, namely, through the reponseText property of the XMLHttpRequest object. But my goal is only part of page B, not the entire page. I tried to use XML DOM tree node methods to extract the wanted part from page B, but it does not work. I think the problem is that page B is a HTML page, not a XML page. Is there a work around on this?

Thank you so much!

The title is messed up... someone please fix it for me if possible.

  • 3 Contributors
  • 2 Replies
  • 125 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for DangerDev

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.

Member Avatar for essential

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.