Preface:
I do realize that there are probably tons of tutorial guides out there describing what AJAX is, how it works and the rest. This post will introduce a few different techniques and technologies together to create a better site.
Tools of the Trade
To get yourself started, you need the tools to make yourself more productive.
- Eclipse IDE (a free open source IDE)
- JSEclipse Plugin (a free plugin for the Eclipse IDE for editing JavaScript files)
- Mozilla FireFox browser (do you consider yourself a web developer without even this?)
- FireBug plugin (plugin for FireFox. The ULTIMATE AJAX development tool available)
- NotePad++ editor (save yourself from the misery that is the NotePad that comes with Windows. Or if you have a better editor like VS2005/2008 for HTML editing, use it.)
Making use of existing frameworks
Why waste precious time reinventing the wheel when its available and free? We will be making use of the following libraries as we go along.
- Yahoo UI Grid layout style (nice style sheet template that provides well-tested CSS layouts)
- jQuery JavaScript Library (a very popular JavaScript library)
- jQuery Tabs plugin (for creation of Tabs)
- JQuery Flora theme (part of download package for jQuery)
- JSAN JavaScript Script Loader (for dynamic loading of JS files)
Creating the Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo Ajax</title> </head> <body> My Page </body> </html>
Now this looks extremely empty. Let’s make use of our Yahoo UI style as well as our custom style design.
- Create your custom style sheet, e.g. site.css.
- Add a reference to the Yahoo UI style sheet and overwrite/modify any styles you wish to implement.
- Change your html to include the style sheet as well as Yahoo UI’s grid layout template.
- Preview your html in your browser.
@import "reset-fonts-grids-min.css"; #hd { background-color:#cccccc; font-size:182%; padding: 4px; } #bd { padding: 20px 10px;} #ContentLayer { border:1px solid #999; padding: 6px;} #ft { font-size:85%; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo Ajax</title> <link rel="stylesheet" type="text/css" href="site.css" /> </head> <body> <div id="doc3" class="yui-t2"> <div id="hd"> My Demo Site! </div> <div id="bd"> <div id="yui-main"> <div class="yui-b" id="ContentLayer"> Welcome to my site. </div> </div> <div class="yui-b"> <b>Site Menu</b> <ul> <li><a href="#" id="home">Home</a><li> <li><a href="#" id="about">About</a><li> </ul> </div> </div> <div id="ft"> Copyright © 2007 </div> </div> </body> </html>
Inserting our Scripts
Insert the reference to the jQuery.min.js, ui.tabs.min.js and create a new custom mysite.js to the html.
<script type="text/javascript" src="scripts/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="scripts/ui.tabs.min.js"></script>
<script type="text/javascript" src="scripts/mysite.js"></script>
Modifying our Script
Open up mysite.js with Eclipse (remember to configure JSEclipse. You will need to manually add the JS files to an Eclipse project due to a bug/issue).
//mysite.js //Window OnLoad... $(document).ready( function() { $("#ContentLayer").html("Here's a <b>Big</b> welcome!"); } );
Test it on your browser and see the main contents reflected. How jQuery actually works is beyond the scope of this post. However, just note that the .ready() command will allow you to specify multiple startup executions on a state before Windows.OnLoad.
//mysite.js //Window OnLoad... $(document).ready( function() { //$("#ContentLayer").html("Here's a <b>Big</b> welcome!"); $("#home").click(function() { $.get("myhomepage.html",null, function( response ) { $("#ContentLayer").html( response ); } ); return false; }); } );
Next, we proceed to insert an Event Handler to the #Home element for the OnClick event. The code will proceed to load the contents from myhomepage.html into the Div layer “ContentLayer” via the HTTP Get method.
You can easily replace the code to obtain html contents from a common implementations like PHP/ASP files, as well as ASPX/JSP.
If you need to send parameters, you can easily pass them in to the $.get() command.
$("#home").click(function() { $.get("myhomepage.html","myparam1=thank&myparam2=you", function( response ) { $("#ContentLayer").html( response ); } ); return false; });
Each “function()” call is actually an anonymous method, similar in concept to anonymous delegate in .NET. It acts as a CallBack trigger. (Callbacks are function pointers which the target function will execute upon completion/reaching a certain trigger point).
To be continued…
To reach the zenith of programming 