AJAX is the answer - how to get started?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
User avatar
batfastad
Forum Contributor
Posts: 433
Joined: Tue Mar 30, 2004 4:24 am
Location: London, UK

AJAX is the answer - how to get started?

Post 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
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

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

Post by VladSun »

I use jQuery and I'm pretty happy with it :)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

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

Post 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...
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

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

Post by Kieran Huggins »

jQuery FTW!
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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+)
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

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

Post by Kieran Huggins »

the load() method is awesome as well, especially if you have partial views that you can return from your app already.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

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

Post by Zoxive »

MooTools.

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

Come on even the name is better.
Post Reply