Beta
×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

So How Do You Code an AJAX Web Page?

Zonk posted more than 8 years ago | from the hard-work dept.

231

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

cancel ×

231 comments

Sorry! There are no comments related to the filter you selected.

ajax (-1, Troll)

mnemonic_ (164550) | more than 8 years ago | (#15848252)

fuck ajax

MOD PARENT UP/AJAX,WEB2.0 DOWN,MOD STORY,ZONK DOWN (0, Troll)

SirJaxalot (715418) | more than 8 years ago | (#15848330)

See subject

FP (-1, Troll)

Anonymous Coward | more than 8 years ago | (#15848253)

I clean your mother's vagina with AJAX

Re:FP (-1, Troll)

neonprimetime (528653) | more than 8 years ago | (#15848310)

You know what your post reminded me of? A month+ back some guy's firt post was complaining that the article posted on /. contained some swear words, and that they should be careful because his kids read /. on occasion. Well, can you imagine that guys response to your first post? ha ha ha that would be funny.

Re:FP (0)

Anonymous Coward | more than 8 years ago | (#15848356)

The kids would love it

SO WOULD THE GAY NIGGERS (-1, Troll)

Anonymous Coward | more than 8 years ago | (#15848526)

see subject

finishing the thought... (5, Funny)

User 956 (568564) | more than 8 years ago | (#15848255)

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.

Re:finishing the thought... (2, Interesting)

creimer (824291) | more than 8 years ago | (#15848477)

It's a series of tubes.

You got it all wrong about the tubes [userfriendly.org] , my friend. :P

Well, first things first... (0)

The_REAL_DZA (731082) | more than 8 years ago | (#15848266)

First, you click [Start][Programs][Accessories][Notepad]...

Re:Well, first things first... (1)

khendron (225184) | more than 8 years ago | (#15848631)

Maybe *you* do, but I click [Applications][Accessories][Text Editor].

Re:Well, first things first... (2, Funny)

dpreston (906415) | more than 8 years ago | (#15848648)

Try...

$ vi <enter>

Re:Well, first things first... (0)

Anonymous Coward | more than 8 years ago | (#15848724)

just so long as you don't use one of them fancy pants html editors or wysiwyg thingies.

I think that was what he was going for too
REAL page building is done with a barebones text editor and nothing else.

Re:Well, first things first... (1)

vhogemann (797994) | more than 8 years ago | (#15848729)

apt-get install vim

nu-uh. (1)

Supersonic1425 (903823) | more than 8 years ago | (#15848657)

Start > Programs > Accessories > Notepad2 [flos-freeware.ch]

So How Do You Code an AJAX Web Page? (5, Informative)

Anonymous Coward | more than 8 years ago | (#15848274)

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.

Re:So How Do You Code an AJAX Web Page? (3, Funny)

Chunt620 (897724) | more than 8 years ago | (#15848333)

That is correct. 10 minutes of work and you too can name your site wixi, plexxy, swiggle, gippy.......[insert "trendy" web 2.0 names here]

Re:So How Do You Code an AJAX Web Page? (4, Funny)

Anonymous Coward | more than 8 years ago | (#15848758)

[insert "trendy" web 2.0 names here]

shitty

Re:So How Do You Code an AJAX Web Page? (-1, Flamebait)

Anonymous Coward | more than 8 years ago | (#15848398)

Oh holy shit. No wonder most websites are heavy and bandwidth hogs. Devs are using the visual studio crap that generates the most horrific sites available.

REal men still code in a simple code tool. Fakers and wannabees use Visual studio.

Re:So How Do You Code an AJAX Web Page? (3, Informative)

vux984 (928602) | more than 8 years ago | (#15848672)

/shrug

Visual Studio actually has a pretty solid source code editor, with good syntax highlighting, and its code completion for css properties and html attributes is very good. (And its ability to offer effortless code completion for asp tags, AND user-defined controls is extremely helpful.) Not to mention its real-time "error" checking (improper tag nesting, mismatched tags, etc). It prevents and catches a lot of potential errors as you make them.

I do agree that doing a lot of work in the gui-designer results in bloated pages that need a ton of work to slim down and make crossplatform friendly. But nobody is forcing you to do that, and really if you know what you are doing you almost never use the visual designer mode. I only use it to drag user-controls onto the page; because in gui-mode it handles the boilerplate to register the tagprefix, etc. I also occasionally use it to create event handlers, because double clicking say a linkbutton in design view will write the boilerplate for the function signature, as well as handle the event wiring.

Like any tool, Visual Studio can be used effectively or ineffectively. When compared to most other "light tools" I find Visual Studio to be more productive -- sure I can build pages even in notepad but I make fewer typos when using the source code editor in Visual studio.

(There are other good editors too, don't get me wrong. I'm just saying that visual studio belongs among them.)

Re:So How Do You Code an AJAX Web Page? (2, Insightful)

Chunt620 (897724) | more than 8 years ago | (#15848693)

Development using Visual Studio has little to do with being a man and alot to do with wanting to complete projects within a reasonable timeframe. As a former PHP-lifer turned Visual Studio lover, I can attest to the fact that Visual Studio WILL cut your time to release numbers significantly/

Re:So How Do You Code an AJAX Web Page? (0)

Anonymous Coward | more than 8 years ago | (#15848521)

Replace "So How Do You Code an AJAX Web Page?" with "So How Do You Code an AJAX Web Page for IE only?" and your comment is correct.

Re:So How Do You Code an AJAX Web Page? (3, Informative)

Anonymous Coward | more than 8 years ago | (#15848627)

Replace "So How Do You Code an AJAX Web Page?" with "So How Do You Code an AJAX Web Page for IE only?" and your comment is correct.
ATLAS is a cross-browser AJAX framework, and Visual Studio 2005 produces valid, meaningful XHTML.

Nice troll, though.

Re:So How Do You Code an AJAX Web Page? (2, Informative)

naoursla (99850) | more than 8 years ago | (#15848781)

You forgot step zero: Download the free version of Visual Studio Express [microsoft.com] .

And in the interest of full-disclosure, I recently started working for Microsoft on Visual Studio features directly related to AJAX and ATLAS. So now this post is just ordinary spam instead of a sneaky shill.

Printer Friendly (4, Informative)

neonprimetime (528653) | more than 8 years ago | (#15848277)

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

Re:Printer Friendly (0)

Anonymous Coward | more than 8 years ago | (#15848388)

I was going to thank you now, but since I'm a procrastinator and you said so...

Re:Printer Friendly (0)

Anonymous Coward | more than 8 years ago | (#15848431)

Ok, here it comes:
Thank you.

Re:Printer Friendly (1)

Ced_Ex (789138) | more than 8 years ago | (#15848659)

He said LATER!!!!

I'd post my 20-line AJAX function... (1)

The MAZZTer (911996) | more than 8 years ago | (#15848319)

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

abcdefghijklmnopqrstuvwxyz (0)

Anonymous Coward | more than 8 years ago | (#15848399)

abcdefghijklmnopqrstuvwxyz

Re:I'd post my 20-line AJAX function... (0)

Anonymous Coward | more than 8 years ago | (#15848450)

web 2.0 != the code that runs web 2.0

Re:I'd post my 20-line AJAX function... (2, Funny)

DigitalRaptor (815681) | more than 8 years ago | (#15848510)

Slashdot isn't anti Web 2.0, it's dissing your code... calling it lame garbage.

But don't take it personally.

Re:I'd post my 20-line AJAX function... (1)

pete6677 (681676) | more than 8 years ago | (#15848548)

That's to block the ASCII goatse that used to be so common on this site. Those were the days...

Careful of the scrubbing bubbles (0)

Anonymous Coward | more than 8 years ago | (#15848324)

You need to watch what you mix with ajax because it can become lethal

HTTP, time to update? (2, Interesting)

not already in use (972294) | more than 8 years ago | (#15848357)

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.

Re:HTTP, time to update? (3, Interesting)

suggsjc (726146) | more than 8 years ago | (#15848374)

I can see both sides of the argument, but do you really want a two-way connection through your browser?

Re:HTTP, time to update? (2, Informative)

not already in use (972294) | more than 8 years ago | (#15848451)

I assume you are indicating that it may be a security issue on the client side, but I don't see it allowing for any more malicious activity than there already is. The onLoad tag of the body element can fire up an XMLHTTPRequest that gets a response from the server automatically. This would be no different than the server polling the client if such a connection were possible. I think it would be more of a performance issue on the server end, having to host so many live connections.

Re:HTTP, time to update? (0)

Anonymous Coward | more than 8 years ago | (#15848503)

Of course you do. Think about it. You click on a link and your screen is filled with goatse. And you don't even have to do anything for it. That's rich client for you!

Re:HTTP, time to update? (2, Insightful)

baadger (764884) | more than 8 years ago | (#15848650)

Better question, do you really want to be at the server end of a slashdotting consisting of persistent connections?

Re:HTTP, time to update? (3, Insightful)

suggsjc (726146) | more than 8 years ago | (#15848710)

The real questions are:
  1. What do we want the web to be?
  2. What role will HTTP play in the answer to #1
  3. If the answer to #2 is fall by the wayside, then who is going to create its succesor?
  4. Then, after the answer to #3 is figured out...do you really want to be at the server end of that connection?

Re:HTTP, time to update? (3, Informative)

Civil_Disobedient (261825) | more than 8 years ago | (#15848456)

Yes, there are ugly hacks to keep a connection alive, but it is exactly that, a hack, and introduces problems of it's own.

There are some ugly hacks to allow the server to "push" to the client (embedded flash objects, never-closed-connections, etc.)--mostly encapsulated by the moniker COMET [ajaxian.com] (get it? Ajax... Comet...)

But if you get to pick your app server, there are some ready-made solutions. The problem with traditional web servers is their IO method. It's not their fault that the HTTP spec is out-of-date, but there are already new developments on the horizon that get around the current limitations. Take a look at GlassFish [java.net] , Sun's new open-source enterprise application server, and pay particular attention to NIO [sun.com] socket writes. The performance benefits of NIO over straight IO are astonishing [java.net] , with the side-benefit that it supports server-push out-of-the-box.

Re:HTTP, time to update? (1)

not already in use (972294) | more than 8 years ago | (#15848498)

Wouldn't that force you to write your applications in Java? The beauty of ajax is being able to do so much with just an HTTP server, a server side scripting language, javascript and html.

Re:HTTP, time to update? (4, Insightful)

richdun (672214) | more than 8 years ago | (#15848591)

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.

Re:HTTP, time to update? (2, Interesting)

catbutt (469582) | more than 8 years ago | (#15848644)

I think the more limiting issue is that it is so hard to do AJAX across domains. XMLHttpRequest doesn't work, nor do hidden iframes. I think no one has put too much thought into what the potential of this is if it could be done.

However, they appear be building something at Ajaxlets.com [ajaxlets.com] that is supposedly a clean, open source solution to this, by packetizing the data in javascript script urls. Apparently their release is a few days off.

Re:HTTP, time to update? (1)

Tiles (993306) | more than 8 years ago | (#15848817)

HTTP 1.0 already has keep-alive connections, and already has the capability to send requests, so there's no need to update the spec.

What you're describing is making the server a client and turning the user's computer into a server, which has a number of implications. It's simply much more feasible for the user to pull content than the server to push it, especially as it leaves it up to the user's discretion when to receive updates.

Both Repetitive and Redundant (5, Funny)

Stringer Bell (989985) | more than 8 years ago | (#15848362)

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

Darkside (1)

truckaxle (883149) | more than 8 years ago | (#15848364)

If you are an AJAX coder from the darkside, then this [yahoo.com] is for you.

Notable quote "Ajax has introduced a huge attack surface"

Re:Darkside (0)

Anonymous Coward | more than 8 years ago | (#15848499)

The article mentions that MySpace was hit by the Samy worm, a worm that ran on AJAX. If I recall right, Samy was a Cross Site Scripting vulnerability that somebody took advantage of. Not an AJAX bug.

Start by not putting a tag in your title :) tag (4, Funny)

dindi (78034) | more than 8 years ago | (#15848366)

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!

Saving AJAX (4, Insightful)

Doc Ruby (173196) | more than 8 years ago | (#15848375)

How do I save an AJAX page in a given state, rather than just a state that will be "rebooted" on reload from storage?

Re:Saving AJAX (1)

LuminaireX (949185) | more than 8 years ago | (#15848435)

Use a scripting language like PHP, and pass "state" variables to it via the URL. For instance, mypage.php?state=15, might correspond to one of the x number of states you've determined your application is capable of. PHP generates the Javascript dependent upon this variable, and your AJAX reads from that. It's a primitive hack, but it would work in simple cases

Re:Saving AJAX (3, Insightful)

liquidpele (663430) | more than 8 years ago | (#15848464)

I have 2 functions: setSVAL(key,value) and setDVAL(option,value) the SVAL calls a php library that simply sets a session variable for the user to some value. This can be used to save settings you want reloaded when the page reloads. The DVAL calls a php library that checks the option, and then inserts the value into a specific section of the database so that the user can save settings there without reloading the page. These seem to work pretty well for me anyways, but others will save all the data into some format as a cookie that can be read by both the server and the javascript which is probably the easier solution for very large apps. My main problem with AJAX: submitting a form without reloading the page! Any easy way to do that?

Re:Saving AJAX (2, Informative)

Mateo_LeFou (859634) | more than 8 years ago | (#15848668)

'submitting a form without reloading the page! Any easy way to do that?' I must've misunderstood the question but can't you just do an image submit button with onClick=sendFormStufftoPHPScriptThatDoesWhatever() using the xmlhttpreq object?

Re:Saving AJAX (1)

liquidpele (663430) | more than 8 years ago | (#15848846)

I think everyone misunderstood what I asked... Basically, I want for the onsubmit() function for the form to:
1. run through each element in the form and get the name and values of the elements.
2. do the regular old ajax thing to submit the form to save the data.
I'm lazy and I'm hoping that exists already. Anyone have nice cross-browser code that does that?

Re:Saving AJAX (1)

Osty (16825) | more than 8 years ago | (#15848673)

These seem to work pretty well for me anyways, but others will save all the data into some format as a cookie that can be read by both the server and the javascript which is probably the easier solution for very large apps.

Cookies and session states are ephemeral. The OP's question could be restated as, "How do I bookmark a specific view of an AJAX web page?" This is the same problem browsers have with framesets -- the bookmark just doesn't contain enough information to tell you what page you had in which frame at the time of saving the bookmark, and it can't persist the state of an AJAXy page. The only real solution for this involves changes in browsers.

My main problem with AJAX: submitting a form without reloading the page! Any easy way to do that?

Hook the form's onsubmit event and cancel event bubbling. Simple. Of course, you'll need to do that in a cross-browser compatible way, which means different event attaching/detaching semantics, different event callback signatures, different ways to cancel event bubbling, etc. Any good AJAXy framework should standardize most of this for you (for example, Atlas standardizes on IE's attachEvent/detachEvent with implementations of those for Firefox -- I don't like that they chose to use the old broken IE way rather than the correct w3c/Firefox way, but the point is that compatibility is handled for you under the covers), but you'll probably still need to sort out callback signatures and event bubble cancelling on your own.

Caveat: If you do hook onsubmit, you'll have to take care of form submission yourself (via a POST with XMLHttpRequest, for example), because you're cancelling the submission.

Re:Saving AJAX (1)

tinkerghost (944862) | more than 8 years ago | (#15848685)

Submitting a form is simple, use a post datastring in the object.send() line - and set it to 'post' not 'get' in the open statement.

Re:Saving AJAX (1)

restive (542491) | more than 8 years ago | (#15848790)

My main problem with AJAX: submitting a form without reloading the page! Any easy way to do that?

If you're not opposed to using a framework, use Ajax.Updater [aculo.us] from script.aculo.us

Re:Saving AJAX (4, Funny)

crabpeople (720852) | more than 8 years ago | (#15848465)

prt scr

Re:Saving AJAX (1)

Civil_Disobedient (261825) | more than 8 years ago | (#15848481)

How do I save an AJAX page in a given state

Set up variables as parameters in the URL that hold the state (for bookmarking). If you can control your form values, throw in some hidden fields that hold the info on page load. If the values are empty, the ajax request uses the default, otherwise is preloads your values.

Re:Saving AJAX (1)

Siberwulf (921893) | more than 8 years ago | (#15848730)

In .NEt, you can access the HttpContext.Session object by putting HttpSessionStateRequirement.ReadWrite in your AjaxMethod() declaration.

Iframes (1)

bobs666 (146801) | more than 8 years ago | (#15848380)

I use iframes, no java needed. I have tryed PELR::AJAX,
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.

Re:Iframes (1)

bw-sf (937673) | more than 8 years ago | (#15848566)

What's Java got to do with anything? And what's Perl got to do with browser compatibility? Weren't you using Java a minute ago? I suspect you have no idea what you're doing.

Re:Iframes (1)

goodenoughnickname (874664) | more than 8 years ago | (#15848779)

Was that a haiku?

Huh (5, Insightful)

Bogtha (906264) | more than 8 years ago | (#15848383)

Print version here. [computerworld.com]

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 [quirksmode.org] ).
  • 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).

There are much better intros to Ajax (5, Informative)

njdj (458173) | more than 8 years ago | (#15848389)

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 [www.xul.fr] and here [mozilla.org]

There is also an interesting library of Javascript/ECMAscript functions to perform common Ajax chores here [sourceforge.net]

Re:There are much better intros to Ajax (2, Informative)

supun (613105) | more than 8 years ago | (#15848430)

I like Sarissa, but have moved onto using Dojo http://dojotoolkit.org/ [dojotoolkit.org] due to it's friendlyness to JSON. Much easier accessing a returned object that walking the DOM.

Java and Ajax (1)

coldtone (98189) | more than 8 years ago | (#15848390)

If your a Java coder Icesoft has a great AJAX framework icefaces [icesoft.com] .

Re:Java and Ajax (1)

coldtone (98189) | more than 8 years ago | (#15848406)

Found a good demo link Here [icesoft.com]

Don't overdo the XHR (1)

JesperJ (900341) | more than 8 years ago | (#15848439)

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.

Re:Don't overdo the XHR (1)

tmasssey (546878) | more than 8 years ago | (#15848550)

They're working on it.

I'm participating in an AJAX adaptation of /.'s comment page. It has some functionality for controlling exactly which comments are visible and not. Seeing as I browse at a pretty low level already (not -1, but close), these features have been uninspring for me. But the ability to click on a collapsed comment and get it to come up, or to collapse an entire tree that's spiralled out of control without having to refresh the entire page is *gold*.

P.S.: Does anyone know of a way to get a paragraph break without wrapping the entire paragraph in <P> and </P> tags?

Re:Don't overdo the XHR (1)

Jett (135113) | more than 8 years ago | (#15848819)

Have you guys seen the dailykos comments? They are by far the slickest comments I have ever seen and one of the best implementations of AJAX methods outside of Google.

Use Echo2 (4, Informative)

Mock (29603) | more than 8 years ago | (#15848448)

1. Download Echo2 http://nextapp.com/platform/echo2/echo/ [nextapp.com]
2. Write AJAX applications like you would a Swing app, never touching HTML or Javascript.
3. Go outside and play.

'nuff said.

Re:Use Echo2 (1)

timeOday (582209) | more than 8 years ago | (#15848732)

That's pretty cool. Here's their demo [nextapp.com] . After clicking through this, I have to say: for all the mockery of "Web 2.0" around here, there is a HUGE change from 10 years ago (writing static pages in html) to this demo (writing what appear to be fairly normal applications in Java, where supposedly the developer avoids the grab-bag of "web technologies" altogether). I realize the exact choice of when to use a new major version number is somewhat arbitrary, but things really have changed. Too bad it's almost impossible to write a fully functional web browser from scratch anymore, but could it be that real, general-purpose hosted office apps are finally becoming a reality?

How do I? (0)

Anonymous Coward | more than 8 years ago | (#15848468)

With the CGI::Ajax Perl module: http://perljax.us/ [perljax.us]

Well written (1)

Morinaga (857587) | more than 8 years ago | (#15848474)

I'm no expert when it comes to coding up a web page. The page I'm responsible for in my little corner of my organization I just update with straight HTML edits in notepad. I can't vouch for the technical expertise of this author but I for one appreciate technical material that is easy to read and God forbid, a pleasant experience.

What is AJAX?

As stated previously, AJAX stands for Asynchronous JavaScript And XML, but what exactly does that mean? Is the developer limited to only those technologies named? Thankfully, no, the acronym merely serves as a guideline and not a rule. In some ways, AJAX is something of an art, as with cooking. Consider, for a moment, the dish called shrimp scampi; I've had it in restaurants up and down the East Coast of the United States, and it was different in every restaurant. Of course, there were some common elements, such as shrimp, butter and garlic, but the plethora of little extras added made each dish unique.

The same can be said of AJAX. Starting with a few simple ingredients, such as HTML and JavaScript, it is possible to cook up a Web application with the feel of a Windows or, if you prefer, a Linux application. You might have noticed earlier that my ingredients list omitted XML; the reason for that omission is that XML is one of those optional ingredients. This might sound strange because the x in AJAX stands for XML, but it is also useful in those instances when a particular client does not support XML or doesn't support some of the more "mad scientist" methods of communicating with the server.

AJAX, yummy.

AJAX (-1, Offtopic)

Anonymous Coward | more than 8 years ago | (#15848483)

AJAX is a joke
 
Slashdot is a joke
 
You are a joke

Oh yeah? (5, Funny)

The_REAL_DZA (731082) | more than 8 years ago | (#15848768)

AJAX is a joke

Slashdot is a joke

You are a joke

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

Re:Oh yeah? (0)

Anonymous Coward | more than 8 years ago | (#15848801)

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

Maybe you checked "post anonymously" by mistake?

Solution looking for a problem? (2, Insightful)

catbutt (469582) | more than 8 years ago | (#15848512)

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.

You don't... (1)

ncannasse (976609) | more than 8 years ago | (#15848522)

To use AJAX... you don't write Javascript ! Use instead GWT or [google.com] haXe [haxe.org] .

Nobody calls XmlHttpRequest() directly anymore (4, Insightful)

IGnatius T Foobar (4328) | more than 8 years ago | (#15848575)

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 [conio.net] 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.

Re:Nobody calls XmlHttpRequest() directly anymore (3, Informative)

richdun (672214) | more than 8 years ago | (#15848697)

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.

What does that do that this doesn't (other than use a pretty wrapped package)? This is the general form I use for my AJAX requests. If needed, I add some checking to cancel previous requests to the same method or queue successive calls so that the race for responses doesn't screw me up. It seems to work in all browsers I test for (IE6, FF 1.5+, Opera 9+, Safari 2+...and yes, I force my users to use modern browsers).

if (window.XMLHttpRequest) {
        var oHttpRequest= new XMLHttpRequest();
}
else if (window.ActiveXObject) {
                var oHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

function ajaxCall (page,params,responseHolder) {
        oHttpRequest.onreadystatechange=function()
                if(oHttpRequest.readyState==4) {
                        document.getElementById(responseHolder).innerHTML = oHttpRequest.responseText;
                }
        }

        oHttpRequest.open("POST",page,true);
        oHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        oHttpRequest.send(params);
}

Re:Nobody calls XmlHttpRequest() directly anymore (2, Insightful)

IGnatius T Foobar (4328) | more than 8 years ago | (#15848742)

What does that do that this doesn't (other than use a pretty wrapped package)?

Well, for one thing, where you wrote 16 lines of code, doing the same thing in Prototype would have taken 1 line of code. Isn't that the point of wrapper libraries? To make repetitive, commonly used tasks like this one more convenient? (Not to mention, the 1-line Prototype call would also work in IE5 and FF1.0)

Re:Nobody calls XmlHttpRequest() directly anymore (1)

richdun (672214) | more than 8 years ago | (#15848804)

Isn't that the point of wrapper libraries? To make repetitive, commonly used tasks like this one more convenient?

Absolutely. I just consider myself still in the learning phase of the AJAX part of my web apps (good with PHP, good with XHTML/CSS, not so great with advanced Javascript), so I like to do some of the common repetitive things so I'm not doing a typical plug and chug job at coding without understanding well what's going on underneath. It's mostly just for my own benefit - I see too many jump into libraries without understanding really what they do, and then throwing their hands up when the library does something they weren't expecting. But it's good to know that Prototype works that well - I'll have to look into it once I'm a bit more comfortable with what I'm doing.

IE5...pfft...compatibility...who needs that?

I failed to mention that I develop mostly internal apps for a very small organization, not for public consumption, so I can get away with demanding that everyone has a particular class of browser.

AJAJ, not AJAX (1)

Vraylle (610820) | more than 8 years ago | (#15848845)

We ended up creating our own library for our browser-based game. There weren't any good freely available ones when we started. Data is returned in JSON instead of XML, where each key=>value pair indicates a bit of script that is executed or a DOM object that is updated (rough overview). If the object is a div, the value goes into innerHTML or the textNode; if it's a button it goes into the caption; for a checkbox the value is parsed into the checked property, etc. A single returned "set" will have several of these, so it often sends back a small chunk of HTML, with subsequent orders setting its contents and adjusting the interface.

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.

Real world issues... (1)

Aeomer (990057) | more than 8 years ago | (#15848579)

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. ;-)

Re:Real world issues... (0)

Anonymous Coward | more than 8 years ago | (#15848630)

Uhh, What?

I don't mean to go on a rant here but your post about the pseudo-autonomous regions that make up the United States makes about as much sense as a Beowulf having sex with Robert Fulton at the first battle of Antedem. I mean when a neoconservative defenestrates it's like Riskalnikov filabuster dioxymonohydroxinate.

Re:Real world issues... (0)

Anonymous Coward | more than 8 years ago | (#15848712)

I don't mean to go on a rant here but your post about the pseudo-autonomous regions that make up the United States makes about as much sense as a Beowulf having sex with Robert Fulton at the first battle of Antedem. I mean when a neoconservative defenestrates it's like Riskalnikov filabuster dioxymonohydroxinate.


Seems they don't teach lateral thinking in the Gud Ol' US of A.

AJAX and Search Engines (2, Insightful)

big_a (112626) | more than 8 years ago | (#15848601)

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.

Not Magic (2, Informative)

MattW (97290) | more than 8 years ago | (#15848623)

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 [dojotoolkit.org] , 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 [openrico.org] . 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.

No for me! (0)

Anonymous Coward | more than 8 years ago | (#15848636)

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

Article writer looking for a brain (1, Insightful)

Anonymous Coward | more than 8 years ago | (#15848649)

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.

how lame (-1, Troll)

Anonymous Coward | more than 8 years ago | (#15848711)

Slashdot is so limp anymore. It jumped the shark about the same time it added a political section but neglected to remove the over and underrated mods even tho cmdrtaco claims he's against them now too.
 
dumb editors with dumb goal and too many flamebait articles...
 
Digg anyone?

Cred went to zero in the summary (2, Interesting)

YU Nicks NE Way (129084) | more than 8 years ago | (#15848723)

the XMLHTTP Request object, which has been around for several years as a solution looking for a problem, there is nothing weird needed
OK, so this guy doesn't even know that HttpRequest was added to MSXML to allow OWA 2000 -- you know, the first Ajax client -- to work. SOunds like he's got some technical issues to work through first.

In Soviet Russia... (0)

Anonymous Coward | more than 8 years ago | (#15848741)

...AJAX codes YOU!!

Re:In Soviet Russia... (1)

RafaelGCPP (922041) | more than 8 years ago | (#15848770)

A good joke never gets old...

Speaking of AJAX... (5, Interesting)

Chabil Ha' (875116) | more than 8 years ago | (#15848844)

Why doesn't Slashdot implement it? This would be especially nice for expanding/collapsing in the discussions.
Load More Comments
Slashdot Login

Need an Account?

Forgot your password?