AJAX Question

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,283 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 5,242 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1942 | Replies: 6

•

Join Date: Dec 2007

Location: Malaysia

Posts: 5

Reputation: Lee-Pro is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Lee-Pro

Offline

Newbie Poster

AJAX Question

Jan 22nd, 2008

Hey everyone, this is a very tough problem I am facing right now in JavaScript.

I'm designing this script to load a page like an IFrame but is using AJAX, the only problem is that I need to edit certain attributes before displaying them through changing an element's innerHTML attribute.

Using the normal xmlHttp request, it retrieves a html document. But is there any way I could actually handle it through some kind of DOM before actually displaying it?

Modifying them after I display them is troublesome as the browser would convert relative links into absolute paths.

Using XML to load the document was fine, but then there was no way to generate the HTML code without lots of hassle.

Is there any other way?

PS: An older version of script is in my site, but it uses substr which is very messy.

Cheers,
Lee-Pro

•

Join Date: Sep 2005

Posts: 689

Reputation: digital-ether has a spectacular aura about

Rep Power: 6

Solved Threads: 41

digital-ether digital-ether is offline

Offline

Practically a Master Poster

Re: AJAX Question

Jan 22nd, 2008

•

Originally Posted by Lee-Pro

Hey everyone, this is a very tough problem I am facing right now in JavaScript.

I'm designing this script to load a page like an IFrame but is using AJAX, the only problem is that I need to edit certain attributes before displaying them through changing an element's innerHTML attribute.

Using the normal xmlHttp request, it retrieves a html document. But is there any way I could actually handle it through some kind of DOM before actually displaying it?

Modifying them after I display them is troublesome as the browser would convert relative links into absolute paths.

Using XML to load the document was fine, but then there was no way to generate the HTML code without lots of hassle.

Is there any other way?

PS: An older version of script is in my site, but it uses substr which is very messy.

You could load the HTML with an XML content-type so that you can access the response as XML (XMLHttpRequest.responseXML).
Traverse each node in the XML Doc and create equivalent DOM nodes in your HTML Document.

Example:

Help with Code Tags

(Toggle Plain Text)

/**
* Clones XML nodes to the current Document's DOM
*/
function cloneXMLtoDOM(Node) {
	var DOMNode;
	if (Node.nodeName == '#text') {
		// clone text nodes
		DOMNode = document.createTextNode(Node.data);
	} else {
		// clone root node
		DOMNode = document.createElement(Node.nodeName);
		// clone the attributes
		for(var i = 0; i < Node.attributes.length; i++) {
			DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
		}
		// recursively clone the child nodes
		if (Node.hasChildNodes()) {	
			for(var i = 0; i < Node.childNodes.length; i++) {
				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
			}
		}
	}
	return DOMNode;
}

You could also use XPATH which would be faster.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Jun 2006

Location: India

Posts: 6,851

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 344

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: AJAX Question

Jan 23rd, 2008

> Using the normal xmlHttp request, it retrieves a html document. But is there any way I could
> actually handle it through some kind of DOM before actually displaying it?
Make sure that the page you fetch using XHR is well formed. If that is the case, you can manipulate the contents of the response just as you would to a normal HTML document.

Help with Code Tags

(Toggle Plain Text)

var doc = xmlHttpRequest.responseXML;
doc.getElementsByTagName("someTag")[0].someAttribute = someValue;

> DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
IE doesn't like set/getAttribute. Use obj.attribute = value; for maximum browser compatibility.

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Dec 2007

Location: Malaysia

Posts: 5

Reputation: Lee-Pro is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Lee-Pro

Offline

Newbie Poster

Re: AJAX Question

Jan 24th, 2008

Hey, thanks for the XMLtoDom converter, but when I tried using it I got this:

Help with Code Tags

(Toggle Plain Text)

Error: [Exception... "String contains an invalid character"  code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)"  location: "file:///home/leezh/test.html Line: 57"]
Source File: file:///home/leezh/test.html
Line: 57

The source is here:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
 
<script type="text/javascript">
var xmlHttp;
try
{
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
}
catch (e)
{
  // Internet Explorer
  try
  {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
    try
    {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
      alert("Your browser does not support AJAX!");
    }
  }
}
 
xmlHttp.onreadystatechange=function()
{
  if(xmlHttp.readyState==4)
  {
    var doc = xmlHttp.responseXML;
    // Some XML DOM stuff
    document.getElementsByTagName("body").appendChild(cloneXMLtoDOM(doc));
  }
}
xmlHttp.open("GET","books.xml",true);
xmlHttp.send(null);
 
/**
* Clones XML nodes to the current Document's DOM
*/
function cloneXMLtoDOM(Node) {
	var DOMNode;
	if (Node.nodeName == '#text') {
		// clone text nodes
		DOMNode = document.createTextNode(Node.data);
	} else {
		// clone root node
		DOMNode = document.createElement(Node.nodeName);
		// clone the attributes
		for(var i = 0; i < Node.attributes.length; i++) {
			DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
		}
		// recursively clone the child nodes
		if (Node.hasChildNodes()) {	
			for(var i = 0; i < Node.childNodes.length; i++) {
				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
			}
		}
	}
	return DOMNode;
}
</script>
 
</body>
</html>
 
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>

<script type="text/javascript">
var xmlHttp;
try
{
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
}
catch (e)
{
  // Internet Explorer
  try
  {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
    try
    {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e)
    {
      alert("Your browser does not support AJAX!");
    }
  }
}

xmlHttp.onreadystatechange=function()
{
  if(xmlHttp.readyState==4)
  {
    var doc = xmlHttp.responseXML;
    // Some XML DOM stuff
    document.getElementsByTagName("body").appendChild(cloneXMLtoDOM(doc));
  }
}
xmlHttp.open("GET","books.xml",true);
xmlHttp.send(null);

/**
* Clones XML nodes to the current Document's DOM
*/
function cloneXMLtoDOM(Node) {
	var DOMNode;
	if (Node.nodeName == '#text') {
		// clone text nodes
		DOMNode = document.createTextNode(Node.data);
	} else {
		// clone root node
		DOMNode = document.createElement(Node.nodeName);
		// clone the attributes
		for(var i = 0; i < Node.attributes.length; i++) {
			DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
		}
		// recursively clone the child nodes
		if (Node.hasChildNodes()) {	
			for(var i = 0; i < Node.childNodes.length; i++) {
				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
			}
		}
	}
	return DOMNode;
}
</script>

</body>
</html>

Is anything wrong?

Cheers,
Lee-Pro

•

Join Date: Sep 2005

Posts: 689

Reputation: digital-ether has a spectacular aura about

Rep Power: 6

Solved Threads: 41

digital-ether digital-ether is offline

Offline

Practically a Master Poster

Re: AJAX Question

Jan 24th, 2008

Could you post the XML response from the server.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Sep 2005

Posts: 689

Reputation: digital-ether has a spectacular aura about

Rep Power: 6

Solved Threads: 41

digital-ether digital-ether is offline

Offline

Practically a Master Poster

Re: AJAX Question

Jan 24th, 2008

There was a problem in the function cloneXMLtoDOM's cloning of attributes. Here's it again, fixed:

Help with Code Tags

(Toggle Plain Text)

/**
* Clones XML nodes to the current Document's DOM
*/
function cloneXMLtoDOM(Node) {
	var DOMNode;
	
	if (!Node) return false;
	
	if (Node.nodeName == '#text') {
		// clone text nodes
		DOMNode = document.createTextNode(Node.nodeValue);
	} else {
		// clone root node
		DOMNode = document.createElement(Node.nodeName);
		// clone the attributes
		for(var i = 0; i < Node.attributes.length; i++) {
			DOMNode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i].nodeValue);
		}
		// recursively clone the child nodes
		if (Node.hasChildNodes()) {	
			for(var i = 0; i < Node.childNodes.length; i++) {
				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
			}
		}
	}
	return DOMNode;
}

If it doesn't work for you, just use the DOM methods on the responseXML to make modifications and append it to the document using innerHTML like s.o.s mentioned

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Dec 2007

Location: Malaysia

Posts: 5

Reputation: Lee-Pro is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Lee-Pro

Offline

Newbie Poster

Re: AJAX Question

Jan 28th, 2008

Hey, guys, I found this solution to the problem while searching about:

http://www.captain.at/howto-javascri...-to-string.php

The problem was so simple with just one line of code needed:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
var string = (new XMLSerializer()).serializeToString(xmlobject);
var string = (new XMLSerializer()).serializeToString(xmlobject);