If you’re a big fan of jQuery you are probably aware of the tons of handy features that it packages under the hood: easy-to-grasp DOM manipulation and event handling, cross-browser Ajax support, a decent number of built-in animation effects, and an impressive (and ever-growing) list of plug-ins, which permit you to extend its core functionality in all sort of clever ways. In this tutorial, we will teach you to use jQuery's Ajax Method to create a basic blog app, and retrieve comments from a MySQL database.
Using the jQuery Ajax Method to Create a Blog (Page 1 of 2 )
Unfortunately, the library’s flat learning curve, along with all of the goodies that it provides right out of the box turn it into the perfect candidate for unintended (and sometimes dramatic) abuse. This happens frequently; if you're skeptical, just do some Googling and pick a random fancy web site. In many cases you’ll be confronted with flashy, jQuery-powered user interfaces that fail painfully when JavaScript is turned off. Sad but true.
Of course, jQuery doesn’t have to be seen as the bad boy; these are issues that simply emerge as a result of designs that were tackled from the very beginning with no accessibility in mind. However, not everything is hopeless when building interactive, yet accessible, GUIs whose behavior relies on the functionality provided by jQuery. To prove my claim, as stated above, in this article series I’m going to develop (in a step-by-step manner) a basic blog application. It will lazy-load (from a MySQL database) the comments associated with each blog entry via jQuery’s “Ajax” method. The comments will remain accessible even if scripting is disabled on the browser, thanks to the proper use of Progressive Enhancement.
Ready to learn the full details regarding the construction of this blog program? Then start reading!
Getting Started: Defining the Blog’s Markup
As someone once said, "first things come first." So, in this case, the first thing I’m going to do is define the landing page of our sample blog. This page will display a few blog entries along with their related comments, which will be fetched on request from our MySQL database. Nothing too complicated, right?
Actually, all of this data will be pulled from a couple of MySQL tables, but the subtleties of this process will be discussed afterwards. For the moment, let's focus on the following (X)HTML document, which defines the blog’s structural markup:
(index.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My sample blog</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>My sample blog</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> <div id="content"> </div> <div id="footer"> <h2>Footer section</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> </div> </div> </body> </html>
As you can see above, the blog’s main page is pretty simple to grasp. Basically, it has been broken down into three different sections that can be seen on every website today: a header, a main content area, and a footer.
You may be wondering why I decided to named this page “index.php” if it doesn’t include any PHP code. Well, as I explained before, the page’s main content section will be used to show some blog posts along with their associated comments, which will be fetched from a MySQL database via PHP. However, it’ll be easy to perform this task using any other server-side language.
So far, so good. Having defined the markup of the blog’s main page, the next logical step is to polish its visual presentation with CSS. This will be done in the following section.
Defining the Blog’s Look
Due to the simple structure exposed by the blog’s landing page, defining its visual appearance is an extremely straightforward process. It's reduced to styling its primary sections, links, paragraphs and a few heading elements. In this case, the CSS file responsible for achieving this will be called “base.css” (you’re free to rename it something that better suits your personal needs).
Admittedly, there’s not much that can be said about the above CSS file, except that it assigns a few basic styles to the elements of the blog’s index page, including its blog entries and comments. The best way to see the results produced by this file when it’s attached to the previous web page is to test it on the browser. If all works as expected, the page in question should look like this:
So, now that the blog is starting to look a little more engaging, it’s time to turn it into a more dynamic structure. But how can this be done, and where does jQuery fit into this scheme? Well, bear with me and keep in mind that this is a work in progress.
In line with this, in the next section I’m going to add to a bit of presentation logic using PHP to the main section of the previous web page. This logic will be responsible for displaying blog entries and linking to related comments, which as you know, will be fetched directly from a pair of MySQL tables.
JavaScript 
Overview of JavaScript Variables
