Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!

 



Forgot your password?
typodupeerror
The Internet

Mastering Ajax Websites 307

Posted by ScuttleMonkey
from the breaking-it-down dept.
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."
This discussion has been archived. No new comments can be posted.

Mastering Ajax Websites

Comments Filter:
  • Ever notice . . . (Score:5, Insightful)

    by Ph33r th3 g(O)at (592622) on Sunday December 11, 2005 @09:30PM (#14236069)
    . . . how when a new fad comes along, people say it's not a fad?
    • by ceejayoz (567949) <cj@ceejayoz.com> on Sunday December 11, 2005 @09:33PM (#14236085) Homepage Journal
      Sure, but when something useful comes along, people say it is a fad.

      Look at what Google Maps did for online mapping and tell me AJAX is "just a fad".
    • by phoenix.bam! (642635) on Sunday December 11, 2005 @09:34PM (#14236087)
      Ajax is a fad and it isn't. All the hype about it is of course, generated because it's the awesome new fad. But it is an incredibly useful tool. Digg.com does a great job of using AJAX the proper, no intrusive way. GMAIL too. It's great for some things and won't be going away soon. But soon there won't be 20 stories a week posted about it.
      • I am still waiting for an editable grid AJAX component.
      • Ajax is a fad and it isn't.

        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.

    • by baldass_newbie (136609) on Sunday December 11, 2005 @09:34PM (#14236089) Homepage Journal
      That's why I use COMET (Common Object Meta Event Transactions) instead of AJAX.
      It keeps my websites Spic and Span.

      Oh wait...
    • Fads sells over-priced books [amazon.com]. Go figure.
    • by Urusai (865560) on Sunday December 11, 2005 @10:41PM (#14236337)
      I'm bored with these paradigms. Can we invent some new ones already? I propose Flash + Ads + Porn + Paypal = FAPP.

      It's not just a fad!
    • by qray (805206)
      Ajax and its predicessors, to me, are poor attempts to patch problems with building web applications. It's unfortunate that we haven't seen real solutions to the problems of building web applications. I'm surprised at how excited people get over things like CSS and Ajax.

      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
      • by thevoice99 (881959) on Monday December 12, 2005 @03:03AM (#14237081)
        I agree. There are so many things on the internet that just get extensions ontop of them instead of rewrites of the base technology. Why are we even using HTML still?
      • by m50d (797211) on Monday December 12, 2005 @06:09AM (#14237468) Homepage Journal
        Web applications shouldn't exist. It's as simple as that. They're an attempt to shoehorn the web into something very different to what it was designed for - it's meant as a documents platform, not an applications platform. If you want to run remote applications, there are plenty of ways to do so - X11 is the obvious one. If you feel it's inadequate for the higher-latency environment of the internet, you're probably right - but the solution to that is not to try and get http to do applications, it's to write a new protocol for doing internet applications. That's what we should have - a new, standard way of doing applications over the internet, designed for doing applications over the internet, and optimized for this task.
        • by Chazmyrr (145612)
          We have a standard way of doing applications over the internet, it's designed for doing applications over the internet, and the only reason it isn't optimized for the task is because some people just can't seem to move past 1993 and constantly whine that that isn't what the web was designed for.

          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
  • by Anonymous Coward
    Call yourself one.
  • Well done (Score:5, Informative)

    by gustgr (695173) <rondina@gmail . c om> on Sunday December 11, 2005 @09:33PM (#14236082) Homepage
    Interesting post. This kind of introduction might help beginners (like me) to know more about this new mix of different technologies and avoid confusion. Just these days a friend of mine said to me that he would like to learn this new "Ajax programming language". Many people still think that way. Thumbs up for the article.
  • Ajax in action (Score:5, Informative)

    by gustgr (695173) <rondina@gmail . c om> on Sunday December 11, 2005 @09:37PM (#14236103) Homepage
    A nice example of Ajax usage can be found at http://www.meebo.com/ [meebo.com].
    • Re:Ajax in action (Score:3, Insightful)

      by ceejayoz (567949)
      More useful examples would include Google Maps, Gmail, Flickr, etc.
      • Re:Ajax in action (Score:2, Informative)

        by MasterPi (896501)
        More useful!?!? don't know how many hours i've spent looking for a decent browser based jabber client even. The fact that it does AIM and Yahoo as well makes this one of the coolest sites I've found all month. Thanks for the link, g.p.
    • Re:Ajax in action (Score:5, Interesting)

      by OverlordQ (264228) on Sunday December 11, 2005 @09:44PM (#14236128) Journal
      My only complaint about AJAX sites is it makes bookmarking something damn near impossible.
      • Re:Ajax in action (Score:3, Insightful)

        by junjun26 (247061)
        That's why it works so much better for web applications than normal web pages. Why would you bookmark a page in your Gmail account ;)
        • 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, Insightful)

        by Bogtha (906264) on Sunday December 11, 2005 @10:01PM (#14236195)

        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)

          by Geoffreyerffoeg (729040) on Sunday December 11, 2005 @10:28PM (#14236299)
          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.

          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, the generally accepted practice is to use POST whenever changing state on the server side. But I disagree with you about only using XMLHttpRequest when i would've POSTed something normally. Being able to maintain state on the client and fetch more data (a GET) from the server is a Good Thing, also. In fact, it's what i mostly use XMLHttpRequest for.

            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
    • So that's Ajax, is it? Strange... looked like phishing to me. :)

      Remind me again why I'd want to put my im passwords into a random web page?
  • by danwiz (538108) on Sunday December 11, 2005 @09:43PM (#14236123)
    From the article:
    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 ... "Particular Way" for browser two ...
    Sounds like in an inherently poor design.
    • by Bogtha (906264) on Sunday December 11, 2005 @10:04PM (#14236203)

      "Particular Way" for browser one ... "Particular Way" for browser two ... Sounds like in an inherently poor design.

      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.

      • 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.

        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

    • "Particular Way" for browser one ... "Particular Way" for browser two ...
      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
      • Yeah, because var req; if (window.XMLHTTPRequest) req=new XMLHTTPRequest(); else req=new ActiveXObject("Microsoft.XMLHTTP"); is such poor design.

        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.

        • 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

          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
    • by KiloByte (825081) on Sunday December 11, 2005 @10:13PM (#14236236)
      Also, if you consider the popularity of the "NoScript" extension, you'll see that a lot of people turn JavaScript off. Having it permanently disabled is a part of many security policies, as well; I would estimate that at least 10% or so of people will have JavaScript disabled at least on their first visit. This is a lot more than a minority such as "Links users" or "the blind".

      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?
    • "Particular Way" for browser one ... "Particular Way" for browser two ... Sounds like in an inherently poor design.

      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.

    • by LordLucless (582312) on Sunday December 11, 2005 @11:01PM (#14236412)
      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 ... "Particular Way" for browser two ... Sounds like in an inherently poor design.

      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).
    • I'd recomend checking out the Prototype Framework [conio.net]. It make all of this transparent.
  • Why AJAX matters (Score:5, Interesting)

    by Geoffreyerffoeg (729040) on Sunday December 11, 2005 @09:44PM (#14236129)
    AJAX isn't an end in itself; it's just a tool. It's like JavaScript. Back when the web was old, if you wanted to do data validation for a form (for example), you had to send the page to the server and wait for a new page as a response. When JavaScript became popular and well-enough supported, the webpage itself could check data before sending it to the server - although the checks couldn't be that complicated. AJAX is similar; instead of limiting yourself to either using a new page or client-side data, AJAX lets you use JS to access server-side data.

    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.
    • It's like JavaScript.

      No, AJAX is Javascript.
      • No, Ajax is an oven cleaner, and AJAX is Asychronous Javascript And eXtensible markup, even though the latter part of that definition goes away when you realize that there are at least 3 other days of getting data back and forth to/from the server that don't involve XML or the XMLHTTP object.

        So, AJAX has Javascript in it, but is not javascript. My computer plays games but that doesn't make it a gaming machine.
    • 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.

      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?
    • When JavaScript became popular and well-enough supported, the webpage itself could check data before sending it to the server - although the checks couldn't be that complicated.

      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)

    by ech00ne (937418) on Sunday December 11, 2005 @09:45PM (#14236134)
    AJAX doesn't make it easy to develop cross-platform web applications. Look at all the browser incompatibilities in the developing of Gmail and more recently MSN's start.com page.

    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)

      by _Neurotic (39687) on Sunday December 11, 2005 @11:09PM (#14236434) Journal
      It's not so much a matter of making each browser's implementation of JavaScript compatible. The real issue is their differing object models. The object models are a direct result of their respective design methodologies and approaches to security. There any many similarities (like the top level window and document objects) but when you get down to the nitty gritty (a must for "AJAX") you are bound to run into the differences that require conditional logic to provide cross platform compatibility.

      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)

        by Tim C (15259)
        Thank you, that's exactly the point I was going to make. I'm not aware of any incompatibilities between javascript implementations, other than level of standard implemented (and I'm not aware of that actually being an issue in any of the major browsers).

        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
    • No we don't need to rehash the mess we have. Even if 100% of the browsers supported 100% of all the web standards the problems would still exist. Incompatability isn't a trivial problem, but there are bigger problems out there.
      --
      Q
    • Only 'Web masters' bitch about writing an IF statement.
  • by abelikoff (412709) on Sunday December 11, 2005 @09:46PM (#14236143) Homepage
    AJAX...helps you transform clunky Web interfaces into interactive Ajax applications.

    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.

  • Let's Get Picky (Score:3, Informative)

    by cataBob (529363) on Sunday December 11, 2005 @09:51PM (#14236168) Homepage

    "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...
    • Ajax, which consists of HTML, JavaScript technology, DHTML, and DOM,

      And which one of those is the 'X' in 'AJAX' again?

      • Ajax is not an acronym.

        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.
        "
    • 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...

      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
  • by 0x20 (546659) on Sunday December 11, 2005 @09:52PM (#14236169) Homepage
    Somebody should break this news to Hani [jroller.com].

    (It's not going to be me.)
  • "Ajax... is an approach that helps you transform clunky Web interfaces into interactive Ajax applications."

    Couldn't have said it better myself...
  • by Animats (122034) on Sunday December 11, 2005 @11:06PM (#14236424) Homepage
    I keep encountering dynamic web sites that sort of work, or have performance bottlenecks. When I close some pages on tribe.net, there's about 10 seconds of disk activity from the browser, during which time the browser locks up. (Does anyone know what they're doing wrong?)

    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.

    • Actually, you have that backwards. The A in AJAX stands for Asynchronous. While AJAX is doing its thing, the rest of the page continues to load. It's when the ad is included via an object or img element that you end up having to wait for morons' ads to load.
    • If you had an ounce of understanding of web architecture, you'd know that AJAX would actually alleviate those problems. You know (A)synchronously loading the ads via (J)avascript with an (A)PI that calls (X)ML data about the ads.

      In other words, you are a complete idiot.
  • by cheesy9999 (750203) on Sunday December 11, 2005 @11:24PM (#14236470)
    I just can't decide:

    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
  • to do whatever General Kala says?

    General Kala: "Confess and we won't hurt you anymore, we don't like doing this at all."

    Man, so bad, it's great.
  • Until AJAX has a decent editable data grid widget, it will not catch on much for biz apps. It takes a while to get the kinks out of grids, so Ajax better get a start on it now.
  • scratch (Score:2, Informative)

    by Heembo (916647)
    This article only begins to scratch the surface with AJAX. Beginners, only. One thing I'd like to add to the article - is the best way to parse XML documents. The article suggests:

    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)

    by Mitglieder (938129)
    You can tell this is a fad because 1) this technique has been available for years this with Java applets, iframes and dynamic script src includes 2) it's not beneficial for 99% of the websites out there 3) it requires extra work to make the process intuitive to users 4) it's more costly to develop in that it takes longer and requires more smarts, and most of the time it isn't going to pay for itself, because simply getting rid of a page reload in the age of broadband doesn't itself improve the underlying qu
  • by eyebits (649032) on Monday December 12, 2005 @03:39AM (#14237154)
    I've been working on a project that provides a web-based environment for people with a medical condition to get counseling and support online. Chat has been one of the desired features, but the various methods for implementing chat were presenting a problem. Java applets and Flash applications presented problems with time to load for modem users as well as issues with having the right versions of Java/Flash player installed on client. I thought setting up a Jabber server and letting folks use a client installed on their computer would be a good solution, but many (most) found it too difficult to install and configure a chat client. (These are older folks often with little computer experience.) AJAX came to the rescue. The "chat client" is part of the web application. It is as lightweight as the typical web pages being loaded. The exchange of messages between client and server require very little bandwidth. The chat application is just part of the same environment that the users are already comfortable using. I don't see AJAX as the answer to everything and, for the moment, having web applications chock full of AJAX doesn't make sense. But, it has come in very handy in the case of chat for the project I am working on.
  • by kuzb (724081) on Monday December 12, 2005 @04:07AM (#14237205)

    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.

The IQ of the group is the lowest IQ of a member of the group divided by the number of people in the group.

Working...