The primary purpose of an AJAX library like jQuery is to simplify AJAX requests for HTML5 and CSS3 programmers. It’s hard to believe how easy this can be with jQuery.
How to include a text file with AJAX
Check out this clean code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax.html</title> <script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(document).ready(getAJAX); function getAJAX(){ $("#output").load("hello.txt"); } </script> </head> <body> <div id = "output"></div> </body></html> The HTML is very clean. It simply creates an empty div called output.
This example does use AJAX, so if it isn’t working, you might need to remember some details about how AJAX works. A program using AJAX should be run through a web server, not just from a local file. Also, the file being read should be on the same server as the program making the AJAX request.
The load() mechanism described here is suitable for a basic situation where you want to load a plain-text or HTML code snippet into your pages.
Building a poor man’s CMS with AJAX
AJAX and jQuery can be a very useful way to build efficient websites, even without server-side programming. Frequently a website is based on a series of smaller elements that can be swapped and reused. You can use AJAX to build a framework that allows easy reuse and modification of web content.
Although nothing is all that shocking about the page from the user’s perspective, a look at the code can show some surprises:
<!DOCTYPE html><html lang = "en"> <head> <meta charset = "UTF-8"> <title>CMS Using AJAX</title> <link rel = "stylesheet" type = "text/css" href = "cmsStd.css" /> <script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(init); function init(){ $("#heading").load("head.html"); $("#menu").load("menu.html"); $("#content1").load("story1.html"); $("#content2").load("story2.html"); $("#footer").load("footer.html"); }; </script> </head> <body> <div id = "all"> <!-- This div centers a fixed-width layout → <div id = "heading"> </div><!-- end heading div → <div id = "menu"> </div> <!-- end menu div → <div class = "content" id = "content1"> </div> <!-- end content div → <div class = "content" id = "content2"> </div> <!-- end content div → <div id = "footer"> </div> <!-- end footer div → </div> <!-- end all div → </body></html> Look over the code, and you can see these interesting features:
-
The page has no content! All the divs are empty. None of the text shown in the screen shot is present in this document, but all is pulled from smaller files dynamically.
-
The page consists of empty named divs. Rather than any particular content, the page consists of placeholders with IDs.
-
It uses jQuery. The jQuery library is used to vastly simplify loading data through AJAX calls.
-
All contents are in separate files. Look through the directory, and you can see very simple HTML files that contain small parts of the page. For example, story1.html looks like this:
<h2>Book I - Creating the HTML Foundation</h3><ol> <li>Sound HTML Foundations</li> <li>It's All About Validation</li> <li>Choosing your Tools</li> <li>Managing Information with Lists and Tables</li> <li>Making Connections with Links</li> <li>Adding Images</li> <li>Creating forms</li></ol>
-
The init() method runs on document.ready. When the document is ready, the page runs the init() method.
-
The init() method uses AJAX calls to dynamically load content. It’s nothing more than a series of jQuery load() methods.
This approach may seem like a lot of work, but it has some very interesting characteristics:
-
If you’re building a large site with several pages, you usually want to design the visual appearance once and reuse the same general template repeatedly.
-
Also, you’ll probably __have some elements that will be consistent over several pages. You could simply create a default document and copy and paste it for each page, but this approach gets messy. What happens if you __have created 100 pages according to a template and then need to change the header? You need to make the change on 100 different pages.
The advantage of the template-style approach is code reuse. Just like the use of an external style allows you to multiply a style sheet across hundreds of documents, designing a template without content allows you to store code snippets in smaller files and reuse them. All 100 pages point to the same menu file, so if you want to change the menu, change one file and everything changes with it.
Here’s how you use this sort of approach:
-
Create a single template for your entire site.
Build basic HTML and CSS to manage the overall look and feel for your entire site. Don’t worry about content yet. Just build placeholders for all the components of your page. Be sure to give each element an ID and write the CSS to get things positioned as you want.
-
Add jQuery support.
Make a link to the jQuery library, and make a default init() method. Put in code to handle populating those parts of the page that will always be consistent.
-
Duplicate the template.
After you have a sense of how the template will work, make a copy for each page of your site.
-
Customize each page by changing the init() function.
The only part of the template that changes is the init() function. All your pages will be identical, except they have customized init() functions that load different content.
-
Load custom content into the divs with AJAX.
Use the init()function to load content into each div.
This is a great way to manage content, but it isn’t quite a full-blown content-management system. Even AJAX can’t quite allow you to store content on the web. More complex content management systems also use databases rather than files to handle content. You’ll need some sort of server-side programming (like PHP) and usually a database (like mySQL) to handle this sort of work.
