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."
Well done (Score:5, Informative)
Ajax in action (Score:5, Informative)
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: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: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, they needed a way to create that object even though they didn't support ActiveX (justifiably). And Microsoft just kept its original design.
Re:Ajax in action (Score:2, Informative)
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 justify the expense of avoiding reloads. Lots of people "want" to use AJAX. That doesn't make it a good idea.
-- Brian
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: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.)
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 function loadXMLdoc(), with appropriate redirects to an error/troubleshooting page if creating the object ultimately failed.
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).
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's XPATH library at http://sourceforge.net/projects/goog-ajaxslt/ [sourceforge.net] - Sarissa is a close XPATH second, but she has trouble supporting Safari and other browsers.
Also, the article does not mention how brutal it is to work in JS at this level since there are very few savy development tools. Be careful before you invest a lot in AJAX or you will get CREAMED tring to support this code down the road.
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 if we didn't have to, but that's why people get paid the big bucks. If it was too easy...
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.