JSON AJAX Web Chat ...

What is JSON? JSON stands for JavaScript Object Notation and is basically a lightweight way of describing hierarchical data. Since it is so lightweight, it makes it an ideal candidate for AJAX applications. So what does JSON look like. The JSON code our JSON AJAX Chat application will be returning will look something like this:

What is JSON?  JSON stands for JavaScript Object Notation and is basically a lightweight way of describing hierarchical data.  Since it is so lightweight, it makes it an ideal candidate for AJAX applications.  So what does JSON look like.  The JSON code our JSON AJAX Chat application will be returning will look something like this:

{"messages":
    {"message":[
        {"id":  "17",
            "user": "Ryan Smith",
            "text": "This is an example of JSON",
            "time": "04:41"
        },{"id":  "18",
            "user": "Ryan Smith",
            "text": "Here is another Element",
            "time": "04:41"
        } ]
    }
}

As you can tell, it looks a lot like structured data - and it is.  This same data structure might be represented with XML like:

<?xml version="1.0" ?>
<root>
    <message id="17">
        <user>Ryan Smith</user>
        <text>This is an example of JSON</text>
        <time>04:41</time>
    </message>
    <message id="18">
        <user>Ryan Smith</user>
        <text>Here is another Element</text>
        <time>04:41</time>
    </message>
</root>
 

There are some other cool things you can do with JSON link making embedded JavaScript calls, but they are beyond the scope of this tutorial.

Creating the Chat Tables
So lets get on with it.  The first thing that we need to do is to setup our database table.  We really only need one table that holds the messages, but I keep thinking one day I will expand this tutorial in to a full AJAX chat system, so we will add both tables for now.

--Chat Table
DROP TABLE IF EXISTS `chat`;
CREATE TABLE `chat` (
  `chat_id` INT(11) NOT NULL AUTO_INCREMENT,
  `chat_name` VARCHAR(64) DEFAULT NULL,
  `start_time` DATETIME DEFAULT NULL,
  PRIMARY KEY  (`chat_id`)
) ENGINE=INNODB DEFAULT CHARSET=latin1;
 
--Message Table
DROP TABLE IF EXISTS `message`;
CREATE TABLE `message` (
  `message_id` INT(11) NOT NULL AUTO_INCREMENT,
  `chat_id` INT(11) NOT NULL DEFAULT ,
  `user_id` INT(11) NOT NULL DEFAULT ,
  `user_name` VARCHAR(64) DEFAULT NULL,
  `message` TEXT,
  `post_time` DATETIME DEFAULT NULL,
  PRIMARY KEY  (`message_id`)
) ENGINE=INNODB DEFAULT CHARSET=latin1;

The first table chat won be necessary for this tutorial.  The second table message will hold our list of messages that are sent from our JSON AJAX Chat web page.  It basically consists of who sent the message,  when they sent it, and what the message was.  The field chat_id would be used if you wanted to have more than one chat session.
source: tutorialized

 View Full Story.