How To: Upload Files in Java using Ajax

Introduction

Browser-based file uploads, in particular those involving the HTML <input type="file"> tag, have always been rather lacking. As I am sure most of you are aware, uploading files exceeding 10MB often causes a very poor user experience. Once a user submits the file, the browser will appear to be inactive while it attempts to upload the file to the server.

While this happening in the background, many impatient users would start to assume that the server is "hanging" and would try to submit the file again. This of course, only helps to make matters worse.

In an attempt to make uploading of files more user-friendly, many sites display an indeterminate progress animation (such as a rotating icon) once the user submits the file. Although this technique may be useful in keeping the user distracted while the upload being submitted to the server, it offers very little information on the status of the file upload.

Another attempt at solving the problem is to implement an applet that uploads the file to the server through FTP. The drawback with this solution is that it limits your audience to those that have a Java-enabled browser.

Continue Reading The Article

How To: Submit Form using Ajax

The new release of CakePHP (RC2) comes with a completely rewritten AjaxHelper::form() function (with the disadvantage that it breaks existing code). Let’s look how to use it:

$ajax->form(array('action' => '/controller/action'), 'post',
array('update' => 'mydiv'));

I think this code is self-explanatory (if not, please write a comment). What’s cool about this code is the fact that it will also work when you disable JavaScript. The form will submit the form data in both cases to /controller/action.

That means you have to distinguish in your action whether it is called via Ajax or not, and then you have at least to select the appropriate layout. You can do it in the following way (thanks to nate for this hint):

Continue Reading the Tutorial

How To: Learn AJAX in 20 minutes

How To: Learn AJAX in 20 minutes

Here is a quick overview and example of AJAX in action. Before you begin, this example will only work in FireFox work in FireFox and IE7. You’ll have to change few things in the JavaScript for it to work in IE6. To download the files used below click here.

If you don’t have PHP/Apache installed, follow the tutorial I made to install it. The example below assumes you know the basics of PHP, you can learn as you go along if you don’t. A good reference is the base PHP website.

AJAX stands for Asynchronous JavaScript and XML. Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.

With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

Continue Reading The Article

What The Hell Is Ajax? For Non-Techies!!!!

Introduction

Have you wondered what AJAX is, and whether you should learn to apply it in your web development work? You’ve probably heard the buzzword, but what exactly makes AJAX tick? Let’s take a look “under the hood” and see just what the buzz is all about.

What is AJAX?

AJAX is an acronym for Asynchronous JavaScript and XML. It is a development technique for creating interactive web applications. Unlike classic web pages, which must load in their entirety if content changes, AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.

What Does Ajax Uses?

1. CSS, for marking up and styling information.

2. The Document Object Model accessed with a client-side scripting language like JavaScript to dynamically display and interact with the information presented.

3. The XMLHttpRequest object to exchange data asynchronously with the web server.

4. XML is sometimes used as the format for transferring data between the server and client, although any format will work.

Continue Reading The Tutorial

How to make Username Avaialable or not checking Script using Ajax?

How to make Username Avaialable or not checking Script using Ajax?

The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use is taken already or not, without having to submit a form and reload the page.

Read the complete tutorial
AJAX username availability checking

How to Make Sortable Tables using Ajax???/

How to Make Sortable Tables using Ajax???

Read the tutorial and check for yourself.

Sorttable: Make all your tables sortable
While the web design community gradually moves away from using tables to lay out the structure of a page, tables really do have a vital use, their original use; they're for laying out tabular data.

Best Collection of Tutorials for Ajax Begineers and Newbies!!!!

Best Collection of Tutorials for Ajax Begineers and Newbies!!!!

An Introduction to AJAX
A very nice introduction to AJAX.

Nitty Gritty Ajax
In the course of this tutorial, we're going to look at what Ajax can do. Then we'll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.

A simple AJAX example
Based on Rasmus's 30 second AJAX tutorial, I've cobbled together a very rudimentary example of one approach to AJAX programming. A "Hello, World" AJAX program, if you will. You can view the demo here on my site, and download the source code (document attachment at the bottom of this article).

A List Apart: Articles: Getting Started with Ajax
The start of 2005 saw the rise of a relatively new technology, dubbed "Ajax" by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts.

Ajax Toybox
Justin has put together a nice group of AJAX tutorials including, Hello, World, Dynamic City, State Lookup, Ajax to Clean Your Clock, Ajax Calculator and an RSS News Ticker.

Introduction to Ajax
When it comes to Ajax, the reality is that it involves a lot of technologies -- to get beyond the basics, you need to drill down into several different technologies (which is why I'll spend the first several articles in this series breaking apart each one of them).

Ajax Toolbox / XMLHttpRequest AjaxRequest Library Examples
A great group of AJAX examples.

Rasmus' 30 second AJAX Tutorial
I find a lot of this AJAX stuff a bit of a hype. Lots of people have been using similar things long before it became "AJAX". And it really isn't as complicated as a lot of people make it out to be. Here is a simple example from one of my apps.

An Ajax "Hello World" project to Get You Going
Sometimes we all want something very simple to build a thorough understanding of the mechanics of a new technique before we dive into the deeper water beyond. Now, if you are into ASP.NET and not PHP you might like to take a look at my version of this ultra-simple introduction to Ajax with sincere thanks to the original author.

Ajax Beginners Tutorial
In this tutorial we'll discuss the basic principles of remote scripting using Ajax, a combination of javascript and XML to allow web pages to be updated with new information from the server, without the user having to wait for a page refresh.

I hope you find these links useful. Please drop in your comments.