You are invited to Log in or Register a free Frihost Account!

Help making an AJAX messaging system

I'm building a system for a client that will require a simple messaging/notification system. I really want to do something similar to how gmail updates to display new the number of new messages without a refresh. another example of what i'm trying to do is the new 'digg spy' on (
does anyone have any experience with this kind of programming? I have not tried any AJAX before. I do mostly php and java programming. but I'm really hoping to get comfortable with AJAX. can anybody help me out with this?
thanks in advance
This page lists a few AJAX toolkits that might help you :

Have you thought about how you want your application to be ? Can you make a mockup using HTML and CSS ? How are you going to implement the messaging functions ? Are you planning to use Jabber ?

Some more information on your plans would be helpful
sorry, 'messaging system' wasn't a good way to explain what i am trying to do. its a system that automates a process between two departments in my company. one department will submit a request and another department (accounting) will have to review and aprove/deny the request. what I'm developing is a web based system to automate this process. what I need to the ajax to do is when a request is submitted a notification will update on the accounting department side that displays the number of new requests or something like that. its more of a notification system to let one department know that there is a request that needs their attention. i'm guessing it will be very similar to the where the page is updated with stories that are 'dugg' as they are dugg in real time.
i hope that explaination makes sense. thanks
I think I got the main idea behind AJAX down from reading tutorials online that where posted in this thread. but the only thing that I am still confused about is once the AJAX or XMLHttpResponse object is called and that runs a php script that can query the mysql db to get the data, how does the php script know where to send the data to get it back to the javascript to be displayed? I understand that the XMLHttpRequest object sets the callback with the 'onreadystatechange property. but i don't see how the data that I got with the php script will get back using that. can anyone help explain this to me? thanks
Probably you will be interested in the following PEAR package: HTML_AJAX.
PEAR wrote:
PHP and JavaScript AJAX library
Current Release
0.3.4 (alpha) was released on 2006-01-31 (Changelog)
Provides PHP and JavaScript libraries for performing AJAX (Communication from JavaScript to your browser without reloading the page)
In the exact same way that a normal page knows where to send its response. All that the object is doing is acting like a browser.


                              Clas|sic (Client)          |    (Server)
  I want index.php --             |
                          ---     |
                                  |  --
                                  |         ---
                                  |                Ok, here you go
                                  |          ---
                                  |   ---
                             ---- |
                   -----          |
  |                               |
  |                               |
  |                               |
  |                               |
  |                               |
  | Now I want index.php          |
  again                 --        |
                                  |       ----
                                  |                 ----Ok, here you go
                                  |              ----
                                  |   ----
                            ---   |
  Yay!                            |
  Browser's                     AJ|AX 
   normal method                  |
I want index.php--                |
                                  |      ---
                                  |            ---
                                  |                 ----Ok, here you go
                                  |          ---
                                  |  ---
                 ---              |
           --                     |
Yay!                              |
                |HttpXMLRequest   |
                |                 |
                |                 |
                |I want a foo.php |
                |               --|---
                |                 |            ------- Ok, here you go.
                |                 |               ---
                |                 |       ----
                |              ---|--
                |Yay!             |
Javascript interpets and  |
applies.                         |

So what you're actually asking is how does the server know where to send to the client in any situation. If you want to know I would recommend you read a book on tcp/ip as they usually cover common protocols as well.
I'd be more than willing to help you on this subject. Fire away with the

The XMLHTTP object will "post" the data to the url and then the php script
at that URL will return the result back to the same "client" that requested
it. The XMLHTTP object will have the results in it's responseText or
responseStream properties.

What I suggest doing, depending on what data you need to send back, is
to write your php script to send the data back in XML format, thereby, you
can assign the XML from the XMLHTTP.responseText to the XML property
of an XMLObject in javascript and parse it using the XML parsing functions.

I have done this before, however, not via javascript (AJAX). I have used
the XMLHTTP object before in an application to access Hotmail WebDAV
using Delphi. The techniques would be the same, however. I also know
PHP so showing you example code in PHP would be no problem.
I actually got t working using the HTML_AJAX PEAR library. but I don't really understand the xmlhttp object as well as I would like to. I want to get comfortable with it so that I don't need to rely on a library to use the xmlhttp object.
What I needed it for was a really simple system that polls the mysql db and when a transaction has been inserted that needs the attention of that particular user, it displays a notification and some simple info about the transaction. HTML_AJAX worked really well for this and made the process pretty simple. But I feel like I cheated because I still don't understand it well enough to code it myself from scratch.
none of my current projects require anything specifically that would require AJAX. But I want to get comfortable enough with AJAX so that I can start building all of my future apps more and more web 2.0-ish.

any suggestions for that would be very welcome. I'm willing to try whatever to get comfortable with this.
I'd be more than happy to take a look at your code and give you some
pointers. It is not that difficult to work with AJAX from just the javascript
end without having to resort to a library like PEAR.

Are you polling on a timer in your main page? If not, how do you receive
notifications that something has been added? How are you deteriming
that data in the table has changed?
yes, I'm polling on a timer on my index.php. it sends the request and runs a query in a php script which just gets the number of new transactions and returns that. I
Here's the code that I'm using:

// create a javascript hash to hold or callback methods
var hwCallback = {
   getCount: function(result) {
      document.getElementById('countBig').innerHTML = result;
      document.getElementById('newReq').innerHTML = result;

// create our remote object
// note the lowercase mapping, this is because in php4 php classes and functions have no case
// in the server you can register each function adding the case back
var remoteHW = new helloworld(hwCallback);



require_once 'HTML/AJAX/Server.php';

class AutoServer extends HTML_AJAX_Server {
   // this flag must be set for your init methods to be used
   var $initMethods = true;

   // init method for my hello world class
   function initHelloWorld() {
      require_once 'HelloWorld.class.php';
      $hello = new HelloWorld();


$server = new AutoServer();


require_once 'HTML/AJAX/Server.php';
require_once 'HelloWorld.class.php';

$server = new HTML_AJAX_Server();

$hello = new HelloWorld();




class HelloWorld {
/****    ****/
   function getCount () {      
      $sql="SELECT * FROM status AS s WHERE s.status = '".$_COOKIE['dept_id']."' ";
      $result = mysql_query($sql) or die (mysql_error());
      return $count;
   }//end getCount Function
   function advSrch () {
      return $style;
}//end HelloWorld Class
Stubru Freak
All that AJAX does, is requesting a page like a browser would do, but pass it to javascript to parse it, instead of displaying it.

So basically:
AJAX passes the request to your browser. Your browser starts loading the page. It is ready to show the page, when it remembers it should pass it to AJAX instead. It puts the page in the object's responseText and responseXML properties, then calls the onreadystatechange function.

This function can use responseText, to get the text that the server returned (which can be an XML/HTML/XHTML document, or even a simple plain text file).
Also this function can use responseXML which will contain a document property which can do everything you can do with a normal document property.
For example:
aDocument = req.responseXML;
someText = aDocument.createTextNode('Some text to display');
aDocument.appendChild(someText); // Add the text to the document
document.appendChild(aDocument.firstChild); // Append the first child of the response document to the document displayed on-screen

With this method (responseXML) you must be careful as it will not work when the reponse isn't valid XML/XHTML (if you're really lucky a small html file may be parsed, but not really likely). One tag that isn't closed is enough to make your whole script fail.

An example of what you want would be querying a page on the server, which only echoes the information from the database:

$amount = mysql_query("SELECT COUNT(1) FROM `a table`");
$amount = mysql_fetch_row($amount);
$amount = $amount[0];

echo $amount;

Make req an XMLHttpRequest object for example.php
req.onreadystatechange = function(){
if(req.readystate == 4){
aDiv = document.getElementById('aDiv');
textNode = document.createTextNode(req.responseText);

If you have more complex response, php could generate an xml response, and javascript could use this:

Make req an XMLHttpRequest object for example.php
req.onreadystatechange = function(){
if(req.readystate == 4){
rXML = req.responseXML;
aDiv = document.getElementById('aDiv');
textNode = rXML.getElementById('responseDiv').firstChild.value; // Not sure about this one
textNode2 = rXML.getElementById('responseDiv2').firstChild.value;
anotherDiv = document.getElementById('anotherDiv');

If you keep repeating this javascript request every minute, a new message will be seen within a minute.
Related topics
Site Builder
Need help making logout script
Need Help Yet again :: Comment system, data from 3 tables !!
Pls Help. Inter-office Memorandum system...
Need help making flash music player..
FriHost Help
AJAX and PHP rating system
Php/mysql Personnal message system and profile mod
Ajax or JS - need help ASAP
Frih$ for Help Making Website
.: User login systems for your site :. CHEAP AND EASY!
Poll System
GameBase Forum
Indie Browser MMORPG Game MonsterMMORPG - My Game
Reply to topic    Frihost Forum Index -> Scripting -> Others

© 2005-2011 Frihost, forums powered by phpBB.