Home arrow XML arrow Page 2 - Building an AJAX-Based Chat: Coding the Receiver Module
XML

Building an AJAX-Based Chat: Coding the Receiver Module


In this second part of a three part series of articles, you will learn a lot more material related to building the AJAX-based chat. You will discover how two requester objects fetch or add new messages to the database. Also, you will see the code for a simple login page for registering users that want to access the chat page.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 24
November 15, 2005
TABLE OF CONTENTS:
  1. · Building an AJAX-Based Chat: Coding the Receiver Module
  2. · Retrieving messages from the database: defining the “getChatData()” function
  3. · Building the chat layout: writing the “createMessageBoard()” and “createMessageBox()” functions
  4. · Registering chat users: defining a simple login page
  5. · Putting the pieces together: building the whole chat page

print this article
SEARCH DEVARTICLES

Building an AJAX-Based Chat: Coding the Receiver Module - Retrieving messages from the database: defining the “getChatData()” function
(Page 2 of 5 )

The whole idea for retrieving messages from the database is to request a PHP file that performs a SELECT query for extracting them, and then sends them back to the client for proper display. This entire process is carried out repetitively, at a given time interval. Obviously, the shorter the time interval, the more responsive will be the display of messages. With this concept in mind, here is the recursive definition for the “getChatData()” function:

function getChatData(){
    receiverXMLHttpObj.open('GET','getchatdata.php',true);
    receiverXMLHttpObj.send(null);
    receiverXMLHttpObj.onreadystatechange=
receiverStatusChecker;
    setTimeout('getChatData()',5*1000);
}

Even though this function is extremely simple, I believe you will agree that it is remarkably efficient. Essentially, it will fetch the “getchatdata.php” file each five seconds, and all the requests will be handled by the “receiverStatusCheker()” function. As you may guess, the PHP file is tasked with fetching a given number of messages to be displayed on the chat page.

Now, let’s take a look at the “receiverStatusChecker()” function, in order to see how “receiver” requests are properly handled. Below is its source code:

function receiverStatusChecker(){
    // if request is completed
    if(receiverXMLHttpObj.readyState==4){
        if(receiverXMLHttpObj.status==200){
 // if status == 200 display chat data
 displayChatData(receiverXMLHttpObj);
        }
        else{
            alert('Failed to get response :'+ receiverXMLHttpObj.statusText);
        }
    }
}

As you can see, the function above handles all the GET requests for getting messages from the server. After the list of messages has been obtained, it will be displayed on the chat page by using the “displayChatData()” function. As you recall, this function was explained in the first part of the series, and since it accepts a requester object as a parameter, it’s used by the respective “sender” and “receiver” objects.

At this point, the chat application is capable of handling independently two requester objects for performing some clearly delineated tasks: retrieving and displaying messages from the server, and inserting new messages into the database each time a user submits a comment. See how the pieces are fitting together in the whole application?

Now that you know how the chat is driven by two independent objects, the next step will be showing the functions that build the basic layout of the chat page. Thus, join me in the next section to find out how this is achieved.


blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials