AJAX-GUI-Widgets

Widgets

2007-03-12T08:32:00.001-07:00

ActiveWidgets is a fast and compact javascript component library. It includes very powerful datagrid control, AJAX data tools for JSON, XML and CSV, and several additional controls, like tabs, combo, tree, checkbox list and others.

Ajax GUI applications

2007-03-12T08:27:00.000-07:00

To build great Ajax GUI applications one needs great reusable Ajax GUI Classes (a Class Library or GUI-API) that are more flexible and easy to use than desktop GUI Classes, for example, Java/Swing or Windows/VC++.

Example 3

2007-03-03T17:26:00.001-08:00

function processAjaxResponse()
{ // only if req shows "loaded"
if (req.readyState == 4)
{ // only if "OK" if (req.status == 200)
{ $('votes').innerHTML = req.responseText; }
else { alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}}

Example 2

2007-03-03T17:24:00.000-08:00

Example

2007-03-03T17:22:00.000-08:00

As alluded to above, the heart of Ajax is the XmlHttpRequest JavaScript object. The following sample article ranking system was built to walk you though the low-level basics of Ajax:

function castVote(rank)
{
var url = "/ajax-demo/static-article-ranking.html"; var callback = processAjaxResponse; executeXhr(callback, url);
}

This function creates a URL for the server resource you want to communicate with, and calls your internal executeXhr function, providing a callback JavaScript function to be executed once the server response is available.

Working

2007-03-03T17:17:00.000-08:00

The kernel of Ajax is the XmlHttpRequest JavaScript object. This JavaScript object was originally introduced in Internet Explorer 5, and it is the enabling technology that allows asynchronous requests. In short, XmlHttpRequest lets you use JavaScript to make a request to the server and process the response without blocking the user.

By performing screen updates on the client, you have a great amount of flexibility when it comes to creating your Web site. Here are some ideas for what you can accomplish with Ajax:
Dynamically update the totals on your shopping cart without forcing the user to click Update and wait for the server to resend the entire page.

Increase site performance by reducing the amount of data downloaded from the server. For example, on Amazon's shopping cart page, when I update the quantity of an item in my basket, the entire page is reloaded, which forces 32K of data to be downloaded. If you use Ajax to calculate the new total, the server can respond with just the new total value, thereby reducing the required bandwidth 100 fold.
Eliminate page refreshes every time there is user input. For example, if the user clicks Next on a paginated list, Ajax allows you to just refresh the list with the server data, instead of redrawing the entire page.

Edit table data directly in place, without requiring the user to navigate to a new page to edit the data. With Ajax, when the user clicks Edit, you can redraw the static table into a table with editable contents. Once the user clicks Done, you can spawn an Ajax request to update the server, and redraw the table to have static, display-only data.

More Intro

2007-03-03T17:16:00.000-08:00

The term Ajax is used to describe a set of technologies that allow browsers to provide users with a more natural browsing experience.
Before Ajax, Web sites forced their users into the submit/wait/redisplay paradigm, where the users' actions were always synchronized with the server's "think time."

Ajax provides the ability to communicate with the server asynchronously, thereby freeing the user experience from the request/response cycle. With Ajax, when a user clicks a button, you can use JavaScript and DHTML to immediately update the UI, and spawn an asynchronous request to the server to perform an update or query a database.
When the request returns, you can then use JavaScript and CSS to update your UI accordingly without refreshing the entire page.
Most importantly, users don't even know your code is communicating with the server: the Web site feels like it's instantly responding.

INTRO

2007-03-03T16:56:00.000-08:00

This article introduces a methodology, Ajax, you can use to build more dynamic and responsive Web applications. The key lies in the combination of browser-side JavaScript, DHTML, and asynchronous communication with the server.
This article also demonstrates just how easy it is to start using this approach, by leveraging an Ajax framework (DWR) to construct an application that communicates with backend services directly from the browser.
If used properly, this tremendous power allows your application to be more natural and responsive to your users, thereby providing an improved browsing experience.