ASK - AJAX Source Kit

• Release post with comments
• Download
• Demo

The purpose of ASK is to offer you a simple way to get content into your page on-the-fly through asynchronous JavaScript and XmlHttpRequest, without sacrificing accessibility or usability.

The version displayed here includes an accessible version for people without JavaScript and/or XmlHttpRequest, so try turning off your JavaScript and test it. Each link that gets content from its href value automatically adds ajax=true to the query string, and detects if there are other parameters in it too. The point of this is for you to implement functionality in the receiving page to only deliver desired content when an AJAX call is made, but also that you, with the same URL can return a full page with content if it isn't an AJAX call.

All the links in this demo points to the same URL, but that's only for easier maintenance issues. You can have links with as many different URLs as you desire. ASK functionality is also automatically added to content you've retrieved with ASK. For instance, try the link retrieved in the Show cities-column.

ASK also supports using the forward and back buttons in the browser as well as offering support for bookmarking a page after certain AJAX calls have been made, as to not lose out on usability. It also caches already retrieved responses in a JavaScript array and then references that for further requests to the same link.

Instructions

• Include ask.js into your page: <script type="text/javascript" src="js/ask.js"></script>
• Add two things to the links in your page that you want to use to get content dynamically:
  • The CSS class ask.
  • The CSS class target-idOfTargetElement, where "idOfTargetElement" is the ID of the element in the page where you want to present your dynamically retrieved content.

  So, an example link using ASK that will present dynamic content in an element named "countries" will look like this:
  <a href="content.php?continents=true" class="ask target-countries">Get countries</a>

• Place the blank.htm file in your solution in the same folder as the page people will navigate to. Alternatively, you can change this location in the iframeFakeFile property of the Ask object. This file is needed for history support in Internet Explorer.

Downloads

You can either download this full demo, with ASP and PHP examples for accessibility, or you can download the ask.js file (8.3 kb).

• Download full demo
• Download ask.js

Web browser support

• IE 5+
• Firefox 1.0+
• Safari 1.2+
• Opera 8+

History feature not working in these web browsers

• IE 5.0
• Safari
• Opera 8.0, not at all. In Opera 8.5+, the behavior isn't a 100% when it comes to the forward button.

Bookmarking feature not working in these web browsers

• IE 5.0

Demo

Click the links below to see the ASK functionality.