DOM alternative to document.write(xmlhttp.responseText)

**molendijk** · 08-20-2008, 08:52 PM

1) Script Title: DOM alternative to document.write(xmlhttp.responseText)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axincludes.htm

3) Describe problem: The Ajax Includes Script uses document.write(xmlhttp.responseText) (or something similar). What's the most elegant way of converting that to modern DOM-coding?
Thanks in advance,
Arie Molendijk.

**rangana** · 08-21-2008, 12:49 AM

You can try document.getElementById or nodeValue

Code:

<script type="text/javascript">
window.onload=function()
{
document.getElementById('elID').innerHTML='This is created by innerHTML.';
document.getElementById('nodeVal').firstChild.nodeValue='This is created by nodeValue.';
}
</script>
<div id="elID"></div>
<div id="nodeVal">&nbsp;</div>
<script type="text/javascript">
document.write('This is created by document.write()');
</script>

**molendijk** · 08-21-2008, 07:53 AM

Rangana, thanks, but I don't want to use innerHTML and document.write.
If I do <body id=id='nodeVal'>, then
document.getElementById('nodeVal').firstChild.nodeValue=xmlhttp.responseText just gives me the string. In order to get the 'real thing', I have to do document.write(document.getElementById('nodeVal').firstChild.nodeValue);
but I didn't want to use innerHTML from the start.
So I'm looking now for a method to replace document.write(document.getElementById('nodeVal').firstChild.nodeValue); with something that doesn't use inner and write.
===
Arie.

**codeexploiter** · 08-21-2008, 10:02 AM

The existing AJAX script, which you are talking about is designed in such a manner that the AJAX call will be made before completely loading the page in which you've integrated this script.

If you are looking for a fully DOM based method for handling the response from the server. Then I think it would be better if you use either XML or JSON as the response type from the server to the client. After getting the response use JS DOM routine to construct the document part in your page. Also you have to change some changes in the original AJAX script you are using:

Code:

var page_request = false;
function ajaxinclude(url) {
	if (window.XMLHttpRequest) // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	else if (window.ActiveXObject) { // if IE
		try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} catch(e) {
			try {
				page_request = new ActiveXObject("Microsoft.XMLHTTP")
			} catch(e) {}
		}
	} else 
		return false 
		
	page_request.open('GET', url, false) //get page synchronously 
	page_request.send(null) 
	//writecontent(page_request)
}

function writecontent(page_request) {
	/*if (window.location.href.indexOf("http") == -1 || page_request.status == 200) 
		document.write(page_request.responseText);*/
}

I've highlighted the changes I've made.

Then in your window's load event you can call the JS routine that construct the DOM Tree based on the server response

Code:

	window.onload = function(){
		your_DOM_Constructor_Method(); //You don't have to pass the XHR object as it is a global one and will be accessible inside your method.
	}

Here is some good articles about the technique using which you can construct the fully DOM based structure, this articles explains the technique in a step by step manner and can be followed very easily. You can find other good articles about this one.

http://www.quirksmode.org/blog/archi...ax_respon.html
http://www.quirksmode.org/blog/archi..._respon_1.html

Hope this helps.

**molendijk** · 08-21-2008, 11:27 AM

Codeexploiter, thanks. I'll give that a try.
Arie.

Thread: DOM alternative to document.write(xmlhttp.responseText)

Thread Tools

Search Thread

DOM alternative to document.write(xmlhttp.responseText)

Bookmarks

Bookmarks

Posting Permissions