Home arrow XML arrow Page 5 - Building an AJAX-Based Chat: The Barebones Structure
XML

Building an AJAX-Based Chat: The Barebones Structure


Chat programs are common on the web these days. HTTP-based versions were often built as Java applets, but today, developers have a wider range of options when building chat programs. This article gets you started with building one that uses AJAX as the workhorse for sending out http requests without the need for page reloading.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 43
November 08, 2005
TABLE OF CONTENTS:
  1. · Building an AJAX-Based Chat: The Barebones Structure
  2. · Defining the application’s core logic: working with requester objects
  3. · Sending chat messages: defining the “sendMessage()” function
  4. · Checking for the progress of sender requests: defining the “senderStatusChecker()” function
  5. · Updating the display of messages: coding the “displayChatData()” function

print this article
SEARCH DEVARTICLES

Building an AJAX-Based Chat: The Barebones Structure - Updating the display of messages: coding the “displayChatData()” function
(Page 5 of 5 )

As I mentioned before, the list of the messages being displayed on the chat page needs to be refreshed each time a new message is added to the database table. Keeping this condition in mind, the chat application uses the “displayChatData()” function, in order to perform the message updating process. Here is the definition for the pertinent function:

function displayChatData(reqObj){
    // remove previous messages
    var mdiv=document.getElementById('messages');
    if(!mdiv){return};
    mdiv.innerHTML='';
    var messages=reqObj.responseText.split('|');
    // display messages
    for(var i=0;i<messages.length;i++){
        var p=document.createElement('p');
        p.appendChild(document.createTextNode(messages
[(messages.length-1)-i]));
        mdiv.appendChild(p);
    }
}

By analyzing the source code for the function above, it’s pretty easy to understand its operation. First, it removes all the messages previously displayed and then obtains a new list. The following fragment of code illustrates these processes:

// remove previous messages
var mdiv=document.getElementById('messages');
if(!mdiv){return};
mdiv.innerHTML='';
var messages=reqObj.responseText.split('|');

As you can see, the function cleans up a “messages” <div> containing element by resetting its “innerHTML” property. After all the messages have been removed from the container, the new list of messages is obtained by reading the value for the “responseText” property, belonging to the requester object passed in as a parameter.

Since all the messages will be fetched from the database first, and then delimited by a pipe (“|”) character, for transmitting back to the client, the below expression:

var messages=reqObj.responseText.split('|');

stores the messages in the “messages” array. This is handy for processing and displaying with a simple loop, like this:

for(var i=0;i<messages.length;i++){
    var p=document.createElement('p');
    p.appendChild(document.createTextNode(messages
[(messages.length-1)-i]));
    mdiv.appendChild(p);
}

As you may have guessed, each message will be placed within the container <div> as a paragraph element, and displayed in descending order, assuming that the last inserted message will be shown at the bottom of the containing <div>.

By this point, I’ve provided you with all the JavaScript functions that compose the “sender” module for the chat application. Of course, the functions that you just saw seem rather like isolated pieces, unconnected to the whole application due to the fact that the remaining “receiver” module hasn’t been coded yet. Moreover, there is much of the server-side processing left to be developed, including insertion and retrieval of messages. So, bear with me and wait for the next part of this series, where I’ll be writing the rest of the AJAX-based chat.

Wrapping up

Over the first part of this series, I’ve demonstrated how to build the barebones of a web-based chat system, by utilizing AJAX as the trusty workhorse for sending, retrieving and updating user messages, without the need to appeal to “refresh” meta tags, and certainly keeping all the programming requirements under the scope of JavaScript and PHP.

However, exciting things are just around the corner. As I said before, in the next tutorial, I’ll write the “receiver” JavaScript module, useful for fetching messages from the database table, together with some additional functions for building the layout of the chat page. Is this too much for you? I don’t think so. See you in the next part!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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