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.



Related Entries

50 people found this page useful, what do you think?

 Download FuseGuard WAF for ColdFusion

Trackbacks

Trackback Address: 514/DEA4C61049FB20F5D5B88A3C3D07F336

Comments

On 12/13/2005 at 4:54:09 PM UTC Rob Gonda wrote:
1
for ColdFusion there is also ajaxCFC, which is component based. Check http://www.robgonda.com/blog/projects/ajaxcfc for more details

On 12/14/2005 at 7:33:27 AM UTC Gary Fenton wrote:
2
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"] ];

On 12/14/2005 at 9:48:07 AM UTC Ray Horn wrote:
3
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

On 12/14/2005 at 9:58:58 AM UTC Pete Freitag wrote:
4
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.

On 12/14/2005 at 10:57:22 AM UTC Rob Gonda wrote:
5
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.

On 12/15/2005 at 8:56:24 AM UTC Radek Gruchalski wrote:
6
You can always use XMLHttpRequest (SOAPCall in Mozilla) for calling web services. In my opinion this is more flexible than few simple functions written for example in CF an JS on client-side.

On 12/15/2005 at 1:03:22 PM UTC Rob Gonda wrote:
7
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.

On 12/16/2005 at 11:16:02 PM UTC Dan Keldsen wrote:
8
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.

On 12/17/2005 at 11:09:10 PM UTC Rob Gonda wrote:
9
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.

On 12/18/2005 at 10:57:05 PM UTC Dan Keldsen wrote:
10
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.)

On 12/21/2005 at 10:57:49 PM UTC Rob Gonda wrote:
11
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

On 12/22/2005 at 9:38:38 AM UTC Dan Keldsen wrote:
12
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

On 12/31/2005 at 3:27:04 PM UTC Charlie wrote:
13
Just as a heads up ... AJAX is available on:

IE 5+ Mozilla (all) Netscape 7+ Safari 1.2+ Opera 7.6+

That's about 90% or more user-base for most websites.

On 01/09/2006 at 3:21:47 PM UTC Ray Horn wrote:
14
You can also download an AJAX-on-steroids from http://rayhorn.contentopia.net/blog straight from the Rabid CF Developer himself.

On 01/11/2006 at 7:05:29 PM UTC John wrote:
15
Ray, with all do respect, that framework is on anything but steroids... it says it does get, post, wddx, and that it is cross browser; but that is expected from any framework and there must be at least 100 that do all that and more. What about debugging or encryption? I'm sorry, but I'm not sold.

On 01/17/2006 at 9:22:39 AM UTC Rob Gonda wrote:
16
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/

On 03/24/2006 at 3:13:49 AM UTC Mike Snyder wrote:
17
You have a typo on the page.. in the MSIE activex explanation, you have this:

req = new ActiveXOjbect("Microsoft.XMLHTTP");

(object is spelled "ojbect") which won't work when you cut and paste the line as I did. :)

On 03/27/2006 at 4:21:24 AM UTC Anonymous wrote:
18
nicer

On 05/05/2006 at 11:27:09 PM UTC Todd wrote:
19
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

On 12/17/2006 at 6:51:06 AM UTC nithya wrote:
20
hi all,

Please give me some DOCUMENT regarding AJAX, it will be help full for me

On 01/08/2008 at 4:56:24 AM UTC kidanu wrote:
21
i need a complete introduction in jsp

On 02/18/2008 at 6:07:38 AM UTC anupam wrote:
22
hey there.. can u send me the copy of the presentation. if u wish!

On 10/30/2008 at 1:56:39 AM UTC Rajesh Yadav wrote:
23
kindly post some tutorial regarding ajax

On 10/08/2010 at 1:42:53 AM UTC PE wrote:
24
Ray,I have small issue with safari browser. If I check the response that I get in the callback function of Ajax request in different browsers, it shows different. for firefix it shows as XMLDocument where as for safari it shows as Document. I have problem in extracting data from the Document in safari. when i say response.getElementsByTagName("soso") this returns a HTMLCollection object with length as 1 in firefox where as it returns a NodeList object with length as 0 in safari Now as the length is 0 i m not able to proceed further. Can you help me out to understand why it is happening

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?