Page 1 of 1

AJAX is the answer - how to get started?

Posted: Tue Jan 22, 2008 11:50 am
by batfastad
Hi everyone

I'm currently building an intranet database application to manage our company invoicing/contact information
I'm gradually migrating it from our current FileMaker system over to PHP/MySQL, and there's many improvements that this will allow me to make!

Part of the new system is a way for users to create timed events and notes... eg: to call/email a particular person on a certain day/time

In the old FileMaker system, you would specify a date and then on that date the user would be sent an e-mail to their mailbox informing them of the task/schedule item.

In addition to that, I'd also like to be able to pop up a small window in their browser informing them of the task/schedule event at a particular time
Obviously for that to work they'll need to be browsing the intranet application for the popups to trigger. The user will be able to choose whether they want email alerts or popup window for each schedule item they create.

Rather than triggering these popups when they load a new page (not ideal if a user leaves their browser idle, as they won't be informed of the event until they refresh the page).

I'd like to have an AJAX script that runs every 5 minutes to check if there are any overdue notifications and pops up a window automatically if there are any.
So the AJAX script calls a PHP script which delivers some XML output of the overdue tasks, if there are any.

Writing the PHP script and delivering the XML output is easy... so long as I know how to format the XML output that's required by the AJAX script.
But I don't know how to perform the AJAX call, interpret the results and deal with any errors.

I've written bits and bobs with JavaScript before, but I've never touched AJAX stuff so I don't really know where to start.
I'm assuming the best thing would be some sort of library that can handle all the complex stuff - any recommendations?

I've heard of JQuery, Scriptaculous/Prototype... and I assume there'll be a way to do something like this with those.
But I'm looking for more AJAX starters/beginners advice really.

All the users are using recent browsers... FireFox, IE 6/7, Safari OS X Panther... which should all support this kind of stuff
And there's only going to be 20 users max once the solution is up and running, so it's very small-scale in terms of load.

Any ideas/suggestions on the best way to do this?

Thanks
Ben

Re: AJAX is the answer - how to get started?

Posted: Tue Jan 22, 2008 11:53 am
by VladSun
I use jQuery and I'm pretty happy with it :)

Re: AJAX is the answer - how to get started?

Posted: Tue Jan 22, 2008 1:49 pm
by Jonah Bron
Welcome to the world of ajax.

Simple connection:

Code: Select all

 
function getAJAX(){//find out what ajax to use
   var ajax = false;// create false ajax var
   try {
      ajax = new XMLHttpRequest();//if supports XMLHTTPREQUEST, use it
   }catch(e){
      try {
         ajax = new ActiveXObject('Msxml2.XMLHTTP');// if old IE, use it
      }catch(e){
         ajax = new ActiveXObject('Microsoft.XMLHTTP');// if really old IE, use it
      }
   }
   return ajax;
}
function getXML(url){
   var ajax = getAJAX();// get apropriate ajax
   ajax.open('GET', url, true);//initialize ajax send
   ajax.onreadystatechange = function (){//when the ready state changes
      if (ajax.readyState==4){//if completely loaded,
         var outputXML = ajax.responseXML;//could also be responseText or responseHTML
         return outputXML;//return it for processing with javascript
      }
   }
   ajax.send(null);//run ajax
}
This code gets the proper XML engine depending on the browser, gets the ajax in another function, sets up a connection with 'GET', with a url, set to true, so that if there is a connection problem, it won't freeze. When the readystate changes, if it is 4, that means that it is completely loaded. The response XML is returned. The message is sent.

Just use getXML(), and there is your xml to process.
More AJAX tuts...

Re: AJAX is the answer - how to get started?

Posted: Tue Jan 22, 2008 3:24 pm
by Kieran Huggins
jQuery FTW!

Re: AJAX is the answer - how to get started?

Posted: Tue Jan 22, 2008 3:42 pm
by pickle
Add another vote for JQuery.

An example implementation could be as simple as this (Please note that it's untested & I haven't checked the docs so some of the parameters might be a little off)

Code: Select all

 $.ajax({    url:"http://myintraweb.com/popupchecker.php",    returnType: "JSON",    success:function(returnValue){        if(returnValue.appointmentsExist){            $("#popupDiv")                .text(returnValue.value)                .removeClass("hidden");        }    }});
Something like that would make an AJAX call to popupchecker.php, accept the return value as a JSON object, then update & show a hidden div if the returned object had "appointmentsExist" set to true. Of course, this will only work if you can output in JSON syntax from your PHP file, but that's easy to do (very easy if you've got PHP5.2+)

Re: AJAX is the answer - how to get started?

Posted: Wed Jan 23, 2008 1:12 am
by Kieran Huggins
the load() method is awesome as well, especially if you have partial views that you can return from your app already.

Re: AJAX is the answer - how to get started?

Posted: Wed Jan 23, 2008 11:06 am
by Zoxive
MooTools.

Most say JQuery is easier to learn, but I don't always prefer easy.

Come on even the name is better.