Home arrow XML arrow Page 3 - 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 - Sending chat messages: defining the “sendMessage()” function
(Page 3 of 5 )

As you know, a typical chat application provides users with the ability to send out messages through a simple form, and then display them on a generic containing section where all online users communicate with each other. For this reason, I’ll begin developing the “sender” module of the application, by defining the “sendMessage()” function. It uses a “sender” XMLHttpRequest object for triggering a post request to a given file, and passes into it the user’s nickname, together with the corresponding message. Here’s what it looks like:

function sendMessage(){
    var user='<?php echo $user?>';
    var message=document.getElementsByTagName('form')[0].elements
[0].value;
    if(message.length>100){message=message.substring(0,100)};
    // open socket connection
    senderXMLHttpObj.open('POST','sendchatdata.php',true);
    // set form http header
    senderXMLHttpObj.setRequestHeader('Content-
Type','application/x-www-form-urlencoded');
    senderXMLHttpObj.send('user='+user+'&message='+message);
    senderXMLHttpObj.onreadystatechange=senderStatusChecker;
}

In the simplest sense, the above function makes a post request to the “sendchatdata.php” file, and sends as parameters the pair of “user&message” variables, for pushing directly into the database table. Of course, there are a few things worth noting here. As you may have guessed, the backend of the chat will sit on a simple MySQL database, which will be accessed with PHP. But fear not. Considering the ease of querying the database, you can use another RDBMS (for example MS Access) and work with ASP.

By returning to the function’s code, you can see that I use a “senderXMLHttpRequest” object for sending the request header, conjunctly with the pair of parameters mentioned above. For the moment, I’m assuming that this object has been previously instantiated by the “getXMLHttpRequestObject()” function, so this will be discussed later, when I explain the set of functions that initialize the chat.

Notice right at the very beginning of the function how the lengths of messages are checked in, by limiting the amount of characters to 100, as well as how the user’s nickname is obtained. The line listed below:

var user='<?php echo $user?>';

demonstrates how to populate the “user” JavaScript variable with the contents of the “$user” PHP variable. I’ve deliberately done this in order to use PHP sessions for registering the nickname chosen by the user and for using it during the chat session. Obviously, the entire registration process will be done through a simple login page, which will be coded at a later time. For the moment, after the message has been sent by using a text input box, the “senderStatusChecker()” function is tied up to the “onreadystatechange” handler, so it’s possible to check for the progress of the request and insert the data into the database table.

Since “senderXMLHttpRequest” objects are checked by the “senderStatusChecker()” function, the next step in developing the chat is looking at its corresponding definition.


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