logo

How To Use Ajax?

Will I be able to squeeze an Ajax How-To in to one blog entry? Or will it need an article? Probably the latter, but I can point you in the right directions if you don't want to wait for that.

Really there's little need for me to go over how it's done again. It's well documented in lots of places already. What I will try and do is write a Domino-specific how-to. All I've got for you in the mean time is an NSF you can download.

There's a good primer on Ajax called Ajax: A New Approach to Web Applications. I'd suggest reading this first. Then you can move on to Very Dynamic Web Interfaces at O'Reilly's XML.com, which contains all the code you should need.

If you prefer to rip things apart rather than read boring articles download this database. It's got the code from the O'Reilly article already in it.

Anyway, about the code. I won't pretend you don't need at least an intermediate JavaScript knowledge to get your head round it all. The trouble is that it's not easy to separate the Ajax "logic" from your own code. There's a reason for this and it's something that caught me out for a while.

The way Ajax works is confusing at first. Your code calls a function which triggers the request for some XML. Obviously this is not an instantaneous transaction and so the code has to wait until the response has been received. Once the XML has been returned it is passed back to the same calling function for processing. Hence, this function runs twice - once to fetch the results and once to process them. What you can't do is something like the function below, where checkModifedDate() is the function which both requests the XML and processes it:

function doSubmit() { if ( checkModifiedDate( sUNID ) ) { document.forms0.submit(); }

There's a simple reason for this. The first time the checkModifiedDate() function is called it's simply calling for the XML. There's no logic involved at this point. So the if() statement always processes and the form submits. To get round this we have to move the form submit() call inside of the checkModifiedDate() function to the point where the XML is processed! This makes it harder to hide the more complicated code away in a library somewhere.

Apart from that it's fairly straight-forward stuff. I'll try and get round to an article at some point that talks about how we can use it with Domino.

Other Reading:

Comments

    • avatar
    • Mark Barton
    • Fri 29 Apr 2005 07:42

    Ah the light bulb comes on. The function calling the XMLHTTP request calls itself with an additional flag to indicate when it has data.

    I was looking at Bobs Ultimate View article and I noticed he uses a timeout loop to check to see when a value has been returned.

    The demo database works great by the way.

    Mark

    • avatar
    • Jake Howlett
    • Fri 29 Apr 2005 07:46

    Confusin' innit. Although there's no need for a timeout. I guess Bob's is there for some other reason - like waiting to make sure everything present and correct.

    • avatar
    • veer
    • Fri 29 Apr 2005 07:56

    Ok, what am I doing wrong. The demo database doesn't work for me. It happily saves from different windows.

    • avatar
    • veer
    • Fri 29 Apr 2005 07:59

    Hmm....Works from Firefox, not from IE.

    • avatar
    • Jake Howlett
    • Fri 29 Apr 2005 08:07

    Strange indeed mr veer. Not sure why. Scripting permissions? Does my online demo version work for you in IE?

    • avatar
    • veer
    • Fri 29 Apr 2005 08:16

    mr jake :)

    your online version doesn't work in my IE either ...

    • avatar
    • Jake Howlett
    • Fri 29 Apr 2005 08:27

    Which IE are you using? Works in my IE6 on XP.

  1. Mark,

    Really no difference here, I didn't want to pin the CPU by going back and forth between the two functions that make the XMLHttp call and the function that test for a result. I figured a 1/10 second pause would lighten this load slightly and be almost unnoticable to the user. All you'd have to do on mine is remove the setTimeout and call the function directly at the same spot.

  2. Maybe I'm missing the bigger picture here, but why is this suddenly so exciting?

    I've used the XML Http object in Domino and .Net projects I've worked on over the last 2 years so why is it only now that people are starting to get excited about it?

    It's been available for use since IE 5 was around I think...

    • avatar
    • Steve Smillie
    • Fri 29 Apr 2005 08:40

    I am seeing the same thing as veer.

    Works perfect in Firefox but in IE it saves the second doc without prompting.

    I am running IE 6 on WinXP Sp2.

    I agree it could be a scripting setting in IE.

  3. Giles,

    It's actually been around in some form since IE3 (I'm not so sure I believe that but I read it somewhere yesterday, and if it's in print... it MUST be true, right?)

    It's only recently that it works in Safari (1.2) and Opera (8.0). As far as I'm concerned, lack of support in those two browsers would be critical. IE only solutions... well... suck.

    • avatar
    • Jake Howlett
    • Fri 29 Apr 2005 08:50

    Giles. Why now? Why not? Now is as good a time as any. You knew about it already - good for you. Do you think everybody does? No, and they need to. That's why. Also, it's exciting, because it's now a workable solution in all the browsers and not merely IE. It will work in anything >= Opera 7.6, Safari 1.2, Firefox 1.0 and IE5.

    Steve & veer. Are you both running it on servers or locally?

    • avatar
    • veer
    • Fri 29 Apr 2005 08:57

    Jake,

    I too am running IE 6 on Win XP SP2. Running it on local. But I think putting it on the server might give the same results, as your online demo is not working for us either.

    • avatar
    • Mark Barton
    • Fri 29 Apr 2005 09:07

    Jake,

    I have no problems running the online example or locally. IE6 SP2.

    @Bob Surely the function is setting up an Event listener so there is no CPU load ? The script cant be in a continous loop until the request is returned can it ?

  4. Mark,

    This is one area where I still want to make improvements to my solution. I thought the event listener should be able to handle this without me returning to the function that makes the call... but it was failing. Yes, currently it can be in a continuous loop, but that should be easy to fix. Actually... I'm going to piggyback on the solution you sent me to just fall back to display the same thing that would be displayed in unsupported browsers. Definitly some work needs to be done here...

    • avatar
    • Niel
    • Fri 29 Apr 2005 09:47

    Jake-

    There is an option in .open to set asynchronous to false. Of course, waiting for the response could be fatal if it never comes.

    Also, the loadXMLDoc is not called twice, but the processReqChange function is called multiple times. You could make processReqChange generic by removing your code and adding something like processResponse(response) to it. processResponse could be custom for each form/page. This would allow the loadXMLDoc and processReqChange to be moved to a library.

    For your checkModified you could break out the code to only check the modified date and using setTimeout check every few ms for the results, you would need to set a maxmium timeout and decide what to do if you never get a result back.

    Not sure if this was on your site or one of site you linked to, but this article really helped me get started with this

    {Link}

  5. Niel,

    Take a look at my article @ {Link} . I'm doing exactly what you are suggesting except I don't have a maximum timeout which I need to fix (as I mentioned in the comment directly above yours where I took about continuous loops).

    The one thing Jake is doing that I really like and think I will add to my code is checking for a HTTP 200. I'd rather do that and fallback to a different solution if it fails.

    • avatar
    • Mark Barton
    • Fri 29 Apr 2005 10:33

    Bob,

    Damn I thought I had it but now I am confused again (doesnt take much).

    Correct me if I am wrong but looking at Jakes code the processReqChange function gets called 4 times 1 for each of the readyState - once it reaches 4 it continues. So the code is not in a continous loop but rather waiting for a state change.

    Are you saying Bob that when you did your view navigator the event handler never called drawViewNav() ? Because if it did you wouldnt need the timeout right ? As for handling a timeout wont that return a different HTTP status code which means you can handle it (aka non javascript version of the navigator).

    Mark

    • avatar
    • Niel
    • Fri 29 Apr 2005 11:27

    Bob-

    Saw the article, loved it! I must admit I skipped your code and looked at Julian's. One other difference to mention is I like how Julian's just uses evaluate instead of parsing of xml.

    Also, thanks for wasting about 3 hours of my day with that video link while you were updating the article. I was on that site all day watching videos! :)

    • avatar
    • Andrew Tetlaw
    • Sat 30 Apr 2005 02:25

    All this asynchronous javascript just cries out for something way cool like signals and slots from the netwindows.org project {Link}

    Basically instead of only being able to attach event listeners to DOM events it lets you connect any 2 functions so that when function 1 is called, function 2 is automatically called (and passed the same arguments by default). It does a lot of other spiffy things too.

    It's perfect for asynchronous event handling in Ajax based UIs and lets you do away with timeouts and such.

    • avatar
    • Julian M.
    • Fri 6 May 2005 15:06

    I have to concur...this demo simply does not work in IE...I'm using IE6 and it cheerfully saves both without any messages of any sort. Sorry, not excited yet. Don't ya just love sending out demos to an uncontrolled anonymous audience? ;-)

    • avatar
    • Jake
    • Fri 6 May 2005 16:57

    Julian. What would be nice from the uncontrolled audience is a little more feedback than "It doesn't work". How about finding out why or giving me a few more clues?

    I've just taken a look and found that my IE settings on this PC (different to development machine) had an effect. Make sure your cache settings don't cache anything at all.

    • avatar
    • Jake Howlett
    • Fri 6 May 2005 17:16

    Okay. Add the following line to the checkModifiedThenSubmit() function, just below the if(response) tests:

    alert(response[0].firstChild.data +"\n"+ sLastModified);

    See what that say. If they're always the same. That's the problem.

    • avatar
    • Paul
    • Wed 25 May 2005 02:05

    i am trying to call xmlHttp object twice for 2 different requests, in one go, but i am having a problem where it doesnt fully complete the first request, then deletes the xmlhttp.responseText data, and only completes the 2nd request.. however if i put in an alert(); in between it works okay, but thats not the solution..

    any help appreciated!

    thanks,

    P.

    • avatar
    • Jake Howlett
    • Wed 25 May 2005 04:12

    Interesting question Paul. Not sure exactly what order you're doing things in, but you need to understand the internal working of the XMLHTTP obect to know what it's doing and why what you're doing won't work.

    • avatar
    • Jeff
    • Wed 23 Nov 2005 12:21 PM

    How did I get to this site? I was looking for porn.

    • avatar
    • Boyzl
    • Tue 21 Feb 2006 01:45 AM

    Well - time ago from last (sensible lol) post in this blog. For those still reading this and having problems (see Julian's post): there is really problem with caching, might be on server side also.

    If you don't like to change IE settings - i overcome that problem by adding a dummy parameter (random number) which prevents using of cached files, for example like this url line instead of original one (blog example database, form Test, JSHeader):

    url = sFullPath + 'xml/' + input +'?OpenDocument&'+Math.random().

    Regards from Slovenia, B

    • avatar
    • Ian Timothy
    • Tue 28 Mar 2006 09:54 PM

    Hi. I am having problems with Ajax in my code and my browser. Running the server on my own computer and accessing it locally.

    Somehow everything seems to be going ok until the line

    XMLHttpRequestObject.send(null);

    after that, the next function which is supposed to be called on any state change never gets called. I am wondering why. Do things work differently locally?

    • avatar
    • Ian Timothy
    • Tue 28 Mar 2006 10:01 PM

    I am guessing that after I use the send command, nothing is returned and there is no state change. On my server logs, I notice there is indeed a request for that page. When I manually type in the url in my brower, I get a response. Not sure what is going on here. Thanks so much.

  6. This site is providing reliable information about AJAX to use in Domino Applications

    • avatar
    • Pebble
    • Mon 18 Dec 2006 01:37 AM

    Hello friends,

    i have been using ajax and have been having problem s lately, i am calling a function twice, to populate a combo box, my problem is that though i am calling the same function twice, only the first combo box is getting filled up, can any one help?

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 29 Apr 2005

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content