Slashdot Mirror
So How Do You Code an AJAX Web Page?
PetManimal writes "Computerworld has a long excerpt from a book by Edmond Woychowsky about how to code Web pages in AJAX. It gives a good explanation of how the technology works, and also has some visuals and code snippets that you can play with. From the article: 'Beyond the XMLHTTP Request object, which has been around for several years as a solution looking for a problem, there is nothing weird needed. Basically, it is how the individual pieces are put together. When they're put together in one way, it is nothing more than a pile of parts; however, when put together in another way, the monster essentially rises from its slab.'"
Beyond the XMLHTTP Request object, which has been around for several years as a solution looking for a problem, there is nothing weird needed. Basically, it is how the individual pieces are put together. When they're put together in one way, it is nothing more than a pile of parts; however, when put together in another way, the monster essentially rises from its slab.
But more importantly, one needs to remember that the internet is not a big truck, that you can dump information on. It's a series of tubes.
The theory of relativity doesn't work right in Arkansas.
First, you click [Start][Programs][Accessories][Notepad]...
This space intentionally left (almost) blank.
1. Open Visual Studio
2. Download and install the ATLAS framework
3. Wrap your webpage in an update panel
4. Add a script manager
5. Lather, rinse, and repeat
Seriously...one drag-and-drop and you'll never see another page refresh.
Instead of wading thru 7+ pages of clicking and ads ... Printer Friendly version. You can thank me later.
Save some clicks and some bandwidth. Use the link below:
/ article.do?command=printArticleBasic&articleId=900 2170
http://www.computerworld.com.nyud.net:8080/action
...but slashdot keeps blocking it with a "lameness" filter, insisting it's "junk characters". Go figure, I didn't know slashdot was anti-web 2.0!
You need to watch what you mix with ajax because it can become lethal
The kids would love it
With the growing popularity of AJAX does anyone think it's time to update the HTTP spec? AJAX is cool tech but still hindered by the fact that the client has to initiate every request. Yes, there are ugly hacks to keep a connection alive, but it is exactly that, a hack, and introduces problems of it's own.
Similes are like metaphors
Woychowsky repeats himself a lot. What's more, he says the same things over and over. In other words, he'll say something, and then re-phrase it with almost exactly the same words.
As I've mentioned, he seems to keep repeating himself
If you are an AJAX coder from the darkside, then this is for you.
Notable quote "Ajax has introduced a huge attack surface"
title So how (i) do (/i) you code an AJAX Web page? /title
:))))))
Haha, i mean, start ptocessing XML like this with Java and we will have a lot of browsers falling on their asses with exceptions
OK I am cruel!
How do I save an AJAX page in a given state, rather than just a state that will be "rebooted" on reload from storage?
--
make install -not war
but leave it to MSIE to break on all but the simple stuff.
Can't get my users to just use firefox.
So for me iframes work best.
Print version here.
Zero credibility points for trying to put markup in the <title> element and hiding the printable version behind a javascript:void(0) link.
If you want the technical stuff, skip about a third of the way down. The first third of the article just repeatedly tells you that Ajax is when the page doesn't "blink".
The code he supplies is crap. For instance:
Things wrong with even this tiny snippet of code:
Skimming the rest of the article, I see the following mistakes:
If this is a representative sample of the book it is excerpted from, steer well clear of it. The whole approach is poor.
The best way of producing compatible, accessible Ajax applications is to start with the bare HTML and make that work. Only then do you add the JavaScript, and you do it by enhancing the page, not replacing it. For instance, don't use <button onclick="...">, use a normal <input type="submit"> and hook into the form's submit event. That way:
Bogtha Bogtha Bogtha
The article is very verbose. It has some value, I suppose - it helped me to decide I didn't want to buy the book. There are more concise introductions to Ajax here and here
There is also an interesting library of Javascript/ECMAscript functions to perform common Ajax chores here
If your a Java coder Icesoft has a great AJAX framework icefaces.
abcdefghijklmnopqrstuvwxyz
I think it's important to keep the XML HTTP Request (or AJAX if you want) seperated from explicit changing topic or direction. Someone above me said that "you never have to see your page refreshing again". I think XHR should be enclosed to only where it really belongs and would be very neat - for instance in the slashdot comment system or just comment systems in all general; Not to change the subject all over.
If XHR's not being overdone, you ensure that links still works, later on you can separate the overall content on different topics and so on. Browsing the web should be preserved for refreshing.
1. Download Echo2 http://nextapp.com/platform/echo2/echo/
2. Write AJAX applications like you would a Swing app, never touching HTML or Javascript.
3. Go outside and play.
'nuff said.
Comment removed based on user account deletion
With the CGI::Ajax Perl module: http://perljax.us/
AJAX, yummy.
Are you suggesting that it didn't occur to those who created XMLHttpRequest how it might be used?
I think it was far more a case of it taking a while for someone to make a compelling enough application using it for it to get public acceptance and attention from mainstream developers. And probably a bit of reluctance to go down that path until a large enough percentage of users had a browser that supported it to make it make economic sense to invest in the use of such techniques on a large scale.
To use AJAX... you don't write Javascript ! Use instead GWT or haXe.
Nobody calls XmlHttpRequest() directly anymore. It's too much work, and there are slight differences between browser implementations. Nowadays everyone is using a wrapper library. Prototype is a very common one (it's certainly my favorite) -- abstracts everything into a nice set of functions for you -- you just specify the HTTP call you want to make, and the function you want it to call when the data comes back (because, in case you're not already aware, XmlHttpRequest() returns its data asynchronously).
The other nice thing you can do with Prototype is to avoid XML parsing altogether by saying "ok, here's the URL I want you to call; it's going to return pre-rendered HTML, and when it does, I want you to stick it in this DIV over here; don't bother me about it" and you can do things like automatically update portions of your page without reloading. You can even have an automatically recurring update, which is very cool for things like tickers, clocks, etc. We used it in our AJAX webmail/calendar system and it really worked well.
Tired of FB/Google censorship? Visit UNCENSORED!
The collection of tools that make up AJAX are as well integrated and easy to work with as the collection of pseudo autonomous regions of North America that make up the United States.
;-)
AJAX as a whole has fewer bugs though.
One strike against AJAX is that search engines won't be able to see any of your 'dynamic' content. Sure, you can code around it by providing static links to the same content, but it's something to keep in mind.
We didn't really even need xmlhttprequest; you could use iframes, too. (And some notable "2.0" apps have)
Useful bits I've found getting into ajax stuff:
Dojo Toolkit, a nifty framework for doing all sorts of good stuff. Of particular note to me was dojo.io.* with its dojo.io.bind() function, which provides a simple, cross-platform compatible way to do an xmlhttprequest, with callback functions for completion and errors, an easy way to post variables, specify a method and caching, etc.
openrico. This provides all sorts of fun stuff. The smart stuff starts with declaring $ as a function, which after you get used to it provides a very convenient cross-platform way to access DOM nodes (ie, $('mydiv') or $(divvar)), and has all sorts of canned widgets for effects, like accordian widgets, move&resize, etc... although I've found practical application usually requires a bit more additional work, but their functions help get started.
I leave "crazy quilt"'s to my mommie.
I use _one_ language and write _one_ apache module.
End of story... Nothing to see.. Move along..
Beyond the XMLHTTP Request object, which has been around for several years as a solution looking for a problem...
Outlook Web Access, genius. That's the problem Microsoft made it to solve.
Start > Programs > Accessories > Notepad2
simple AJAX example:m ple.php
http://www.degraeve.com/reference/simple-ajax-exa
...AJAX codes YOU!!
Really? Then why doesn't it say "+5 Funny" on my shirt?
This space intentionally left (almost) blank.
Why doesn't Slashdot implement it? This would be especially nice for expanding/collapsing in the discussions.
We're all hypocrites. We all have hidden parts, it's the contrast between them that make us more a hypocrite than others
The server code has a DOM class with methods to send scripts, HTML, etc. with all the URL encoding/quote escaping/etc. handled automatically. It continues to be refined but already enables us to do some really nifty stuff.
Later I integrated the Prototype library, and it does seem to do a better job of handling XMLHttpRequests than our original library did.
Mutant Freaks of Nature: "Frighteningly Addictive"
Comment removed based on user account deletion
"With the growing popularity of AJAX does anyone think it's time to update the HTTP spec?"
I'd recommend XMPP and Jep-0124
As far as anything ajax should ever be applied to, all the javascript libraries and such, often worse, gunk dancing around the name ajax are just bloat where you could accomplish your goal with hundreds fewer lines of your own code - you don't need most of the stuff thats there, and it encourages you to do things you shouldn't. Ajax just isn't something you ever (should) need more than a request function and a callback function or two for unless you're going GMail on your users. Beside whether you should use it at all. It can be nifty, but often its use is abusive to its medium.
If you're going to do it, don't bloat it, and know what you're doing. Just write yourself a hundred (or, hell, way fewer if it's a half simple use) lines of javascript instead of implementing some huge general purpose thing under some lisence and crap like that.
This is a pretty good reading about AJAX but they'd better not use any ActiveX in their examples anymore. ActiveX is:
a.) not a standard
b.) a huge security risk
c.) should not be used anymore by any serious web developer for above reasons
There are other simple AJAX examples that don't use ActiveX anymore.
I recently published my first Ajax application. It is an online game called Grand Strategy, a close of the well known board game Risk.
It is by far the most advanced Ajax based implementation of a board game to have ever been written!
I used Direct Web Remoting (DWR) and the Dojo Toolkit. My javascript talks to my server side java beans directly. It's really the easiest web programming model I have ever seen. I hurts to go back to doing ASPX and PHP pages after this.
Check it out here:
http://denizengames.com/grandstrategy/
I agree. The code harks harks back to the days of Netscape 4 with lots of ugly hackery.
Aside from the article, AJAX seems like a nightmare of curious dodginess. We were all taught not to use frames, to use javascript sparingly.. where is this all going, because Google made a couple of apps ?
Have you tried google maps on a slow connection ? runs like a 3-legged dog.
The best way of producing compatible, accessible Ajax applications is to start with the bare HTML and make that work. Only then do you add the JavaScript, and you do it by enhancing the page, not replacing it. For instance, don't use <button onclick="...">, use a normal <input type="submit"> and hook into the form's submit event
Without knowing really your level of experience in designing dynamic AJAX-driven sites, I can say at least this coment in particular is complete bunk. For one, hooking into the 'onsubmit' form event is a recipie for disaster - the event behaves entirely unpredictably across different browsers. Some allow you to cancel it, some don't, others only in certain situations. This is a complete disaster when you're trying to use AJAX to reduce page loads, because normally you would want to submit the form fieldsw to the server for validation and display the error if they did nto validate - and cancel the form submission.
Anyone who has done AJAX in any reasonable amount knows, it is just too different a paradigm to integrate alongside an old HTML 4.0 compatable page in any resonable way. With AJAX, you usually want a totally different layout, and a totally different way to display information. Sure, you *can* make them work side by side, uising crazy CSS and javascript that basically re-dos the whole page based on the browser's capabilities. But why would you do that? The best way to do things, is to have two completely different sets of forms - one AJAX-ified, one not. The number of browsers that support AJAX is small enough that you can redirect them to the fancy site based on the User-Agent.
After reading through five pages it all ended at "var dom = new ActiveXObject(......"
No thanks, next book please.
I'm even more bleeding edge.. I use ADHJACS. ;-)
For those of us who aren't experts in this but may be interested in learning something new, how about a concrete example? Give us a simple, complete page that uses AJAX and is still compatible with non-AJAX browsers. None of this "there are ways to do ..."
Thanks!
The Prototype script library provides an excellent base for AJAX (as well as other dynamic Javascript effects). I like to use that since it's very hard to make AJAX cross-browser compatible as it seems that every browser has a different way it would like the XMLHHTP to be formatted . . . I prefer to work off of what has already been tried and true.
Moo.ajax.js also provides an easy (and light) way to do AJAX very easily (using a "lite" version of prototype as a building block). In fact, moo.fx.js (another lightweight script library from the same folks) is used on this very site to accomplish the collapsible menu on the left.
once you get that the rest falls into place. don't need to read a 10 page article.
What is the easiest way to deploy a socket app cross-platform to a Limited User who cannot run untrusted executables? Do you really want your banking software to go back to client software that runs only under Microsoft® brand Windows® brand operating systems?
Because not enough people have Java 1.5 or newer installed. Remember that IE doesn't come with anything later than MSJVM 1.1.x, and not everybody 1. has permission to install software, 2. is willing to learn to install software, 3. is willing to install a binary from someone they never heard of ("Sun? Who's that? Some Japanese company? Is this spyware?"), 4. is running on a platform to which Java 1.5 has been ported, and 5. has a fast enough connection to download Java 1.5 without the phone line clicking off after an hour.
TiddlyTiki is a neat self-contained wiki engine that uses AJAX to get the job done.
ZiddlyWiki was a TiddlyWiki incarnation for Zope. Unfortunately it seems its author, Tim Morgan, let it die just a few days ago...
Unselfish actions pay back better
not to be such a nerd, but this tutorial is ie-oriented (war!) but anyway, mozilla.org ironically has had the same thing .. only more expanded, with less ads, and for all major browsers (including ies) here: http://developer.mozilla.org/en/docs/AJAX ... for a long time now ...
Well,
For Php scripters, if you want to create ajax based web pages, have to look xajax. It was so easy you do not need to know javasciprt.
[My english is better than most other people's Turkish, so please point out mistakes politely. Thank you.]
Check out my cross-platform apps
Storage mediums are for half-wits. I keep my source code in my head. To upload and test my work, I dial up to my AOL account using my AT&T rotary phone and emulate the tones of a 28,800 baud modem using my voice.
I don't always use unix-like operating systems; but when I do, I prefer FreeBSD.
Try the scrapbook plugin for firefox. Most of the pages I've captured with it weren't too crazy, but I've never seen it fail. For example, I've used it to save pages from the new version of the amazon.com "search inside this book" feature, which is quite ajaxified.
Atlas for asp.net (http://atlas.asp.net/). Fantastic framework; unbelievably simple.
I took a normal asp.net form I built for an ordering-page (lot's of postbacks for updating various basket options, etc, etc), wrapped it in an atlas XML node (all of 10 seconds work), and Bob became my uncle - the entire thing was AJAX enabled, doing lightweight postbacks & updates instead!
And all the JS is cross-platform too - IE, FF, Safari, etc.
And the best thing is, for all you JavaScript haters is turning off JS in the browser just meant the page automatically reverted to full-blown postbacks instead; thus not limiting accesibility.
Oh, and I understand you can link php into Atlas too, but I'm guessing there's other stuff out there for php aswell.
throw new NoSignatureException();
I'm surprised no one has posted something about this elegent little gem. If you're an ASP.NET coder, this is a very lightweight system that allows you to treat server-side page methods as javascript-accessible. Simply add an attribute and declare it public. The framework allows you to return the usual variables (int, string, XML), as well as DataSets, ArrayLists, generic lists, DateTimes, and any class or struct composed of such. They're automatically converted into JavaScript objects via back-end JSON translation. I actually found this framework easier to work with than ATLAS. Check out the quick guide to see how simple and extensible it is.
And it's free!
I hope the point the OP was trying to make was that Ajax is better suited for use in web applications than public websites.
That's the only thing about Ajax. That is, in a nutshell, Ajax.