Mastering Ajax Websites 307
An anonymous reader writes to tell us that IBM DeveloperWorks has an interesting article introducing the uninitiated to the world of Ajax. From the article: "Ajax, which consists of HTML, JavaScript technology, DHTML, and DOM, is an approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together. Ajax is more than just the latest fad -- it's your stepping stone to build better Web sites through efficient use of your time."
Ever notice . . . (Score:5, Insightful)
Re:Ever notice . . . (Score:5, Insightful)
Look at what Google Maps did for online mapping and tell me AJAX is "just a fad".
Re:Ever notice . . . (Score:3, Insightful)
Re:Ever notice . . . (Score:3, Insightful)
Re:Ever notice . . . (Score:5, Funny)
Re:Ever notice . . . (Score:4, Interesting)
Okay. The word "AJAX" is just a fad.
The actual implementation will not be, and sites that use "AJAX" will range from the finely crafted interfaces to the usability nightmares.
XML (Score:5, Funny)
Remember the Samy worm? [slashdot.org]
http://namb.la/popular/tech.html [namb.la]
He used html, java, dhtml, xml...
Especially XML
AJAX seems to be like Darth Vader... Powerful, yet dangerous.
Re:XML (Score:3, Insightful)
He used JavaSCRIPT. Big difference.
Re:Ever notice . . . (Score:5, Insightful)
Re:Ever notice . . . (Score:3, Funny)
Re:Ever notice . . . (Score:2, Funny)
I just love it when people say something and then they don't. It's like their making a statement, and then they make the opposite, so they dind't say anything. I think it's an interesting way of showing both points of view without commiting to either one. Or not.
Re:Ever notice . . . (Score:5, Funny)
It keeps my websites Spic and Span.
Oh wait...
Re:Ever notice . . . (Score:5, Funny)
Re:Ever notice . . . (Score:2)
Ah, the mighty Sponge of Cleansing. Ph34r.
"youens"? Central PA? (I'm actually from New York, but were Mr. Clean to prod yo' buttock, he would surely do so in the most possessive 2nd person plurality possible.)
Re:Ever notice . . . (Score:2)
Re:Ever notice . . . (Score:2)
LAMPS + RoR + AJAX = WTF?? (Score:4, Funny)
It's not just a fad!
Re:LAMPS + RoR + AJAX = WTF?? (Score:2)
Re:Ever notice . . . (Score:2, Insightful)
At this point in the game, we shouldn't have to be jumping through hoops and playing games to get great looking web applications. Web applications should be on par with traditional applications.
--
Q
Re:Ever notice . . . (Score:4, Funny)
Re:Ever notice . . . (Score:5, Insightful)
Re:Ever notice . . . (Score:3, Insightful)
Well, tough shit. That's what the web is being used for. Do you really think that the web would have been successful without ecommerce? Ecommerce is a web application. Any site that takes input from the user and does
Re:Ever notice . . . (Score:3, Interesting)
There's way too much hype over such a small thing. It gets annoying.
Re:Ever notice . . . (Score:2, Informative)
In fact, I'm surprised at how agile the classes and objects can be. Once you get a handle on arrays and start thinking along the lines of JSON [crockford.com] for your asynchronous work, you'll be ahead of the game. (Not you personally, just 'you' generically.)
How to become an AJAX Expert (Score:2, Funny)
Re:How to become an AJAX Expert (Score:2)
5 years Ajax,
10 Years Java,
10 years C,
10 years C++,
10 years VB,
10 years SQL
Woohoo! 55 years programing experience.
Well done (Score:5, Informative)
Ajax in action (Score:5, Informative)
Re:Ajax in action (Score:3, Insightful)
Re:Ajax in action (Score:2, Informative)
Re:Ajax in action (Score:5, Interesting)
Re:Ajax in action (Score:3, Insightful)
Re:Ajax in action (Score:2)
Bookmarks not working is merely a symptom of a larger problem - the lack of addressability. This also causes other problems. There might not be many people who want to bookmark one of their emails, but I'm sure there's a lot more people who would like to open an email in a new tab every once in a while.
Re:Ajax in action (Score:5, Interesting)
Re:Ajax in action (Score:3, Interesting)
Nope. Can't think of one. You do realise that it's perfectly reasonable to use Javascript with real links don't you? And I wasn't complaining about onclicks, I was complaining about spans and onclicks together being a half-arsed replacement for real links.
Re:Ajax in action (Score:5, Insightful)
That's not Ajax, that's developers who have screwed up. You can have Ajax and addressability (bookmarks, back button, etc) for 99% of the things Ajax is good for. It's just you have all these newbie web designers jumping on Ajax like there's no tomorrow, so most of the things you see have had lots of shortcuts taken, and some of the things you see shouldn't have used Ajax in the first place.
A good rule of thumb for knowing when it's appropriate to use Ajax is where you intend on posting something to the server, and then redisplaying the page you just came from. For example, Slashdot's moderation. It makes no sense to regenerate the entire page just to tell the server what you think of one particular comment. This is also the situation where bookmarks, the back button, etc aren't going to break.
Re:Ajax in action (Score:5, Insightful)
Completely. AJAX should only be used when you would've POSTed something to the server and made a slight change - both of those are non-bookmarkable and non-addressable. (Good) web designers seem used to when to GET and when to POST, so only use AJAX in the latter case. The general rule for that, by the way, is that POST should change stuff on the server, and GET should only retrieve data. Thus, you can only bookmark a view of data, not a change of it - you've already changed it once you're ready to bookmark.
AJAX can actually help with the entire problem of tabs and forms - if the form only changes data but doesn't update the view, you can use a regular link to see a different view of it.
The other solution is to do what Google Maps does - since they're using AJAX to retrieve views, they have a button called "Link to this view" or something that gives you a context-free URI to that particular view.
yes and no (Score:2)
Not that that in itself helps with the bookmarking issue, though i also agree with you that providing a link where it may reasonably be useful, as google do
Re:Ajax in action (Score:2)
Remind me again why I'd want to put my im passwords into a random web page?
Re:Ajax in action (Score:2)
JavaScript code is the core code - What??? (Score:5, Interesting)
JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications.
Depending on JavaScript could be its downfall, since JavaScript has so many functional work-arounds for each browser. Even the article mentions (but dismisses) this problem.
From the article (again):
Microsoft's browser, Internet Explorer, uses the MSXML parser for handling XML (you can find out more about MSXML in Resources). So when you write Ajax applications that need to work on Internet Explorer, you need to create the object in a particular way.
"Particular Way" for browser one
Sounds like in an inherently poor design.
Re:JavaScript code is the core code - What??? (Score:5, Informative)
The incompatibility you are talking about is the direct result of Microsoft implementing XMLHttpRequest with ActiveX, and everybody else implementing it as a native Javascript object. Microsoft are changing their implementation in Internet Explorer 7 to be compatible with everyone else.
So no "inherently poor design", just a historical artifact that is a) easily worked around, and b) going away.
Re:JavaScript code is the core code - What??? (Score:2, Interesting)
You do know that Microsoft actually invented the XMLHttpRequest object, don't you (they then completely ignored it for years until Google realized its potential)? And since COM/ActiveX is the main way things get done in th
Re:JavaScript code is the core code - What??? (Score:3, Informative)
Sounds like in an inherently poor design.
Yeah, because var req; if (window.XMLHTTPRequest) req=new XMLHTTPRequest(); else req=new ActiveXObject("Microsoft.XMLHTTP"); is such poor design. (req supports the same capabilities now, regardless of method - that's why he said "create".)
The reason behind this is that XMLHTTPRequest was originally a Microsoft idea using ActiveX. When Mozilla, Opera, Safari, etc. realized it was a good idea, the
Re:JavaScript code is the core code - What??? (Score:2)
Well it is ;). It assumes that XMLHttpRequest is implemented in one form or another, it throws an exception when Internet Explorer users have ActiveX disabled, and it doesn't handle Internet Explorer 5.0 (IIRC), which implements the same object, but with a slightly different name.
Re:JavaScript code is the core code - What??? (Score:3, Informative)
As a rule, you don't post error-checking code in programming discussions. It's assumed that everything's wrapped in a try block.
What I used in my application was copied-and-pasted from Apple's XMLHTTPRequest tutorial [apple.com], part of functi
Re:JavaScript code is the core code - What??? (Score:4, Insightful)
So... unless you disregard a significant percentage of viewers, you do need to provide an alternate version.
The article says: "Ajax is more than just the latest fad -- it's your stepping stone to build better Web sites through efficient use of your time." -- tell me how can AJAX save you time if you have to do _both_ versions of the site, multiplied by the number of differently behaving browsers?
Re:JavaScript code is the core code - What??? (Score:2)
Not an inherently poor design, but an inherently poor architecture. If AJAX needs to be browser-specific, it is doomed in the long term.
Think: flash in the pan.
Re:JavaScript code is the core code - What??? (Score:4, Informative)
Im not a huge fan of AJAX, but this is one criticism you can't honestly level at it. Browser incompatibilities exist for pretty much all client-side, web-based technologies, and AJAX has only a single minor change to work around, as opposed to getting a complex CSS layout to work cross-browser. *shudder*
The simplest AJAX app relies on one piece of javascript functionality - the ability to make an http request through script. I've used this a number of times to submit data to a server when I didn't want to update the page.
Most AJAX then also relies on the ability of javascript to parse an XML document (to examine the results of the post) and some form of dynamic page-rewriting to change the current page based on the XML document (generally object.InnerHtml for content changes, or object.style for stylistic ones).
These features are fairly static - there's no need for them to change often. Simple AJAX - which is simply just offloading form submission - is good, useful, and most users don't even know it's there. As long as javascript keeps these three features, AJAX won't have major browser compatibility problems.
AJAX which rearranges the page after each XmlRequest is a bit more troublesome. It's also the flashy bit, which means its the bit every man and his dog tries to do. Using this technique, it is easy to write an entire site in one page - that is, there's one page the user visits, and the page rewrites itself based on their clicks. This is the stupidity of taking AJAX too far; you end up breaking basic functionality of the web (back buttons, refreshing, bookmarking, opening in new windows/tabs).
Re:JavaScript code is the core code - What??? (Score:2)
Why AJAX matters (Score:5, Interesting)
As a concrete example, play with Google Maps [google.com] for a couple of minutes, then try using a map from MapQuest [mapquest.com]. It will quickly start to annoy you that you can't drag the map and that you have to click to a new page to move the map around. GMaps isn't pure AJAX, admittdly, since it deals with picture data - it can just write the image tags to the page and move them around as you drag. But the side text and the map searches are AJAX - when you click search, you don't open a new page with the search results. You can keep using the map; the client will turn your search into an XML request, Google will process it, and send the results back as XML - asynchronously.
For another example, I wrote this week a dead-simple chat program (because I needed a specific feature). It was simpler to write a web app instead of a real app, because the latter would require networking, windowing, and whatnot - the web interface made GUI easy and manual networking irrelevant. Without AJAX, I would need to have the page reload every second to check if there are new messages - very distracting. I had the system asynchronously check for messages in the background, and when one arrived, update just that part without refreshing the page.
AJAX is a tool to be used when necessary. Don't freak out over it, but realize it's there whenever you need to use a more application-like interface instead of a page-like interface.
Re:Why AJAX matters (Score:2)
No, AJAX is Javascript.
Re:Why AJAX matters (Score:2)
So, AJAX has Javascript in it, but is not javascript. My computer plays games but that doesn't make it a gaming machine.
Re:Why AJAX matters (Score:2)
I'm actually in the middle of doing the same thing, but I'm very new to AJAX. Any chance you would be willing to share your code with me?
Re:Why AJAX matters (Score:2)
And then the user switches off Javascript and sends all sorts of illegal crap to the application.
Performing form validation on the client is nice, but cannot replace server-side validation even in the simplest case. You can still do it, sure, but it doesn't mean you can stop doing server-side validation. The application has to protec
Good but bad! (Score:5, Insightful)
We need to re-standarize Javascript or at least make sure all the browsers implement a 100% compatible version. And I don't think that will work since not even HTML is properly rendered by any browser at all.
Re:Good but bad! (Score:4, Insightful)
So, unless we end up with one web browser, we'll never have a common object model and will therefore always have incompatibilities.
Re:Good but bad! (Score:3, Informative)
As you say, the problem is with the implementation of the DOM. In my experience, though, that boils down to using a liberal sprinkling of strategically-placed if statements; kind of like the cross-platform C guys use their ifdef statements.
Sure, it'd be nice
Re:Good but bad! (Score:2)
--
Q
Re:Good but bad! (Score:2)
Best thing since sliced bread! (Score:3, Insightful)
Recalling the Simpsons: "Only suckers buy [last year's] model. You are not a sucker, are you?"
I can't wait to start padding my resume with the latest and greates technology out there that will do the same thing we've been doing for decade but with more acronyms and steeper learning curve.
Re:Best thing since sliced bread! (Score:2)
Let's Get Picky (Score:3, Informative)
"Ajax, which consists of HTML, JavaScript technology, DHTML, and DOM, is an approach that helps you transform clunky Web interfaces into interactive Ajax applications."
DHTML is nothing more than javascript and html. And how the heck are you supposed to use javascript without using the DOM, aka Document Object Model? Talk about buzzword compliant...Re:Let's Get Picky (Score:3, Funny)
And which one of those is the 'X' in 'AJAX' again?
Lets clear this up NOW (Score:2)
From the article you did not read:
"
Ajax defined
By the way, Ajax is shorthand for Asynchronous JavaScript and XML (and DHTML, and so on). The phrase was coined by Jesse James Garrett of Adaptive Path (see the Resources section) and is, according to Jesse, not meant to be an acronym.
"
Re:Lets clear this up NOW (Score:2)
Re:Let's Get Picky (Score:2)
Argh, no. You're one of those people who looks at Hungarian notation and thinks it means tacking the variable's declaration type (like "short integer") on it, not its content type (like "area in square meters"), right?
DHTML is composed of JS and HTML, but DHTML is rewriting objects on an HTML page using JS. It is not HTML; it is
"Ajax is more than just the latest fad" (Score:3, Funny)
(It's not going to be me.)
Recursive definition? (Score:2, Funny)
Couldn't have said it better myself...
Ajax, all the problems of time sharing, back again (Score:3, Interesting)
A growing annoyance is a page that hangs during loading because its advertising site is slow. With plain HTML, page rendering isn't delayed for image loading. With AJAX, page load can be stalled while the ad server cranks. I keep seeing "Waiting for servedby.advertising.net" in the browser status line. Fortunately, I can just close the page and go to a competitor.
I just bought 40 backup tapes. First site had some problem with its dynamic stuff. Went to another site and spent money there.
Re:Ajax, all the problems of time sharing, back ag (Score:2)
Your comment is utter FUD (Score:2)
In other words, you are a complete idiot.
Which stereotypical AJAX rant should I post... (Score:4, Funny)
1) point out that AJAX is nothing new, it's just a fancy schancy buzzword for DHTML+XMLHTTPRequest, and that I'm so cool since I've been using it since 1997 long before someone coined the term. In fact, long before XMLHttpRequest was even invented!
2) "Web 2.0" is retarded why do we need to version the web, Flickr sux, GMale sux, Google Maps sux, and anything with fancy javascript interfaces, rounded boxes, and pastel colors sux
3) obligatory overused joke regarding AJAX the cleaning supply
I thought Ajax was supposed (Score:2)
General Kala: "Confess and we won't hurt you anymore, we don't like doing this at all."
Man, so bad, it's great.
Has no GRID control (Score:2)
scratch (Score:2, Informative)
function updatePage() {
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
Which is really the absolute WORST way to parse XML. It's a bear to support cross-platform. I have had the best luck for client-side-Javascript-xml-parsing using Google
Why this is a fad: (Score:2, Interesting)
Just finished a chat application using AJAX (Score:5, Interesting)
You've GOT to be kidding... (Score:3, Informative)
Ajax, which consists of HTML, JavaScript technology, DHTML, and DOM[..]
This came out of someone from IBM? I fear for the species if this is the case. Wake up! DHTML is just Javascript and HTML - you know, another one of those silly terms thought up to describe combinations of existing things. It's not something exclusive. This 'expert' should learn to get his terms straight.
Re:How about a new language (Score:2)
Anyone who finds basic AJAX "too complex" needs to try the Prototype [sergiopereira.com] library [particletree.com].
Re:How about a new language (Score:2)
Re:How about a new language (Score:3, Insightful)
Too complex? As compared to what? Having each and every server-side action also generate a page for the user? With AJAX, you can have one or two pages for display, and the rest of the scripts just for sending or retrieving data.
Re:How about a new language (Score:2, Insightful)
Re:How about a new language (Score:3, Insightful)
Re:How about a new language (Score:2)
Re:How about a new language (Score:5, Interesting)
Well, as soon as we get all of the web browsers out there to adopt your so called "new language", we'll be all set. Your comment about Macromedia Flash made me laugh. Explain to me how Action Script interacting with the server with XML.send() is any different than JavaScript using XMLHttpRequest??
Obviously you're not a web developer ;)
Instead, how about a JavaScript 2.0? The language is only short a few key elements (like a native JSON serializer).
I started developing web based applications 7 years ago. At that time, JavaScript was really only useful for image mouse overs and was more or less useless and I refused to use it for anything.
Well, about 8 months ago I decided to give JavaScript another chance. All I can say is, wow it's come a loooong way.
I'm a bit skeptical of all of the frameworks that have popped up. They seem to overcomplicate things profoundly. I've looked at a lot of them, but haven't decided that any of them are less work than the solution I developed on my own.
My approach is to use JSON instead of XML. I have a server side script (can be any language, I used PHP for my last application) which acts as a listener script. The listener script accepts and sends JSON strings. The client JS composes and sends JSON strings with XMLHTTP request.
It's clean, fast and simple to maintain and expand. I think these claims of AJAX being "too complex" are ridiculous.
Re:How about a new language (Score:2)
That's what everyone said about object-oriented programming in about 1990. They said it was too much work, or that it was nothing really all that new, and you could do the same stuff in C if you wanted to.
To some extent they were right, but I think in some cases, that was just a way of saying "it's new and I don't want to learn it".
Re:How about a new language (Score:2, Interesting)
I think you just missed the whole point of ajax with that single statement....
Webbrowsers support javascript very well, and have done so for quite some time. Javascript has a nifty object that allows you to asynconously make requests without submitting a page, in the background so to speak. This request might fetch an XML document or might be a spe
Re:How about a new language (Score:2)
I guess I'm not real optimistic about the ability of the web standards committee to come up with such a solution.
--
Q
Have you tried Laszlo? (Score:5, Informative)
It's an open source language/server for creating flash based applications.
We've found it to be very impressive how much you can do with so little code... and it's nice to have a proper OO backend to a flash frontend... the flash frontend means we can:
a) Make our interface very pretty and like a 'normal' application
b) Means it works in pretty much any browser...
c) on pretty much all platforms...
d) without a download of any plugin in most cases (just because of the penetration of flash)
Re:Have you tried Laszlo? (Score:2)
Re:How about a new language (Score:3, Insightful)
Re:How about a new language (Score:2)
Re:When is AJAX appropriate? (Score:2)
On
Re:When is AJAX appropriate? (Score:2)
Re:When is AJAX appropriate? (Score:4, Insightful)
You don't need polish to keep users, you only need polish to attract users. Take Slashdot as an example. Hideous design, atrocious implementation, no polish whatsoever, full of bugs, and yet people keep coming back to it.
Once you've attracted users, they rarely go away unless you give them a push (like endlessly posting repetitive articles on Ajax, for example).
Re:When is AJAX appropriate? (Score:3, Insightful)
Also, I'd clean up the terminology. You don't use it for web sites. You use it for applications.
Re:When is AJAX appropriate? (Score:2, Informative)
I disagree. Unless you're developing for fun, you need lots of users and/or transactions to justify the extra expense required to implement AJAX.
You use it when it's appropriate to support a desktopish interaction model.
Okay, but that's nearly tautological. The problem is to determine when a "desktopish interaction model" is appropriate.
You don't want to reload the page every time.
Whether you "want" to reload the page isn't nearly as important as whether you can
Re:When is AJAX appropriate? (Score:2)
Re:(raises his hand) (Score:2, Insightful)