Take Command with AJAX

**ArticleBot** · Oct 14, 2005, 02:22

This is an article discussion thread for discussing the SitePoint article, "Take Command with AJAX"

**Dean C** · Oct 14, 2005, 02:22

It probably would have been better to use an event listener instead of using inline JS in your source:

http://phrogz.net/JS/AttachEvent_js.txt

**cyberlot** · Oct 14, 2005, 05:49

Bad example to use, any small mistake in code could open up a server for exploit!

**bigduke** · Oct 15, 2005, 00:13

Nice demonstration, did I hear someone call out for thin clients? Such apps would do extremely well on intranets in my opinion.

Joshua · Oct 16, 2005, 19:22

Great article! Really shows the power of AJAX

Victor · Oct 17, 2005, 09:58

Thank you for the great tutorial ans source code

Darrel · Oct 21, 2005, 06:07

There's a problem with the links in the print version of this article. The links seem to have http://www.sitepoint.com/" tacked onto the beginning of the URL and /" tacked onto the end.
For example, http://www.sitepoint.com/"http://www.w3clubs.com/sp/ajax/httprequest_example.html/"

Ken · Oct 26, 2005, 04:55

The only thing I don't like is the extent to which javascript is used. Again we are falling back to limited browser support and cross browser compatibility. It seems like a nice new thing but it just doesn't appeal to me.

**xin** · Oct 26, 2005, 14:48

Heres an odd problem I've been having.

Code:

/******** ajax.js *******/
// global flag
var isIE = false;

var XMLFiles = new Array();

function loadDoc(page, xmlAlias)
{
	if (true)
	{
		try {
			XMLFiles[xmlAlias] = new XMLHttpRequest();
		} catch (err) {
			try {
				XMLFiles[xmlAlias] = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (err) {
				alert("Uh, Broken?\n" + (typeof err == "string") ? err : ((err.message) ? err.message : "Unknown Error") )
			}
		}

		XMLFiles[xmlAlias].onreadystatechange = RdyStateChange(xmlAlias);
	}
	
	XMLFiles[xmlAlias].open("GET", page);
	XMLFiles[xmlAlias].send(null);
//	alert('USELESS THING');
	blankFunc();
	return true;
			
}

function blankFunc()
{
	var waste, i;
	for( i = 0; i < 10; i++)
	{
		waste += i;
	}
	return waste;
}

function RdyStateChange(xmlAlias)
{
	alert(xmlAlias);
}

function loadCatXML(page)
{
	loadDoc(page, 'Category');
	alert(XMLFiles['Category'].statusText);

	document.getElementById('CategorySelector').innerHTML = 'ABC';
	
}

Code:

<!------ HTML ------->
		
	
<!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">
	<head>
		<title>Keri Blue - Products</title>
		<link href="styles/style.css" rel="stylesheet" type="text/css" />
		<link href='styles/products.css' rel='stylesheet' type='text/css' />

		<script type='text/javascript' src='javascript/scroller.js'></script>
<script type='text/javascript' src='javascript/ajax.js'></script>

	</head>
	<body >
		<a href='#' onclick='loadCatXML("extras/test.xml");'>CLICK</a>
	</body>
</html>

Now, this will end up erroring in firefox with a `NS_ERROR_NOT_AVAILABLE`, Until you uncomment the `// alert('USELESS THING');` line in ajax.js.
W-haaaat?

**ringobob** · Oct 27, 2005, 10:09

Ken, I came to the conclusion that support for 99%+ of my users was enough for me (judging from the list of supported browsers here: http://en.wikipedia.org/wiki/Ajax_%28programming%29 ). And that's gathered from the stats of a site that caters to a fairly low-tech group of people (sports coaches, many using school machines).

For me, the benefits outweigh the risks, which are only decreasing as time goes on, browsers progress, and computers are upgraded. It seems that AJAX is here to stay as the de facto remote scripting standard.

**Pepejeria** · Oct 27, 2005, 10:24

Ok, I haven't really read the article, but I noticed the following:

Code:

if (return_xml) {
    eval(callback_function + '(http_request.responseXML)');
} else {
    eval(callback_function + '(http_request.responseText)');
}

Why use eval? Eval is evil. The following works fine as well:

Code:

if(return_xml)
{
	callback_function(http_request.responseXML);
}
else
{
	callback_function(http_request.responseText);
}

That if the callback_function argument is a function and not a string:

Code:

makeHttpRequest('test.html', function(oRequest)
{
	alert(oRequest);
});

**Skunk** · Nov 8, 2005, 17:05

I found it interesting how your code got more, rather than less, complicated as the article progressed. Less code is always better! There's absolutely no reason to use complex DOM manipulation code when innerHTML can achieve exactly the same result. Likewise, why send XML with repsponseXML when plain responseText is good enough?

If you want an academic excuse for using innerHTML when it isn't part of a W3C standard (even though every browser under the sun supports it), here's the one I use: A web browser's principle activity is taking strings of HTML and turning them in to DOM trees. It's utterly ludicrous for that basic ability not to be exposed to developers. innerHTML exposes it.

**Skunk** · Nov 9, 2005, 05:13

I've just figured out what it is that made me so uncomfortable about this idea: it's a CSRF (Cross Site Request Forgery) attack waiting to happen.

Let's say you do set up the script without the in_array check behind an authentication system (cookies, sessions or HTTP auth). I can still delete everything on your site. All I have to do is guess the location of your exec.php script and create a page on my own site (or a public forum or what have you) containing the following HTML:

<img src="http://yoursite.com/exec.php?command=rm -rf /">

If I can trick you in to visiting that page while your browser is logged in to your command application I can delete every writable file on your server!

Defending against this attack is surprisingly tricky - just using POST instead of GET (which you should be doing anyway for an application that causes changes to the state of the data on your server) isn't enough. You need some kind of token based scheme that confirms that the GET or POST request to your PHP script originated with your Ajax code. A referral check will just about do the job, but a token scheme is far more robust.

Here's a good overview of CSRF and potential solutions: http://www.squarefree.com/securityti...pers.html#CSRF

**Tryst** · Nov 15, 2005, 11:12

I seem to be getting the following error message when I attempting to run the XML version of this script. (Yes, the exec_xml.php script does return the correct XML file data and in the correct format).

Error: xmldoc.getElementsByTagName("command").item[0] has no properties

What could this message mean?

**warjockey** · Nov 18, 2005, 17:46

Ok I spent a good hour on this problem and I think the solution I found also applies to Tryst's problem.

I wanted to send back data to my browser using the xml method and the documentElement would be null everytime, but when I tried to alert the response in text mode then I could see the xml no problem and I also validated it and it was valid.

So after alot of looking around I came to the conclusiont that if you xml is indented in any way then it won't get DOMed properly at all.

So I eliminated all the \n and all the tabs I had and just made it a 1 line string. This worked and I could then target my elements again with no problems.

I was looking if there's a function to ignore spaces...I guess there isn't?

Oh what I wanted to say....Yes I'm a newbie because this is the first time I'm using AJAX but not 1 article mentioned that this would be a problem and all articles format their xml documents with spaces and indents. So maybe I'm missing something? Also I was using HEREDOC to echo the xml, maybe it doesn't like that?

**dek** · Nov 19, 2005, 02:32

Originally Posted by Skunk

I found it interesting how your code got more, rather than less, complicated as the article progressed. Less code is always better! There's absolutely no reason to use complex DOM manipulation code when innerHTML can achieve exactly the same result. Likewise, why send XML with repsponseXML when plain responseText is good enough?

If you want an academic excuse for using innerHTML when it isn't part of a W3C standard (even though every browser under the sun supports it), here's the one I use: A web browser's principle activity is taking strings of HTML and turning them in to DOM trees. It's utterly ludicrous for that basic ability not to be exposed to developers. innerHTML exposes it.

I agree that innerHTML is a great thing to have around, and I do make use of it fairly often - usually to put simple strings into elements though, and not for structure building.

With a little judicious coding it is possible to construct full DOM element hierarchies without using innerHTML, and with very compact and neat code. I find it much tidier than using innerHTML, and not a great deal more verbose. It's just a matter of how you tackle the problem.

me · Dec 1, 2005, 21:59

Man, you are the one.

**zootle** · Dec 9, 2005, 16:34

So I eliminated all the \n and all the tabs I had and just made it a 1 line string. This worked and I could then target my elements again with no problems.

A PITA when using saveXML from a PHP page!

**Gator99** · Jan 12, 2006, 16:09

Although an interface to run shell commands on your server is pure insanity, it clearly does illustrate the principles and underlying code.

**Hal9k** · Apr 23, 2006, 10:44

alert('Unfortunatelly...

Unfortunately.

Austin38 · May 15, 2006, 09:08

This is an incredibly well-written tutorial that is simple to comprehend yet shows the power of Ajax. Outstanding work!

**Sojan80** · May 16, 2006, 11:37

Great Article! I would love to see a more detailed XML example where an XML file with a similar structure to:
<?xml version="1.0" ?>
<root>
<item>
<title>A title</title>
<text>A paragraph or more of text here...</text>
</item>
<item>
<title>A title</title>
<text>A paragraph or more of text here...</text>
</item>
</root>

where you could have from 1 to n items and how best to navigate through the nested XML elements.

Also, I'm not quite sure what the purpose or function of the item(0) in the

Code:

var new_command = xmldoc.getElementsByTagName('command').item(0).firstChild.nodeValue;

line was or what item(i) piece a few lines later was doing within the context of the code.

The only other question I have is how would you handle including a hyperlink that came in in one of the text elements?

**Sojan80** · May 17, 2006, 10:44

I am having a problem getting my AJAX to work in Safari using some of what is covered in the article. I've posted a problem description here http://www.sitepoint.com/forums/show...06#post2746506

arado · Oct 2, 2006, 21:11

amazing tutorial, made Ajax sound simple, very practical example using non IFrames, instead used a DIV tag.

**fredda** · Jul 16, 2008, 03:24

Links are not working.

The SitePoint Forums have moved.

User Tag List

Thread: Take Command with AJAX

Thread Tools

Display

Article Discussion

This appears to be an IE specific issue

Bookmarks

Bookmarks

Posting Permissions