Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Ooble · Mar 14th, 2006, 1:42 PM

'Lo there all. I've started trying to fiddle with AJAX, and I've run into a bit of a problem.

I'm trying to use asynchronous HTTP requests to load XML pages through the XMLHttpRequest object in JavaScript. The thing is, my pages contain a lot of tags, attributes, etc. and the only code I've found for importing data into a page once it's been retrieved deals with plain text (using the responseText property or through responseXML.getElementByTag("tag").items(n).value). I can't find information on loading everything under the document root into a string, let alone running it through an XSL parser to turn it into HTML.

Here's an example of what the XML looks like:

(Toggle Plain Text)

<?php
include 'xmlheader.php';
?>

<main>
	<section>
		<heading>Home</heading>
		<p>Welcome to my site.</p>
		<p>Click on the links to the left and right to browse around.</p>
	</section>
	
	<section>
		<heading>News</heading>
		<news>
			<date>2005-01-28</date>
			<time>14:42:00</time>
			<author>Ooble</author>
			<headline>Headline</headline>
			<content>
				<p>Blah blah blah.</p>
			</content>
		</news>
	</section>
	
	<sidebar>
		<heading>Random</heading>
		<list type="none">
			<item><link url="/news/newsitem1/">News Item #1</link></item>
			<item><link url="/news/newsitem2/">News Item #2</link></item>
			<item><link url="/news/newsitem3/">News Item #3</link></item>
		</list>
	</sidebar>
</main>

I need to turn that into HTML using my XSL stylesheet, and put everything excluding the root node into a <div> tag. Any ideas?

Agent 47 · Mar 15th, 2006, 11:59 AM

Why do you need JS?

Agent 47 · Mar 15th, 2006, 12:14 PM

XML is over-rated anyway, IMO.

You might consider looking into JSON for passing data from the server
to the client; I find it slightly easier to deal with...

http://www.json.org/
http://www.json.org/js.html

--47.

Ooble · Mar 15th, 2006, 12:35 PM

I'm using XML because I feel like it, to be honest. I've got this far - I even bought a book on XSLT - and I'm not backing down now. I will check out JSON though, but not for this project.

I need JavaScript for asynchronous loading - I don't want to have to load a new page.

Agent 47 · Mar 15th, 2006, 12:45 PM

Ok then, you can get the whole lot into a string with something
simple like:

(Toggle Plain Text)

var str=xmlFile.getElementsByTagName('name')[0].nodeVlaue;

http://www.quirksmode.org/dom/importxml.html

Ooble · Mar 15th, 2006, 1:19 PM

I swear I tried that... gimme a sec.

EDIT: Yup. Returns NULL.

Dameon · Mar 20th, 2006, 5:21 PM

XMLHttpRequest returns an XMLDocument.
You will use XMLHttpRequest to load the XSL and the content.
The XSL is typically loaded when the page loads.
Whenever you happen to load the content, you can use XSLTProcessor.transformToDocumentFragment(). A DocumentFragment is a node, so can be added to your <div> with appendChild.

http://developer.mozilla.org/en/docs...nt_Information
http://www.xulplanet.com/references/...LDocument.html
http://www.xulplanet.com/references/...Processor.html
http://www.soi.city.ac.uk/~sa386/epterm2/sqlxml/week9/The%20XSLT-JavaScript%20Interface%20In%20Gecko.htm

For some unknown reason, neither Firefox nor IE lets you see the result of XSL transforms, so I highly reccomend XMLStarlet for debugging. Result tree, errors, etc. You can even validate against the W3C DTDs.

Dameon · Mar 20th, 2006, 8:13 PM

I put together a sample out of boredom.
Doesn't work in IE for one reason or another, but you get the idea.
Requires a server (local or otherwise) to operate.
Clickity

Ooble · Mar 21st, 2006, 10:04 AM

Cheers - that's exactly what I'm looking for (I think). I'll play with it in a bit.

DaWei · Mar 21st, 2006, 10:26 AM

Quote:

XMLHttpRequest returns an XMLDocument.

It can also return text (XMLObj.responseText). One needs to specify XMLObj.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");

Possibly the problem with IE is that it requires that the object be specified differently. I use something like:

(Toggle Plain Text)

	if (window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest ();
		xmlhttp.onreadystatechange = xmlhttpChange;
	}
	// code for IE
	else if (window.ActiveXObject)
	{
		xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
		xmlhttp.onreadystatechange = xmlhttpChange;
	}

Mar 15th, 2006, 12:35 PM	#4
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	I'm using XML because I feel like it, to be honest. I've got this far - I even bought a book on XSLT - and I'm not backing down now. I will check out JSON though, but not for this project. I need JavaScript for asynchronous loading - I don't want to have to load a new page. __________________ Me :: You :: Them

Mar 15th, 2006, 12:45 PM	#5
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	Ok then, you can get the whole lot into a string with something simple like: (Toggle Plain Text) var str=xmlFile.getElementsByTagName('name')[0].nodeVlaue; var str=xmlFile.getElementsByTagName('name')[0].nodeVlaue; http://www.quirksmode.org/dom/importxml.html __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Mar 15th, 2006, 1:19 PM	#6
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	I swear I tried that... gimme a sec. EDIT: Yup. Returns NULL. __________________ Me :: You :: Them

Mar 20th, 2006, 5:21 PM	#7
Dameon Troll Join Date: Apr 2005 Location: Texas Posts: 732 Rep Power: 4	XMLHttpRequest returns an XMLDocument. You will use XMLHttpRequest to load the XSL and the content. The XSL is typically loaded when the page loads. Whenever you happen to load the content, you can use XSLTProcessor.transformToDocumentFragment(). A DocumentFragment is a node, so can be added to your <div> with appendChild. http://developer.mozilla.org/en/docs...nt_Information http://www.xulplanet.com/references/...LDocument.html http://www.xulplanet.com/references/...Processor.html http://www.soi.city.ac.uk/~sa386/epterm2/sqlxml/week9/The%20XSLT-JavaScript%20Interface%20In%20Gecko.htm For some unknown reason, neither Firefox nor IE lets you see the result of XSL transforms, so I highly reccomend XMLStarlet for debugging. Result tree, errors, etc. You can even validate against the W3C DTDs. __________________ MD5(sig) = bcef75433db02e9ad9bf81d6f7c5c270

Mar 20th, 2006, 8:13 PM	#8
Dameon Troll Join Date: Apr 2005 Location: Texas Posts: 732 Rep Power: 4	I put together a sample out of boredom. Doesn't work in IE for one reason or another, but you get the idea. Requires a server (local or otherwise) to operate. Clickity __________________ MD5(sig) = bcef75433db02e9ad9bf81d6f7c5c270

Mar 14th, 2006, 1:42 PM	#1
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	XML DOM in JS - Extracting everything from an element 'Lo there all. I've started trying to fiddle with AJAX, and I've run into a bit of a problem. I'm trying to use asynchronous HTTP requests to load XML pages through the XMLHttpRequest object in JavaScript. The thing is, my pages contain a lot of tags, attributes, etc. and the only code I've found for importing data into a page once it's been retrieved deals with plain text (using the responseText property or through responseXML.getElementByTag("tag").items(n).value). I can't find information on loading everything under the document root into a string, let alone running it through an XSL parser to turn it into HTML. Here's an example of what the XML looks like: (Toggle Plain Text) <?php include 'xmlheader.php'; ?> <main> <section> <heading>Home</heading> <p>Welcome to my site.</p> <p>Click on the links to the left and right to browse around.</p> </section> <section> <heading>News</heading> <news> <date>2005-01-28</date> <time>14:42:00</time> <author>Ooble</author> <headline>Headline</headline> <content> <p>Blah blah blah.</p> </content> </news> </section> <sidebar> <heading>Random</heading> <list type="none"> <item><link url="/news/newsitem1/">News Item #1</link></item> <item><link url="/news/newsitem2/">News Item #2</link></item> <item><link url="/news/newsitem3/">News Item #3</link></item> </list> </sidebar> </main> <?php include 'xmlheader.php'; ?> <main> <section> <heading>Home</heading> <p>Welcome to my site.</p> <p>Click on the links to the left and right to browse around.</p> </section> <section> <heading>News</heading> <news> <date>2005-01-28</date> <time>14:42:00</time> <author>Ooble</author> <headline>Headline</headline> <content> <p>Blah blah blah.</p> </content> </news> </section> <sidebar> <heading>Random</heading> <list type="none"> <item><link url="/news/newsitem1/">News Item #1</link></item> <item><link url="/news/newsitem2/">News Item #2</link></item> <item><link url="/news/newsitem3/">News Item #3</link></item> </list> </sidebar> </main> I need to turn that into HTML using my XSL stylesheet, and put everything excluding the root node into a <div> tag. Any ideas? __________________ Me :: You :: Them

Mar 15th, 2006, 11:59 AM	#2
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	Why do you need JS? __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Mar 15th, 2006, 12:14 PM	#3
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	XML is over-rated anyway, IMO. You might consider looking into JSON for passing data from the server to the client; I find it slightly easier to deal with... http://www.json.org/ http://www.json.org/js.html --47. __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Mar 21st, 2006, 10:04 AM	#9
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	Cheers - that's exactly what I'm looking for (I think). I'll play with it in a bit. __________________ Me :: You :: Them

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

XML DOM in JS - Extracting everything from an element