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

17 of 231 comments (clear)

  1. finishing the thought... by User+956 · · Score: 5, Funny

    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.
  2. So How Do You Code an AJAX Web Page? by Anonymous Coward · · Score: 5, Informative

    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.

    1. Re:So How Do You Code an AJAX Web Page? by Anonymous Coward · · Score: 4, Funny

      [insert "trendy" web 2.0 names here]

      shitty

    2. Re:So How Do You Code an AJAX Web Page? by naoursla · · Score: 4, Informative

      I would never describe myself as a graphic artist so I will neither agree nor disagree with you.

      However, for the web impaired here is a direct link for the web developer version only (which you can get to by clicking the big download picture on the right hand side of each product specific page and then clicking "Download" in step 2).

      And as long as I am providing overly simple instructions to trolls, I guess I'll point out that ATLAS does not come installed with Visual Studio. You have to download it from atlas.asp.net (hint: there is a big download icon at the top of the screen).

      And if you would like a demo of how easy it is to create ajax applications with atlas, there is current a video on the front page of someone creating a database backed todo-list application in 18 minutes (the express version of Visual Studio comes with a lightweight database and web server for development. I think you can probably repeat this demo with the free tools).

  3. Printer Friendly by neonprimetime · · Score: 4, Informative

    Instead of wading thru 7+ pages of clicking and ads ... Printer Friendly version. You can thank me later.

  4. Both Repetitive and Redundant by Stringer+Bell · · Score: 5, Funny

    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

  5. Start by not putting a tag in your title :) tag by dindi · · Score: 4, Funny

    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!

  6. Saving AJAX by Doc+Ruby · · Score: 4, Insightful

    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

    1. Re:Saving AJAX by crabpeople · · Score: 4, Funny

      prt scr

      --
      I'll just use my special getting high powers one more time...
  7. Huh by Bogtha · · Score: 5, Insightful

    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:

    <html> <head>

    <title>HTMLfs</title>
    </head>
    <framese t rows="100%,*">
    <frame name="visible_frame" src="visible.htm">
    <frame name="hidden_frame" src="hidden.htm">
    <noframes>Frames are required to use this Web site.</noframes>

    Things wrong with even this tiny snippet of code:

    • Invalid.
    • Frames (at the very least, he should have used iframes).
    • Cheesy "fuck off" error message instead of functional equivalent.

    Skimming the rest of the article, I see the following mistakes:

    • Using DOM methods without testing for their existence.
    • Browser detection (which is stupid and wrong).
    • Obtrusive JavaScript embedded in the page with old-fashioned HTML attributes.
    • Non-degradable JavaScript form submission with <button> instead of <submit>.
    • Confusion over what elements and tags are.
    • Internet Explorer-only code without error checking or a fallback.

    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:

    • It works when JavaScript is unavailable.
    • It works when there's a problem in your code.
    • It works when you find you can't do something halfway through processing the event (e.g. you find that ActiveX is switched off in Internet Explorer, making XMLHttpRequest unavailable).
    --
    Bogtha Bogtha Bogtha
  8. There are much better intros to Ajax by njdj · · Score: 5, Informative

    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

  9. Use Echo2 by Mock · · Score: 4, Informative

    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.

  10. Nobody calls XmlHttpRequest() directly anymore by IGnatius+T+Foobar · · Score: 4, Insightful

    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!
  11. Re:HTTP, time to update? by richdun · · Score: 4, Insightful

    Bandwidth ain't _that_ cheap. A constant connection would be annoying to maintain in spotting wifi, electrical storms, etc.

    I personally prefer web development because of the forced finite life of each state. That sort of back and forth makes data validation, cross-process security, and other things that many web developers ignore very easy to implement. You just have to quit thinking continuously (rimshot please!) and start thinking discretely.

  12. Oh yeah? by The_REAL_DZA · · Score: 5, Funny
    AJAX is a joke

    Slashdot is a joke

    You are a joke

    Really? Then why doesn't it say "+5 Funny" on my shirt?
    --


    This space intentionally left (almost) blank.
  13. Speaking of AJAX... by Chabil+Ha' · · Score: 5, Interesting

    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
    1. Re:Speaking of AJAX... by spencer1 · · Score: 5, Informative

      Slashdot is currently testing just that among a small group over users. http://slashdot.org/faq/com-mod.shtml#cm120