WebConsole – Take command (line) with AJAX
My article describing how to create a simple Javascript XMLHTTP application is now featured on SitePoint. How cool is that!
A bit of history: several months ago I thought SitePoint, my daily read, was missing an intro article on AJAX, so I sat down and wrote one. Meanwhile, while I was preparing it, SitePoint published this excellent AJAX tutorial by Cameron Adams. (Do check this guy's site! He definitely knows his JS!) His article was overlapping mine in the intro part. So I thought it doesn't make sense to have two intro articles and revised mine, basically stripping the intro part and leaving just the second part - the creation of a simple WebConsole application - a web interface for executing shell commands (Try it out here). This second part of the article was published today on SitePoint and I'm quite proud of that fact 
Then some time later I saw that DevMo - Mozilla Developers Wiki - started an AJAX section and there was an invitation on it for somebody to write the "Getting Started" article, that was missing at the time. And since I had my intro tutorial lying around, I just published it right there on the Wiki.
So if you're new to the XMLHTTP (AJAX) concept and looking for a place to start:
- Start with the DevMo article, then
- Read through the SitePoint articles - Cameron's and mine, then
- Check the links at the end of the SitePoint article, then/or
- ...just experiment on your own!
BTW, as another real-life example of the reusable JS function for making requests, which is discussed in the SitePoint's article, check this out. It's a little AJAX touch for phpBB, scroll down where it says "Word of the day" and "Mot du jour", click. How is it working? Well, I have a simple PHP script that hits two RSS feeds - Dictionary.com and a French blogger's. My script caches the XML file just not to abuse the RSS feeds with too many requests (not that this site has a lot of requests, but still). So the PHP script basically copies the feeds as two XML files on my server - wotd.xml (as in Word of The Day) and mdj.xml (Mot du Jour).
Steps in JavaScript! When you load the forum's index page nothing special happens. When you click though, an HTTP request is performed, the requested XML file is retrieved, parsed, and the contents we want - displayed. Pretty easy thing to do, using the same JS function for making requests, described in the article.
This entry was posted on Friday, October 14th, 2005 and is filed under Ajax, JavaScript, News/personal. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
October 15th, 2005 at 1:11 pm
That’s a WAY cool article. respect!
It brings me to a question I’d like to ask you. Your article contains a LOT of Javascript. While I can write DOM Javascript very well I consider javascripting a tedious and often annoying job because it really sucks in the debugging department.
Most frameworks are very heavy on the javascript and very light on the PHP side. Prototype.js is cool and so are some other frameworks based on it. However there’s xajax too. This is COMPLETELY PHP centric and not Javascript centric. It’s still sort of young and it has it’s limitations but I like the xajax approach much more than the write-miles-of-javascript-approach that many of the other frameworks have.
The only drawback is there seems to be little movement in xajax (looks almost dead). If it stays dead I’ll probably pick it up myself or try to do a similar thing based on Prototype.js.
What do you think Stoyan?
October 16th, 2005 at 2:07 pm
Hey Marco, thanks!
Well, I’m not quite sure what your question was. If you’re asking about the different AJAX libraries, I haven’t really fiddled with any of them, so I have no first-hand experience, seems like you know much more than I do. I was curious about the way the XMLHTTP request works (who wasn’t? after Gmail
), so I looked at the very basics.
Speaking of AJAX libs, have you looked at the PEAR package – HTML_Ajax? I’d be interested to hear your opinion.
October 16th, 2005 at 2:49 pm
I haven’t seen the PEAR package yet to be honest. Will check it out!
However I did check out some other things and actually fiddled with it. I tried Prototype.js which is pure javascript but very powerful and easy to use with PHP. The live search and instant comment-previews on my blog were done with it. (they do need some tweaking though). I did the hardened-trackback thingy on my blog with the raw XmlHttpRequest object. It’s all not that hard really but like I said, writing Javascript is a debugging hell and therefore too time consuming in my opinion.
If you haven’t seen it you should really try xajax. It’s the best available library for PHPers in my opinion. This weekend I prepared a presentation on Ajax and PHP which I’ll deliver at a PHP conference November 10. I created all examples using xajax because of it’s PHP-mindedness and it’s extreme ease of use. It’s completely OO too!
After November 10 I’ll translate the whole presentation into English and make a lenghty post on my blog showcasing the four demo’s I created. If you’re interested in seeing what I did somewhat earlier feel free to leave me a mail. I just don’t want to post it before the keynote that’s all
October 17th, 2005 at 8:35 am
I am very eagar to learn to this new technology it vety interest one
it veryt fast and dynamic
October 17th, 2005 at 10:57 pm
Woww, Marco, you’ll have an AJAX/PHP talk, nice! Good luck with the presentation and I’ll wait for after the talk when you find the time to translate it in English.
(And yeah, with the risk of repeating myself, your blog is a piece of art!)
Sathish, it’s true it’s a very dynamic area, good luck in your learning and experimenting and have fun
October 18th, 2005 at 9:30 am
Well thanks Stoyan, I’m flattered once again. You’re one of the few I guess. I get so little visitors that I sometimes wonder why I’m doing it at all!
I’ll let you know when my examples are online!
October 18th, 2005 at 9:57 pm
If you allow me to quote Timon from my daughter’s favourite Lion King:
I’m sure you have more visitors than me, if you feel peeky and want to compare stats, visit this site with /stats appended to the domain name, I didn’t bother to protect the stats for now.
November 8th, 2005 at 2:42 am
Hi Stoyan:
It is a very good work and to the point.
But i want to call alertContents in a slight different way.
http_request.onreadystatechange = alertContents;
Does it allow to pass, some arguments to alertContents()
like:
function makeRequest(url,one,two,three) {
http_request.onreadystatechange = alertContents(one,two,three);
http_request.open(‘GET’, url, true);
http_request.send(null);
}
function alertContents(one,two,three) {
//some processing with these arguments
//one,two,three
}
November 8th, 2005 at 7:50 am
Hi Nirmal,
I’ve never thought of passing extra parameters to the callback function, I assumed the responseText and responseXML would be enough. But you’re right, it would be better if you could pass such parameters. I’m afraid you’ll have to modify my code to suit your purposes, as it currently doesn’t support this.
You can probably use “arguments” variable to pass a dynamic number of parameters. I mean something like:
function test(){
alert(arguments[0]);
}
test(1,2,3);
Another option is to add a forth parameter to makeHttpRequest that will be an array and just carry on this array in the call to the content function. The array would allow you to use as many parameters as you need.
In any event, check the second example in the article, because it’s designed to be reusable. The first one that you quoted is more of a quick refresher. The second aims at making the request-making function (makeHttpRequest) agnostic of the content processing one (alertContents).
November 12th, 2005 at 7:45 am
Hi Stoyan,
This comment is just to let you know I’ve transformed my PHP / xajax presentation into an extensive blog posting. It includes all examples with sourcecode that I used during the presentation. I’m very interested in your comments!
You can get it all here:
http://www.i-marco.nl/weblog/archive/2005/11/12/easy_ajax_for_the_masses_with_
Cheers!
Marco
January 8th, 2011 at 2:52 am
i believe that that was actually interesting. Good put up!?-