JSON tutorials

Read The Full Tutorial.

 I just recently discovered the joys of JSON after reading about it for months.  As the SecretGeek puts it:

   1. Two months ago you'd never heard of JSON
   2. One month ago you'd heard the term but paid no attention
   3. One week ago you'd heard it mentioned a few times and started to think, right... some more crap to learn
   4. Today you woke up with an alarm bell ringing in the back of your mind that said WHAT THE BLOODY HELL IS THIS JSON THING AND WHY IS IT EVERYWHERE ALL OF A BLOODY SUDDEN!

So 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'll expand this tutorial in to a full AJAX chat system, so we'll 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 '0',
  `user_id` INT(11) NOT NULL DEFAULT '0',
  `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't 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.