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:
Here’s a cool image gallery script written in Javascript. It’s quite easy to integrate into your site. This is how the author describes ImageFlow:
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 :
Instead of eyeball tracking for usability professionals, here’s a way to track the mouse movements and click events of a user on a page.
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.
If you’re working on Ajax based websites, you’ll always face usability problems when users click on the Back or Forward buttons on the broswer. Using Really Simple History (RSH) allows you over come this issue.
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.
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.“
Google has released a beta version of Google Gears which is an open source browser extension which enables web applications to provide offline functionality using following JavaScript APIs.
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
If you’re looking for the quickest way to get your PHP functionality Ajax enabled, you’ve got to take a look at PHPLiveX. It greatly simplifies the process of Ajaxifying your PHP code without knowing Javascript code.
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:
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:
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.
Loading…
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:
include 'PHPLiveX.php';
function myServerTime(){
return date("D M j G:i:s T Y");
}
$phplive = new PHPLiveX("myServerTime"); //Register the function with PHPLiveX
?>
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.
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
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.
