Ajax Demo
Here, thanks to Dynamic Drive, is an Ajax application that displays a selection of external content on a page inside a DIV using CSS tabs:
This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.
Because of Ajax security features, the external content must be from the same domain as the calling page. Here are some of the features of this Ajax application, that could be adapted to other uses:
- Fetch and display an external page (from the same domain) inside a container when a tab is selected.
- Add default content inside the container to either be shown while no tabs are selected, or to be associated with a specific tab. The default content is added directly to the page and not fetched via Ajax, for the sake of server efficiency.
- For each tab, you can not only fetch an external page to be shown, but also load external .css and .js files associated with that page.
- Supports multiple Ajax Tabs Contents on the same page.
- Fully unobtrusive, search engine friendly script. The tabs are simply list based links. For search engines or browsers with JavaScript disabled, the contents will just load as actual pages (instead of inline via Ajax).
This may not be the best application to display the versatility of Ajax because much the same thing could be accomplished by using an iFrame (inline frame). A better example might be an Ajax application which displays the city and state when a ZIP code is entered. The Guide to Using AJAX and XMLHttpRequest, written by Bill Bercik, includes step-by-step instructions, and all the files are available for download.