Here’s how you would load jQuery version 1.2.3 using this API:

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery 
  google.load("jquery", "1.2.3");
 //Continue using jQuery
</script>

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular JavaScript open source libraries including:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

Google works directly with the key stake holders for each library effort and accept the latest stable versions as they are released. Once we host a release of a given library, we are committed to hosting that release indefinitely.

Links:

Google Ajax Libraries

Documentation

PersistJS is a simple to use Javascript to store persistent data on the client Browser. This library supports multiple back-ends which are listed later. The following example will show you how easy it is to store and retrieve data using PersistJS.

To Store Data:

// create a new client-side persistent data store
var store = new Persist.Store('My Data Store');

// pretend data
var data = "pretend this is really long data that won't fit in a cookie";

// save data in store
store.set('saved_data', data);

To Retreive Data:

// get data back from store, and prompt user with it
store.get('saved_data', function(ok, val) {
  if (ok)
    alert('saved data = ' + val);
});

PersistJS addresses all of the issues above. It currently supports persistent client-side storage through the following backends:

* flash: Flash 8 persistent storage.
* gears: Google Gears-based persistent storage.
* localstorage: HTML5 draft storage.
* whatwg_db: HTML5 draft database storage.
* globalstorage: HTML5 draft storage (old spec).
* ie: Internet Explorer userdata behaviors.
* cookie: Cookie-based persistent storage.

You can also remove storage engines you don’t want to use in PersistJS by removing that storage engine by code:

// never use cookies for persistent storage
Persist.remove('cookie');

Links:
PersistJS Project Home Page
Download PersistJS

ImageFlow is a picture gallery, which allows an intuitive image handling. The basic idea is to digitally animate the thumbing through a physical image stack. That intuitive handling is automatically caused by the metaphorical use of the well known process of thumbing through.

The script is compatible with the browsers on Windows, OSX and Linux:

• IE 6.0+
• Firefox 2.0.0.9+
• Opera 6.0+
• Safari 1.3.2+
• Konqueror  3.5.7

The current version of ImageFlow’s features are listed below :

• Supports most image formats
• Supports large amounts of images (>100)
• 100% JavaScript
• Scroll bar
• Mouse wheel support
• Arrow-key support
• Loading bar
• Captions
• Supports image links
• Scales 100% dynamically
• Implemented using div Tags

Links:
Download ImageFlow 0.8
ImageFlow Site
ImageFlow Documentation

The “movelogger� records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
The cool thing is that you can “replay� these movements afterwards.

Want to try out a demo ? Check this link: http://pure.rednoize.com/movelogger/
Link: puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX

The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases.

In addition, RSH provides a framework to cache transient session information that persists after a user leaves the web page. This cache is used by the RSH framework to help with history issues, but can also be used by your own applications to improve application performance. The cache is linked to a single instance of the web page, and will disappear when the user closes their browser or clear their browser’s cache.

RSH works on Internet Explorer 6+ and Gecko-based browsers, like Firefox. Safari is not supported.

Link: Really Simple History
Demo Link: testDhtmlHistory.html (try using the browser back button after you get to this demo)

If you’re still wondering what you can do with Google gears, here are a tutorials to get you started on the right track. Nick Halstead takes you though how to cache WordPress pages using Google Gears:

“I was instantly fascinated by Google Gears so I had to immediately try out the sample code that you can download. The tutorial on the website gives a simple example of how to cache a few files using the Resource Store. It makes it very easy to setup a JSON manifest file that contains which pages you want to have cached.“

Link: Google Gears Caching of WordPress in PHP

Here’s what you can do with the API’s:

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

You can take a look at the sample applications at http://code.google.com/apis/gears/sample.html once you install the browser plugin.

The news out there is that Google’s planning to offer offline support for their current applications like Google Reader, Docs & Spreadsheets.

Let’s see how to Ajaxify a simple PHP function. Let’s create a simple function to output the server time:

function myServerTime(){
	return date("D M j G:i:s T Y");
}

First you have to include the PHPLiveX library and register your function. Here’s how to to it:

<? php
  include 'PHPLiveX.php';
 
	function myServerTime(){
		return date("D M j G:i:s T Y");
	}
 
  $phplive = new PHPLiveX("myServerTime"); //Register the function with PHPLiveX
?>

$phplive = new PHPLiveX(“myServerTime”); is used to register our function myServerTime with PHPLiveX

Next let’s build our HTML Display. Let’s keep it simple, but allowing the user to click a link to get the updated server time:

 <a href="">Get Server Time </a>

Now we’ll have to create areas to display our Loading Status and the results back from the server. Let’s create two divs for this.

<span id="loading" style="visibility:hidden">Loading...</span>
<span id="serverResult" style='clear:both;'></span>

You’ll notice that the loading span’s visibility has been set to hidden by default. PHPLiveX will use this to show the loading indicator when an action is being performed.

Now let’s get the entire HTML created. PHPLiveX autogenerates the Javascript required to create the AJAX calls, this has to take place in the html head section. To generate the Javascript all you need to call is $phplive->Run(). So let’s get to the entire script with the HTML:

<? php
  include 'PHPLiveX.php';
 
	function myServerTime(){
		return date("D M j G:i:s T Y");
	}
 
  $phplive = new PHPLiveX("myServerTime"); //Register the function with PHPLiveX
?>
<html>
	<head>
		<title>My Ajax Server Time</title>
		<script>
			<?php
				$phplive->Run();
			?>
		</script>
</head>
<body>
 
<a href="javascript:myServerTime('', 'target=serverResult,preload=loading');">Get Server Time</a>
 
<span id="loading" style="visibility:hidden">Loading...</span>
<span id="serverResult"></span>
</body>
</html>

You’ll notice that in the Get Server Time link there’s a little bit of Javascript – javascript:myServerTime(”, ‘target=serverResult,preload=loading’);. That’s used to call the myServerTime function from Javascript. The first parameter is null since our function myServerTime doesn’t accept any parameters. The second parameter tells PHPLiveX to send the output to the “serverResult” div and use the “loading” div as the preloader.

That’s it ! You can see a demo of this here.
Get the source code for this tutorial here. This includes version 2.2 of the PHPLiveX library.

I’ll put up a tutorial on how to use PHPLiveX for a whois lookup next week.

Link to PHPLiveX: PHPLiveX -> An Open Source PHP/Ajax Library

Miniajax.com is a showcase ofwhat’s hot in Ajax, with link to demos and tutorials showing how they’re done. Here are some of what you can see at miniajax.com

• Ajax StarRating
• Ajax Contact Form
• In-place editing (like Flickr)
• Bubble Tool-tips
• Heatmap for websites and much more…

Link: miniajax.com

Looking for a quick way to design Databases without having to download software? Here’s an Ajax application which allows you to design databases online without having anything other than a web browsers installed on your system

This application allows you to define your tables and rows through an easy to use web interface. You can also link tables together by dragging and dropping the primary keys into other tables. You can export the database tables as XML, MS SQL and SQL Server statements.

Link: SQL Designer

The ActiveTable library creates an editable HTML table from a MySQL database table.

Link: AJAX ActiveTable – Jonathan Diehl’s Wiki

Here’s a Demo of Ajax Active Table (This loads from the author’s site in an iframe and may take some time to load):

Read on: Handling large files with(out) PHP – ThinkPHP /dev/blog

Installation and Setup:

Download the latest version of My-Bic (v0.6.3) from http://www.litfuel.net/mybic/index.html?page=download and copy the files over a folder under the webroot of your server.

You’ll need to change the following lines in the mybic_server.php file :

define("SERVER_ROOT", "d:/wamp/www/mybic/");
This defines the base path of the folder where this file exists.

define("INC_PATH", SERVER_ROOT);
This defines where your custom classes will be places. Let’s leave this as it is for this tutorial.

Client-Side
Let’s start with a basic form which you’ll need for feedback:

Feedback Form

Server Side
On the client side, we’re calling a class ajaxfeedback to process the request. Let’s get to creating the server-side program to process the request. The file you’ll have to create will be ajaxfeedback.php. In this file let’s put in the following code:

class ajaxfeedback {
var $queryVars;
function ajaxfeedback( $queryVars )
{
$this->queryVars = $queryVars;
}
/**
* Method to return the status of the AJAX transaction
*
* @return string A string of raw HTML fetched from the Server
*/
function return_response()
{
$resp = 'ok';
return $resp;
}
function is_authorized()
{
return true;
}
}

?>

Looking at the code, you’ll see that we’re creating a class called ajaxfeedback which has a constructor which takes the query variables and sets it internally.
The return_response method is used to return the status of the Ajax transaction. In this method let’s add a little bit of form validation:

function return_response()
{
// Save Inputs to database here and create the return
// result
if ( $this->queryVars['name'] == "" ) {
$resp = "Please enter your name";
} else
if ( $this->queryVars['email'] == "" ) {
$resp = "Please enter your email id";
} else
if ( $this->queryVars['feedback'] == "" ) {
$resp = "Please enter your feedback";
} else {
// Save Inputs to database here
$resp = "Thank you for your comments";
}
return $resp;
}

In the last else statement, you can insert your database routine to save the form values. Once saved we’re passing on a confirmation message back to the client-side.

Now your completed ajaxfeedback.php should look like :

class ajaxfeedback {
var $queryVars;
function ajaxfeedback( $queryVars )
{
$this->queryVars = $queryVars;
}
/**
* *
* Method to return the status of the AJAX transaction
*
*
* @return string A string of raw HTML fetched from the Server
*/
function return_response()
{
// Save Inputs to database here and create the return
// result
if ( $this->queryVars['name'] == "" ) {
$resp = "Please enter your name";
} else
if ( $this->queryVars['email'] == "" ) {
$resp = "Please enter your email id";
} else
if ( $this->queryVars['feedback'] == "" ) {
$resp = "Please enter your feedback";
} else {
// Save Inputs to database here
$resp = "Thank you for your comments";
}
return $resp;
}
function is_authorized()
{
return true;
}
}

?>

Your Ajax feedback form is ready to use. Fire up your browser and open ajaxfeedback.html in your browser. If you’d like to see a demo of this form, head over to :

http://vinuthomas.com/code/my-bic/ajax_feedback.html

You’ll see the debug window open up as soon as you submit the form. The debug window gives you information useful while debugging you ajax application.

Source code for this tutorial: ajax_feedback.zip

Transition Parent – Yahoo! Design Pattern Library

With the widespread acceptance of Ajax (and the resurgence of Flash) new ways of interacting on the web have emerged. In many ways, these interactions are not new. Interactions like drag and drop and inline editing have been mainstream on desktop applications for over 20 years. What is new, though, is the emergence of these idioms on the web. 

Link: Design Pattern: Invitation

Another interesting link on this topic: Mind Hacking Visual Transitions

“Snap is a very different way of searching, one we suspect will take a bit of getting used to. As you can imagine, we’ve done a ton of usability testing in developing Snap and here’s what we’ve learned: while Snap isn’t complicated, it is a different way of searching in which a little bit of orientation goes a long way to increasing satisfaction. So, we’ve tried to help introduce ourselves to you in a number of ways. “

Link: Snap

Link: Software As She’s Developed – Comet: It’s Ajax for “Pushâ€? (Podcast)