AJAX: the technology behind Googlemaps/Gmail

[Darren Dirt]

 Javascript + XML + no page reloads = AJAX:

AJAX is a simple technology that all the major browsers already support. As you will see shortly, the only prerequisite for AJAX implementation is knowledge of JavaScript.


How AJAX Works

If you've used the Gmail Web client or Google Maps you probably noticed that you can scroll over the map or spell check the typed text, respectively, without page submits. AJAX, the technology behind this behavior, handles the requested operations in _JavaScript and asynchronously invokes the server-side operations that provide the desired results.

Sounds intriguing...

http://www.devx.com/webdev/Article/28456

"Microsoft to Add AJAX Capabilities to ASP.NET": http://www.devx.com/webdev/Article/28530



...or maybe to get the same effect, just use a Flash + XML framework, "OpenLaszlo": http://www.devx.com/webdev/Article/28641

OpenLaszlo leverages Macromedia's virtual machine for runtime execution of its scripts; applications developed in OpenLaszlo run as Flash applications, natively within the Macromedia Flash Player. This is in contrast to AJAX-based applications such as Google's Gmail Web client or Google Maps, which use JavaScript to asynchronously invoke the server in order to perform dynamic zooms and scrolls, spellchecking, and other server-side operations.

Oh if only I had the time to learn such things  :huh:

[Shayne]

 We are already using this technology in my office.

AJAX isnt a technology though.  Its just javascript

[TheDruid]

 I seem to remember my first encounter with this technology by making a small chat program for our app over a year and a half ago using JavaScript, XmlHTTP, and DHTML.

It's funny how this industry can wrap a new buzz word around old technology and create a total frenzy out of it. So i guess i already have 2 years experience with it!

But really though, buzz word or not it is a nicer UI experience for the user then the classic postback style. Ajax plays a major part in the next version of our application.

[Mr. Analog]

 It's obvious to you and I thedruid because we were pioneers in this area (not to many people were combining XMLHTTP with Script and XML the way we were two years ago). This is someone taking all those concepts and harmonizing them and trying to wrap them up in a standard.

One of the very first things I did with ASP.NET was call an ASP page that sent / recieved XML via XMLHTTP, it was mostly thanks to the O'Reilly book on JavaScript that opened my eyes to the possibilities of XMLHTTP. I wrote a very basic version of the chat that you eventually wrote thedruid, I even had a crude way of being able to share a single text window between them with a "token" which would allow only one person involved in the chat to edit the text at a time.

I had that project in a zip file on the F drive way back when under my folder there, I wonder if any of that crap is still around? (If it is it was coded under the Beta framework, since the 1.0 hadn't been released yet).

[Mr. Analog]

 Incedentally, the thing I like the most about XMLHTTP is that it offers a nice little way to have multiple things load dynamically without having to visibly POST/GET all the time

[Shayne]

 Its got some great potential, however ive seen people comparing it to flash, in how it handles forms, the code behind a massively AJAX incorporated project could be rather messy.

We have found it useful in "options".  For example,  a user wants to moderate comments on his blog, so he checks that box; the check was actually a seamless post and a database update.

Which leads me back to an issue we've already had.  A user likes to "Save" things. So we actually created more confusion by removing the save button, and having it auto update.  While i suppose you could keep the save button, and then ajax the whole form, but why both with the massive javascript required when a simple post saves the day.

I played a chess game all in ajax.  sorta funky with no refresh, though i noticed IE sorta bogs down on it.  if you do things really fast you can have the browser lose itself.

[Cova]

 You guys might want to google around for Ruby on Rails if you're into this type of thing - seems to be the new fad among web developers.  It's basically an AJAX framework.  A lot of the Fragapalooza internal web-site was written with it.

[Darren Dirt]

 So in summary it seems like a few have heard of it by name, and a few more have essentially done what it entails -- perhaps without realizing it was being recognized on a growingly large scale as potentially very useful...

Any suggestion on websites that have some really good (read "heavily commented") source code that illustrates the most common functionality that is used in pretty much any implementation?

[Mr. Analog]

 Imagine you have an object in some server side language, now think about taking all the method handles,  properties, their values and listing them out in a big delimited string. Now imagine using Javascript to create an array based off of that list. You end up with a pseudo-object with loaded properties and method handles. Now imagine that you've written some other utility routines that could take a method handle and call it via a web service (over XMLHTTP), you deconstruct the object like you did before and send it back to the server as pure data with an extra command that executes the method call on the server.

In a nutshell all AJAX is is a way to serialize and de-serialize simple objects out to the client and back to the server, it is an implementation of the MVC design pattern where the View and Controller are mostly client side. It has a lot of advantages but they have to be implemented by the programmer it's just a framework that mitigates data going from a to b.

For Example:

I have a PST field that appears on a bunch of pages, I have coded a simple PST object that has the following structure:

Code Select Expand


//Properties
PROV Province

//Methods
double getPST(double amount)

Wouldn't it be handy to be able to call this object from script instead of posting back the whole page?

In JavaScript you'd make a call like...

Code Select Expand


provTax.Province = PROV.ALTA;
provTax.getPST(this.forms[0].txtAmt.value);

The handler for all methods would serialize the object(s) send them to a web service via XMLHTTP with the instructino to execute the getPST method of the provTax object (type) and return the results.

This would all happen without an apparent postback. There is also a way to do asynchronous calls, so that you could pull live data while the user sits on a page.

Again, this implementation is farily obvious to those of us who realized that certain design patterns, XMLHTTP, SOAP and Web Services mesh together in ways that are very useful. AJAX is trying to make a unified way of how you handle all the serialization stuff and service calls.

[Shayne]

 http://www.modernmethod.com/sajax/ <- AJAX for dummies.  The framework isnt bad, but i would use it as a guide, and implement your own universal solution so at least you know how the technology works.  Then again, i dont know how a CPU works, just that it does.

SOAP isnt all that great of a technology.  Its basically a massively heavy upgrade to the excellent XML-RPC.  I have found no use for the extra header information, etc.  Perhaps its slow adoptation and shotty implementation are to blame.

AJAX has better response in IE7.  Seems a few update bugs i was having are solved now.  Dunno if its my imagination (i think its still running IE6.1 renderer), but a few odd "data getting lost" issues are gone.

[Darren Dirt]

 Funny, relatively new topic of study for me, not even looking for this kinda stuff (I honestly want to spend *less* time in front of the Box Of Blinking Lights) but on the weekend I was reading up on "REST", including some interesting stuff on http://wellformedweb.org, especially explaining the differences/benefits over "RDF". So clearly I wasn't relaxing during my time off. My vacation was not nearly "rest"ful as it should have been, oops unintentional pun. Ah well I partially blame the kids for that


Interesting though I'm not so sure I want to spend the time getting all expert or such. But perhaps the "AJAX for dummies" link, "just having a quick look at it won't hurt"... (famous last words of an OCD control freak)

Ok Mr. A you can now go ahead and say it: "One of us, one of us..."

[Mr. Analog]

 Thar be those who gaze into AJAX and see madness, then thar be the rest o' us who know it already...

I love how bad grammar can mean many things, don't you?

[Darren Dirt]

 I had an idea today, that I might want to see how easy it is to have a basic glance understanding of how GMail generates the pages.

I noticed the main page "view source" is useless, so I figure check out the frameset, yup, 2 frames, frames[0].name="main" and [1].name="js".

• is useless.
  
  But [1] is the magic. And yikes, even *I* give up before even starting.
  
  
  Check it out yourself, from within your GMail account, have a glance, type this in yer address bar...
  
  javascript:alert(document.frames[1].document.body.innerHTML)
  
  
  ^ that cuts off, so if you want the entire chunk of source code...
  
  javascript:document.write(document.frames[1].document.body.innerHTML)
  ^ then do a view-source of the resulting page.
  
  
  

[Mr. Analog]

 I like the JavaScript console in FireFox

[Darren Dirt]

/. interesting discussion -- a *LOT* of pretty powerful web apps linked, but also a bunch of naysayers and whiners... (as usual for /. I guess )



http://slashdot.org/article.pl?sid=05/09/29/000223&from=rss







- - -examples- - -



Quake: http://www.quakesrc.org/forums/viewtopic.php?t=5657



Some full "office" suites: http://www.nyandu.com/weboffice/

Group note-taking: http://jotlive.com/



Fonzie Text Adventure! http://www.mrspeaker.net/ajax/fonz.html



Plus many frameworks to reduce the amount of actual programming needed, such as Echo2: http://www.nextapp.com/products/echo2/

and WebOrb: http://www.themidnightcoders.com/weborb/aboutWeborb.htm





Ignoring of course the obvious question of who will eventually pwn it all...



...and the security-fearmongering that is inevitable...