Home arrow XML arrow Page 3 - 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 - Building the chat layout: writing the “createMessageBoard()” and “createMessageBox()” functions
(Page 3 of 5 )

Since I want the chat to be developed entirely with JavaScript (in conjunction with the proper PHP files), I’ll define a couple of additional functions, which will create a basic page layout. As you’ll see, the chat page will comprise two sections: a top section, useful for displaying the whole list of messages, and a bottom section, where the user can submit new comments by using a typical web form.

Having explained how the chat page will be laid out, here is the source code for the first function, “createMessageBoard()”, which creates the containing <div> element, handy for displaying the list of messages:

function createMessageBoard(){
    var mdiv=document.createElement('div');
    mdiv.setAttribute('id','messages');
    document.getElementsByTagName('body')
[0].appendChild(mdiv);
}

Definitely, the above function isn’t rocket science. It simply creates the corresponding <div> element, then assigns to it an ID, and finally appends it to the document tree.

Now, let’s get rid of rather irrelevant code and see how the “createMessageBox()” function looks:

function createMessageBox(){
    // create message box container
    var mdiv=document.createElement('div');
    mdiv.setAttribute('id','messagebox');
    // create message form
    var mform=document.createElement('form');
    // create message box
    var mbox=document.createElement('input');
    mbox.setAttribute('type','text');
    mbox.setAttribute('name','message');
    mbox.className='msgfield';
    // create 'send' button
    var mbutton=document.createElement
('input');
    mbutton.setAttribute('type','button');
    mbutton.setAttribute('value','Send');
    mbutton.onclick=sendMessage;
    // create login text
    var sp=document.createElement('span');
    sp.appendChild(document.createTextNode
('Logged in as: <?php echo $user?>'));
    // append elements
    mform.appendChild(mbox);
    mform.appendChild(mbutton);
    mform.appendChild(sp);
    mdiv.appendChild(mform);
    document.getElementsByTagName('body')
[0].appendChild(mdiv);
    mbox.focus();
    mbox.onfocus=function(){this.value='';}
}

As shown in the above function, the bottom section of the chat page is generated by building up dynamically a few (X)HTML elements. First, the function creates a general containing <div>, which will house the appropriate web form for sending out new messages. Then, it generates the form itself, by including a single text input box and a form button, and finally inserts the whole structure into the document tree.

Additionally, there are a couple of things worth being analyzed in detail. Notice how a <span> element is created, in order to display the nickname of the current user. With reference to this, the following lines:

var sp=document.createElement('span');
sp.appendChild(document.createTextNode('Logged
in as: <?php echo $user?>'));

will display the user’s nickname, usually registered on a previous login page. However, you should not worry about this for now. In a moment,  I’ll demonstrate how the login page works. Now, by returning to the code responsible for displaying the corresponding nickname, the below embedded PHP statement:

<?php echo $user?>

will do the trick. For example, if a user has logged into the chat by using “JohnD” as the nickname, then the legend “Logged in as: JohnD” will be displayed to the right of the text input box. As you can see, the process is fairly understandable.

At this stage, I provided you with all the JavaScript functions that handle and manipulate the “receiver” request object, as well as the code responsible for building a rough layout for the chat page. Given that, the next step involved in coding the chat application will be writing a simple login page, which registers a visitor’s nickname and then redirects the user to the appropriate chat page.


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