Pete Freitag Pete Freitag

AJAX Presentation Outline

coldfusionweb

Here's an outline of the presentation on AJAX that I gave today at my ColdFusion users group meeting.

What is AJAX?

  • Asynchronous JavaScript + XML
  • XMLHttpRequest Object
  • A geek marketing term
  • Rich Internet Applications with JavaScript

Examples of AJAX

  • GMail
  • Google Maps
  • Basecamp

Is it new?

  • Not Really
    • Hidden Frames
    • IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+

Why is it popular?

  • Google helped popularize, and legitimize it in GMail
  • Increase Usability of Web Applications
  • Rich Internet Applications without Flash
  • Save Bandwidth
  • Download only data you need
  • Faster interfaces (sometimes)

Why is it bad?

  • Breaks back button support
  • URL's don't change as state changes
  • Cross Browser Issues can be a pain
  • JavaScript may tax older machines CPU
  • Can't access domains other than the calling domain
  • May be disabled (for security reasons) or not availiable on some browsers

Flash vs AJAX

  • No plugin for AJAX
  • Flash development tools cost money
  • Flash typically has slower page load time
  • Flash can work on older browsers
  • ActionScript doesn't havea cross browser issues
  • Flash can access other domains if there is a crossdomain.xml file

XMLHttpRequest

  • A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript
  • Make an HTTP request from a JavaScript event
  • A call back JavaScript function is invoked at each state of the HTTP request and response

XMLHttpRequest Properties

  • onreadystatechange - call back function for state changes
  • readyState - the current state of the HTTP call
  • responseText - the text result of the request
  • responseXML - DOM xml object from the request
  • status - HTTP status code of the response
  • statusText - HTTP status text

XMLHttpRequest Example

if (window.XMLHttpRequest) {
       var req = new XMLHttpRequest();
       req.onreadystatechange = requestStateHandler;
       req.open("GET", "/somefile.xml", true);
       req.send("");
}

function requestStateHandler() {
 if (req.readyState == 4) { //response ready
       alert(req.statusText);
 }
}

IE does it different

  • The above example however won't work on IE
    • req = new ActiveXOjbect("Microsoft.XMLHTTP");
    • You can't totally blame them because they invented it
    • Native XMLHttpRequest support should be in IE7

Cross Browser AJAX

var req;

function loadXMLDoc(url) {
	req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
    	try {
			req = new XMLHttpRequest();
        } catch(e) {
			req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	req = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		req = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		req = false;
        	}
		}
    }
	if(req) {
		req.onreadystatechange = processReqChange;
		req.open("GET", url, true);
		req.send("");
	}
}

Source: http://developer.apple.com/internet/webcontent/xmlhttpreq.html - a great AJAX tutorial BTW.

AJAX Libraries

  • Many people opt for AJAX libraries. This can ease development, but also adds bloat.

Prototype Example

I posted the AJAX prototype example that I showed in the presentation in another entry.


Like this? Follow me ↯

AJAX Presentation Outline was first published on December 13, 2005.

If you like reading about ajax, presentation, xmlhttprequest, javascript, or xml then you might also like:

FuseGuard Web App Firewall for ColdFusion

The FuseGuard Web Application Firewall for ColdFusion & CFML is a high performance, customizable engine that blocks various attacks against your ColdFusion applications.

CFBreak
The weekly newsletter for the CFML Community


Comments

Two comments. 1. If you can understand how AJAX works using the 10 or so essential lines of Javascript then don't bother with frameworks or libraries since it adds functions that you probably will never use and can produce 10x more Javascript code, plus extra back-end CF code which has a performance impact (end users and servers). It's easier to understand the basic Javascript httprequest object and code it yourself than use the AJAX libraries. (I know some will disagree, but this is my opinion).

2. I've found sending Javascript arrays rather than XML from CF to the browser faster and easier. Less code and Javascript is brilliant for working with arrays, especially if you use short notation to create them which CF can do with minimal code.
e.g. var myArray=[ ["value","key"], ["value","key"] ];
by Gary Fenton on 12/14/2005 at 7:33:27 AM UTC
Actually you can perform AJAX Get's cross domains however "POST" functions are limited to a single domain. The IFRAME technique is not limited by cross-domain issues and using IFRAMEs can be faster at runtime due to the ability to manipulate raw data more easily between CF and JavaScript, IMHO.

You can read my blog via http://rayhorn.contentopia.net/blog
by Ray Horn on 12/14/2005 at 9:48:07 AM UTC
Ray, are you sure? I've tried doing cross domain GET's and it doesn't work.

But yes I agree the IFRAME method is better for some apps.
by Pete Freitag on 12/14/2005 at 9:58:58 AM UTC
Indeed, I strongly disagree. Yes, you can perform an ajax call with a few JavaScript lines, but the frameworks standardize process, and allow for easily adapt to different scenarios. For instance I can quickly change my calls from asynch to synch, and from get to post& I can also serialize all my complex objects in the background and make them natively accessible to ColdFusion. Perhaps, it does add a few additional lines of code, which 33k of code & not a big deal; furthermore, after it has been downloaded once it gets cached anyways.

As for the ColdFusion side, extending an base class makes it extremely easy for the CF developer. All he has to do is write a function just as if he would write it for a CF page& nothing changes& the ajax call will do the rest.
For your second comment, I concur. ajaxCFC sends JavaScript arrays back to the browser instead of XML, and its automatically picked up by the call-back function; not in key pairs like you mentioned, but real arrays and structures& I hate to loop over an array and check for a key pair& there are more efficient ways of handling recordsets.

As far a cross domain, get vebs do work. I would personally stay away from the iframe method & I used that about 5 or 6 years ago & Its no longer needed.
by Rob Gonda on 12/14/2005 at 10:57:22 AM UTC
I love Mozilla and FF is my preferred browser& but I know for fact that only about 5% of the users that browse my site are using it; so its not a viable option. Commercial sites have to satisfy all type of users, even Safari, lol & Thats another advantage of frameworks, they make your code compatible with most browsers automatically& it takes that load of your back.
by Rob Gonda on 12/15/2005 at 1:03:22 PM UTC
Out of curiosity Rob, why the comment on Safari? Seems to have far less issues with javascript, css, and yes AJAX, etc. than the bug-ridden wonder of IE/Win - although it can get a bit unstable if left running for days and days and using AJAX heavy sites.

Not giant martketshare of course, but most Mac users I know are using Safari if they've made the OS X transition.
by Dan Keldsen on 12/16/2005 at 11:16:02 PM UTC
Dan, I suspected someone would ask. I'm just not a big fan of Safari (personal preference); I actually find it (version 1.3) extremely buggy with both JS and CSS. I know most of the ppl who transition to Mac use Safari 1.3, because it's the default browser & but it also comes with IE 5.2, which is even worse.

Mac's do not have a huge marketshare, although I work with dozens of ad agencies, and they all use them& so I definitely have to accommodate for that.

However, I disagree with you on IE& I do not like IE, especially from a developer stand point& it's _intelligence_ auto fixes bad css and bad JS syntax, making it work only on IE and not in any other browser & but at least it works & Safari on the other hand gives me a headache every time I need to ensure that the L&F will look the same as IE or FF.

Back to AJAX and Safari & Safari requires some tweaking to work properly & it auto encodes XML request packets, so you need to know to decode them before using them in the server side & and then DOM & I hear Safari 2.0 fixed some issues, but again, 1.3 is missing a vast amount of functionality, making it extremely more difficult to develop nice Web 2.0 applications.
by Rob Gonda on 12/17/2005 at 11:09:10 PM UTC
Rob - Thanks for responding - and just curious on your thoughts re: Safari.

I don't have nearly the experience that you do in this realm, so wouldn't dream of arguing the finer points of the good, bad and ugly of the many ways in which the plethora of browsers out there wreak havoc, making coding by multiple exceptions or lowest common denomiator the norm. Sounds like we're in agreement in general there in any case. None of these browsers is perfect, eh?

On the AJAX front, I definitely agree that IE/Win has much more going for it, since Microsoft did after all invent the XMLHttpRequest Object (an overnite sensation after only 5, 7 years?) - but the giant stack of bugs relating to CSS, HTML, XHTML that everyone is forced to learn to get even basic pages/sites into reasonable shape is enough to drive one to drink! My experience thus far is that Safari tends to act much like Firefox on the display side, which tends to simplify at least SOME of the work.

Layering on top of those issues, the fun in dealing with AJAX/Web 2.0 functionality - I heartily applaud you and the other folks that are blazing a path here and sorting out the bugs to create such a more dynamic and fluid web experience. 2005 has been a heck of year for this, eh? Looking forward to 2006.

Looking back at your last comment incidentally - sites that I have worked on, or other companies that I have asked about traffic patterns seem to register more Safari 2.x users than prior versions, for the Mac traffic that they are getting.

Sounds as though the users for your sites/projects haven't leashed themselves a Tiger yet - a shame for them to miss out on the better Safari experience, speed bump (every version of OS X is faster than the last - what a concept) and far more solid OS in Tiger.

Cheers,
Dan

(ah, and to make sure I'm not hallucinating - do you have a book on AJAX out? If so, I'm not finding it via Google, Amazon, etc.)
by Dan Keldsen on 12/18/2005 at 10:57:05 PM UTC
Dan, we're mostly on the same page indeed, those were my personal thoughts of Safari; I know many people who use it and have no complains, but if I had a Mac, I would definitely use FF. I have two Macs at the office that I use to QA our sites before launching them.

I wasn't talking about some specific users; I am CTO for iChameleon Group (www.ichameleongroup.com) and I look at stats for all our major sites. For example, these stats come from a site that I cannot disclose, with about 500,000 unique hits a month.

83% IE
10% FF
3.8% Safari

About 50% are 1.3 and 50% 2.0 ... so about 1.9% of my average users use Safari 1.3, lol...

And if I look at my international sites, i.e. for South America, it's actually 0%.

Anyways, back to the point ... I just ran into a problem yesterday ... I wrote a form validation tool in ColdFusion to mimic Flex 2.0 functionality, and I found that it works perfectly in IE, FF, Opera, Netscape, but Safari does not want to color the borders of the required inputs; small CSS compatibility issue. I also had issues auto resizing iframes... and huge issues with Flash ... especially performance, and streaming flv's, but those two are Macs in general ...

AJAX for Safari works perfectly after I decode the URL string in the server side.

Btw, thanks for the complements... but I didn't write a book ? not yet at least --. I wrote some articles for sys-con, I am speaking at a couple of seminars, a webcast for Reuters, and developed a ColdFusion-Ajax framework :) ... but I still haven't had time for a full book... good idea though, I will consider it.

Check out (sorry for the spam) :)
http://coldfusion.sys-con.com/read/138966.htm
http://coldfusion.sys-con.com/read/154244.htm
http://www.ajaxseminar.com/
http://www.robgonda.com/blog/projects/ajaxcfc/

oh yes... I am so glad Microsoft publicly announced they ceased support for IE for Macs:
http://www.microsoft.com/mac/products/internetexplorer/internetexplorer.aspx?id=internetexplorer

Best,

-Rob
by Rob Gonda on 12/21/2005 at 10:57:49 PM UTC
Rob - Thanks for all the details, always interesting to hear specifics about real-life deployments.

I have not spoken to the Safari team, but you might want to get in touch with Dave Hyatt and that crew (http://webkit.opendarwin.org/blog/) to report the issues you've mentioned. I do agree though, for some reason Flash can have very poor performance characteristics on Macs.

Having peered a fair amount into the book writing/publishing process (several of our people at Delphi Group - http://www.delphigroup.com/ - have written books over the years), I wouldn't necessarily recommend doing it - particularly for technical writing, it's quite a process to go through. Be prepared to lose whatever spare time and previously occupied time you had to the process! But Fame (perhaps) and fortune (not quite) are yours to be had! :)

Articles, seminars, webcasts - much easier to make progress on in reasonable amounts of time and effort...

If all of these technologies just worked as they would, what would we all do with our spare time?

Great chatting with you here - and I'm sure we'll run into each other here or elsewhere in the "blogosphere" - keep up the good work.

Cheers,
Dan
by Dan Keldsen on 12/22/2005 at 9:38:38 AM UTC
Check out what people think about Ray Horn:
http://www.robgonda.com/blog/index.cfm/2006/1/17/CF-developer-with-30-years-of-horrible-experience
http://clearsoftware.net/index.cfm?mode=entry&entry=D87EDD28-E081-2BAC-69B923575744C5F4
http://dynamicflash.com/2006/01/how-not-to-develop-any-software-let-alone-open-source/
by Rob Gonda on 01/17/2006 at 9:22:39 AM UTC
Gary,
I agree with your stance on frameworks which is why I came up with a much smaller Ajax API called JSMX. It gives the advantage of standardizing your calls without the framework "bloat". It is definitely more then 10 lines of code but is confined to just one JavaScript file. easy to use and implement. No Server Side includes needed other then what you write yourself for each call. You should check it out at http://www.lalabird.com
by Todd on 05/05/2006 at 11:27:09 PM UTC
hi all,

Please give me some DOCUMENT regarding AJAX, it will be help full for me
by nithya on 12/17/2006 at 6:51:06 AM UTC
kindly post some tutorial regarding ajax
by Rajesh Yadav on 10/30/2008 at 1:56:39 AM UTC