Ajax Tutorial : Ajax Help and Tutorials

Ext JS, the JavaScript framework with Ajax and UI Components

Ext JS is a JavaScript Library/Framework which works in conjunction with Prototype, YahooUI and jQuery. It’s probably the most exciting toolkit available for building web 2.0 websites right now. It’s jam packed with features, and is designed to make life much easier for building great UI in JavaScript.

I’ll not dig to deep right now, I suggest you check out the example and demos first to see what you think.

Below is a the script used to grab XML data via Ajax and populate a grid (sortable table like object):

/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    // create the Data Store
    var ds = new Ext.data.Store({
        // load using HTTP
        proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

    var cm = new Ext.grid.ColumnModel([
	    {header: "Author", width: 120, dataIndex: 'Author'},
		{header: "Title", width: 180, dataIndex: 'Title'},
		{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
		{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
	]);
    cm.defaultSortable = true;

    // create the grid
    var grid = new Ext.grid.Grid('example-grid', {
        ds: ds,
        cm: cm
    });
    grid.render();

    ds.load();
});

Take a look at the JavaScript generated grid here.

Hopefully this short intro will wet your appetite, more to come soon.

Great work Jack (and the rest of the Ext JS team) for this superb library, can’t wait to see more!!

Here is another very interesting Ajax resource well worth a read. This article give some nice examples of things you can do with Ajax, some tutorials and also explains the history of Ajax. The article is several months old and you may already have came across it before - but it certainly deserves a mention here. Check out DHTMLNirvana’s Ajax - What is it good for?

Just read an interesting article over at sitepoint by James Edwards. Titled AJAX and Screenreaders: When Can it Work?

We’ve all heard a great deal of buzz about AJAX in the last few months, and with this talk has come a legion of articles, tips, presentations and practical APIs designed to explore the possibilities and try to arrive at best-practice techniques. But, for all of the excitement and hype, still very little has been said on the subject of AJAX and accessibility.

Nice thought provoking article.

Ajax Frameworks, Tools and Libraries with PHP

Xajax - PHP Class Library

What Xajax is:

‘xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.’

How it works:

‘The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from your application. When called, these wrapper functions use JavaScript’s XMLHttpRequest object to asynchronously communicate with the xajax object on the server which calls the corresponding PHP functions. Upon completion, an xajax XML response is returned from the PHP functions, which xajax passes back to the application. The XML response contains instructions and data that are parsed by xajax’s JavaScript message pump and used to update the content of your application.’

Find out more about Xajax at the XajaxProject website - or visit their sourceforce project page

Sajax - Tool

What Sajax is:

‘Sajax is a tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Sajax makes it easy to call ASP, Cold Fusion, Io, Lua, Perl, PHP, Python or Ruby functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.’

How it works:

‘Our toolkit creates a JavaScript stub function that calls functions you export from your script. It handles all the connection details and calls a callback function of your design when the data is available.’

Find out more about Sajax at the ModernMethods
website.

Ajax HTML from PEAR - Libraries

This is a PHP and JavaScript package available through the official PEAR website. For simple examples tutorials, visit the package authors website. To download this package, visit the HTML_AJAX Package page on PEAR.

XOAD - PHP Based Ajax Framework (formerly known as NAJAX)

‘XOAD is a PHP based AJAX/XAP object oriented framework that allows you to create richer web applications.

XOAD has many benefits:

it uses JSON and native PHP serialized objects to communicate,
special attention has been paid to security,
supports server side events (observation),
client side events (XOAD Events),
server and client extensions,
HTML manipulation (extension),
Caching (extension).’

Find out more about XOAD at the XOAD
Wiki website.

AjaxAC - PHP Based Ajax Framework

‘AjaxAC is an open-source framework written in PHP, used to develop/create/generate AJAX applications. The fundamental idea behind AJAX (Asynchronous JavaScript And XML) is to use the XMLHttpRequest object to change a web page state using background HTTP sub-requests without reloading the entire page. It is released under the terms of the Apache License v2.0.’

‘The basic idea behind AjaxAC is that you create an AjaxAC application, which in itself contains a number of action handlers and event handlers. An application in this context might mean an entire web site powered by AJAX, or it could mean a subset of a form (such as the CountryRegionCityJax example, which could be a small part of a signup form, for example).’

Find out more about the AjaxAC Framework

CPAINT - Ajax Toolkit (Cross-Platform Asynchronous INterface Toolkit)

What CPAINT is?

‘CPAINT (Cross-Platform Asynchronous INterface Toolkit) is a multi-language toolkit that helps web developers design and implement AJAX web applications with ease and flexibility. It was originally born out of the author’s frustration and disappointment with other open-source AJAX toolkits. It is built on the same principles of AJAX, utilizing JavaScript and the XMLHTTP object on the client-side and the appropriate scripting language on the server-side to complete the full circle of data passing from client to server and back.’

Some Features:

‘Flexibility - built for small and enterprise applications
100% OOP approach
Supports multiple scripting languages (ASP & PHP)
Unified JavaScript file for all functions
Supports both Remote Scripting and XML
Supports both local & remote functions
Single or multiple XMLHTTP objects
Returns backend data as text or as a JavaScript XML/DOM document object
Can support both POST & GET requests
Backend proxy functions for accessing remote functions and data
Tested with all major browsers
Distributed under the GNU GPL & LGPL ‘

Find out more at the CPAINT website or visit their SourceForge Project page.

This list is in no way exhaustive.

Max Kiesler has created a list of 30 Ajax Tutorials covering various common usages.
Tutorials cover:

Ajax Client-Server Communication
Ajax Drag and Drop
Ajax Forms
Ajax File Uploader
Ajax Framework and Toolkit
Ajax Getting Started
Ajax Image Gallery
Ajax Keyword Suggest
Ajax Live Search
Ajax Sorting
Ajax Tabbed Pages

Although not all of these actually use Ajax (only javascript) - they are still worth a look at. Ajax is a bit of a buzz word these days - so you’ll find many new JavaScript tutorials are masked as being Ajax (which is asynchronous, where many will be strictly client-side). There are great benifits with Ajax, but many things can be done without it!