Ajax Help and Resources

                          

In this tutorial you will learn Ajax. Ajax is new technologies for the development of web
application. Ajax stands for Asynchronous JavaScript and XML. Ajax is used to fetch the
data from web server without refreshing the whole page. JavaScript is used to send the
request to web server in order to fetch the data. Following tutorials teaches you Ajax in
detail.

1. What is Ajax?
Learn the basics to Ajax. This section explains the importance of Ajax in web
programming.
  
2. Role Of Ajax In enhancing User Experience
AJAX is not a new technology but a combination of several existing technologies
in a new way. These include HTML, CSS, DOM, XML, XSLT,
XMLHttpRequest and Javascript. The acronym AJAX stands for Asynchronous
Javascript and XML. AJAX is based on open standards supported by many
browsers and platforms. AJAX is a new paradigm for building web application.   
  
3. First Ajax Example
In this section we will create a simple Ajax Application for displaying the current
date and time. Date and time information are retrieved from the server side php
script.
  
4. Ajax Example to multiply two values
In this section we will create an application for multiplication of two numbers.
The multiplication are done at server (server side php) program and result is
displayed on the client browser.
 
5. Ajax Login Example
In this program you will learn  how to validate the user and show alert message if
user name or password are not correct.
  
6. Ajax Registration Program
In this Ajax Registration  program you will learn  how to validate the user
registration through ajax call and then display the alert massage if no values are
provided in the username and password fields.    
       

Ajax Resources

1. Ajax Code Libraries and Tools

Code libraries and loots for the development of your Ajax based applications.
 These days Ajax has been used for the development of responsive web application
making it more user friendly.
  
2. Ajax Chat
List of chat application developed in Ajax. These chat applications are very
responsive and don't require full page refresh to send and retrieve the message
from server.
   
3. Ajax Tutorials
Collection of many Tutorials on Ajax. These Ajax Tutorials will help you quick
start your Ajax development.
   
4. Ajax Examples
Links to many Ajax Tutorials and examples.
  
5. Ajax Books
Many ajax books that you can refer.
  
6. Ajax Tools
Resources to many Ajax Tools for easy development of Ajax Applications.
       
7. Ajax Software
There are many software available these days which you can use for the
development of your web based applications. Now a days Ajax can help you to
help the desktop grade applications.
               

Ajax Books0

1. Ajax PHP Book

Ajax Tool Kit

jquery

                          

What is Ajax - Asynchronous JavaScript

and XML
                          
This section explains you the Ajax. You will learn the basics of Ajax. Ajax is of the most
important technologies for the development of highly interactive web application and due
to its features it have become extremely popular these days.

What is Ajax?

Asynchronous JavaScript and XML or Ajax for short is new web development technique
used for the development of most interactive website. Ajax helps you in making your
web application more interactive by retrieving small amount of data from web server and
then showing it on your application. You can do all these things without refreshing your
page. 

Usually in all the web applications, the user enters the data into the form and then clicks
on the submit button to submit the request to the server. Server processes the request and
returns the view in new page ( by reloading the whole page). This process is inefficient,
time consuming, and a little frustrating for you user if the only the small amount of data
exchange is required. For example in an user registration form, this can be frustrating
thing for the user, as whole page is reloaded only to check the availability of the user
name. Ajax will help in making your application more interactive. With the help of Ajax
you can tune your application to check the availability of the user name without
refreshing the whole page.

Understanding the technology behind Ajax

Ajax is not a single technology, but it is a combination of many technologies. These

technologies are supported by modern web browsers. Following are techniques used in
the Ajax applications.

 JavaScript:
JavaScript is used to make a request to the web server. Once the response is
returned by the webserver, more JavaScript can be used to update the current
page. DHTML and CSS is used to show the output to the user. JavaScript is used
very heavily to provide teh dynamic behavior to the application.
   
 Asynchronous Call to the Server:
Most of the Ajax application used the XMLHttpRequest object to send the request
to the web server. These calls are Asynchronous and there is no need to wait for
the response to come back. User can do the normal work without any problem.
  
 XML:
XML may be used to receive the data returned from the web server. JavaScript
can be used to process the XML data returned from the web server easily.

How Ajax Works?

When user first visits the page, the Ajax engine is initialized and loaded. From that point
of time user interacts with Ajax engine to interact with the web server. The Ajax engine
operates asynchronously while sending the request to the server and receiving the
response from server. Ajax life cycle within the web browser can be divided into
following stages:

 User Visit to the page:  User visits the URL by typing URL in browser or
clicking a link from some other page.
   
 Initialization of Ajax engine:
When the page is initially loaded, the Ajax engine is also initialized. The Ajax
engine can also be set to continuously refresh the page content without refreshing
the whole page.
   
 Event Processing Loop:
* Browser event may instruct the Ajax engine to send request to server and
receive the response data
* Server response - Ajax engine receives the response from the server. Then it
calls the JavaScript call back functions
* Browser (View) update - JavaScript request call back functions is used to
update the browser. DHTML and css is used to update the browser display.

Benefits of Ajax

Ajax is new very promising technology, which has become extremely popular these days.
Here are the benefits of using Ajax:

 Ajax can be used for creating rich, web-based applications that look and works
like a desktop application
   
 Ajax is easy to learn. Ajax is based on JavaScript and existing technologies like
XML, CSS, DHTML. etc. So, its very easy to learn Ajax
  
 Ajax can be used to develop web applications that can update the page data
continuously without refreshing the whole page

                          

The Role of AJAX in enhancing the user

experience on the Web ( Sagar G Arlekar
- June 2006)
                          
AJAX is not a new technology but a combination of several existing technologies in a
new way. These include HTML, CSS, DOM, XML, XSLT, XMLHttpRequest and
Javascript. The acronym AJAX stands for Asynchronous Javascript and XML. AJAX is
based on open standards supported by many browsers and platforms. AJAX is a new
paradigm for building web application.   

AJAX applications eliminate the start-stop-start-stop nature of traditional web pages

hence allow web application to look and behave like the desktop ones, of course to a
limited extent. AJAX allows pages to request small bits of information from the server
instead of entire pages. This incremental updating of pages eliminates the page refresh
problem and slow response that have plagued Web applications since their inception.    

AJAX has received tremendous industry recognition and support. The major software
giants and web portals have adopted it. A large number of AJAX toolkits and libraries are
available for free. AJAX does have its limitation but most of them can be overcome by
integrating AJAX with other technologies whenever required. 

AJAX is here to change the user experience on desktop as well as on mobile devices.

Rich Internet Applications  

According to Wikipedia Rich Internet Applications (RIA) are web applications that have
the features and functionality of traditional desktop applications. RIA's transfer the
processing necessary for the user interface to the web client but keep the bulk of the
data back on the application server.  

Traditional web applications centered all activity around a client-server architecture with
all processing done on the server, and the client only displaying static content. The
biggest drawback with this system is that all interaction must pass through the server,
which requires data to be sent to the server, the server to respond, and the page to be
reloaded on the client with the response. Most traditional web applications have clumsier
and difficult to use interfaces compared to desktop ones. The primary difference between
a RIA and traditional web applications is the amount and quality of interaction between
the user and the interface. An RIA can use a wider range of controls to improve users’
interaction allowing efficient interactions, better error management, feedback and overall
user experience. Another benefit of RIAs is that data can be cached in the client, allowing
a vastly more responsive user interface and fewer round trips to the server. 

Some of the features and benefits delivered by RIA's are listed below

a) Allows feedback, confirmation and errors messages to be displayed on same

page/view.

b) Wider variety of controls e.g. sliders, date pickers, windows, tabs, spinners etc.

c) No installation, just an AJAX enabled browser required

d) Higher immunity to viruses and piracy.

e) Reduced load on server resources as processing is distributes over server and client

f) Lowered application development and deployment costs

g) Reduction in network traffic due to more intelligent client and selective data request  

The most common technologies used for building RIA's are Java applets and web start,
Adobe Flash and Flex, and AJAX. Efforts are being made to make AJAX work with the
other mentioned technologies. Adobe Systems has released libraries to help developers
bridge Adobe Flash and Flex technology with AJAX. Similarly libraries are available to
integrate AJAX with Java,.NET,PHP,Python,Perl,Ruby and other backend technologies.

What can AJAX do?  

To start with let me tell the readers that this entire document was composed online using
an AJAX powered word processor available at www.writely.com 

   AJAX is playing a crucial role in making Web 2.0 promises a reality. Some of the

features of web 2.0 are

   a) Use of Web as the platform

   b) Software delivered as a service instead of packaged software

   c) Cost-effective scalability

   d) Architecture with user participation  

 AJAX interfaces are a key component of many Web 2.0 applications. Google, Yahoo,
Microsoft, Amazon and many others have embraced AJAX. 

Google services like Maps, Gmail, Suggest, Reader use it. Google Maps, which is

considered as one of the most impressive and popular AJAX based application, allows
user to zoom in and out and scroll the map in four directions very much like a desktop
application. User can drag the map on screen with the mouse pointer and double click to
center. All this with no clicking and waiting for graphics to reload each time you want to
view the adjacent parts of a map. Gmail uses AJAX for spell-check, auto save, new email
check and other functions. In Google suggest suggestions are provided in real time as the
user types the search query. 

Yahoo's Flickr and instant search use AJAX. In Flickr the text-editing and tagging
interface uses it. Instant search gives user the result as he/she is typing the query. Yahoo
frontpage too has been AJAXified. 
Windows Live is a free AJAX virtual desktop. Some of its features are search,
news, maps, email integration, instant messenger, contact management tool etc. More
features can be included through the use of third party 'Gadgets'.

Meebo is a web based instant messenger client, it supports Yahoo, Gtalk, MSN and AIM
protocols. Writely, Zoho, gOffice, AjaxOffice are AJAX based online word processors;
some are full-fledged office suits. Digg is a technology news website that combines
social bookmarking, blogging, RSS, and non-hierarchical editorial control.
Travbuddy lets users create travel journals and share travel experiences, reviews and
photos. This application also uses Google Maps. Pageflakes, Netvibes and Protopage are
free startpages.

Zimbra is an AJAX based collaboration suit. Kiko and Calendarhub are online calendars.
Pixoh is an online photo editing application

The impact of AJAX on user experience  

AJAX user interfaces are highly responsive giving users the feeling that changes are
instantaneous. It also introduces multiple segments of interactivity on the same
page. User may submit a form and immediately after concentrate on some text or click on
a menu item in some other segment. Even in case of an error in one segment other
segments can stay usable. AJAX applications usually avoid the need of horizontal and
vertical scrollbars, this adds to user convenience.  

Existing AJAX applications can be categorized into two types 1) partially AJAXed - here
AJAX is used to provide certain functionalities e.g. Flickr and 2) fully AJAXed - here
AJAX is necessary for functionalities as well as for user-interface e.g. Meebo, Google
Maps, Windows Live

The way users use fully AJAXed applications is very different from their traditional web
experience. In these applications the concept of web pages breaks down, surfing a site or
using an applications is not just clicking links and loading fresh pages. In
some applications the response may result in changes to small/certain parts of the current
view, the URL in the address bar remains unchanged and the Back, Forward, Reload and
Bookmark buttons are rendered meaningless. The browser is not certain to show the
previous state of the application on hitting Back/Forward buttons. Users need to adapt to
this change in browser behavior.  

Some of the processes/elements in user experience which have undergone AJAXification

are mentioned below  

a) Hierarchical tree navigation - users find it irritating to navigate trees in Directories

and Discussion threads, AJAX makes expansion/contraction of tree nodes smooth
without making the user wait for the new page to load  

b) Form value check - as the user fills in a online form an AJAX call could be made to
the server to do tasks like checking availability of user name, measure strength of
password, populate drop-down boxes further down based on data already entered. Also
auto-completion and spell-check features can be provided  

c) Rapid user-user communication - browser based chat applications and games can be

built without the need to manually refresh the page to get current data/state 

d) Data filtering and rearranging - this include applying a filter, sorting by date or some
particular column values, relocate iframes, divs and page elements 

e) Server-side pushes - AJAX enables simulation of server-side push technology using

polling

AJAX on mobile  

 Pocket PC and Smartphone Devices (2003 and later) support AJAX.  

Opera Software has released Opera Platform SDK, a kit for developing and
running software on mobile phones. This SDK will allow development of AJAX based
rich mobile applications. In addition the Opera Platform SDK will help developers adapt
existing content and web applications to run on mobile phones.  

 By storing an AJAX application on the mobile phone and allowing XML-
communication with a Web-server, the traditional bandwidth constraints become less of
an issue. This also enables transparent updating of information pushed to the mobile
phone.  

With increasing processor power and wireless network speeds AJAX is sure to play an
important role in enhancing mobile user experience.

About Author: Author has developed a project called "ichat" using Ajax technologies.
You can visit http://ichatr.goa-developers.org/ for getting more information on the
project.

                          

Ajax First Example - Print Date and Time

                          

In this section we will create a simple Ajax Application for displaying the current date
and time. Date and time information are retrieved asynchronously from the server side
php script. Our HTML page calls serverside php script to retrieve the today's date. Once
the time data is retrieved from the server, it uses javascript and css to display the time on
the HTML page.
 

Here is the code of HTML File:

 <html>
<head>

<title>Ajax Example</title>

<script language="Javascript">

function postRequest(strURL) {

var xmlHttp;

if (window.XMLHttpRequest) { // Mozilla,
Safari, ...

var xmlHttp = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

var xmlHttp = new

ActiveXObject("Microsoft.XMLHTTP");

xmlHttp.open('POST', strURL, true);

xmlHttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

updatepage(xmlHttp.responseText);

xmlHttp.send(strURL);

function updatepage(str){

document.getElementById("result").innerHTML =
"<font color='red' size='5'>" + str +
"</font>";;

function showCurrentTime(){

var rnd = Math.random();

var url="time.php?id="+rnd;
 postRequest(url);

</script>

</head>

<body>

<h1 align="center"><font
color="#000080">Ajax Example</font></h1>

<p><font color="#000080">&nbsp;This very

simple Ajax Example retrieves the

current date and time from server and

shows on the form. To view the current

date and time click on the following

button.</font></p>

<form name="f1">

<p align="center"><font
color="#000080">&nbsp;<input value=" Show Time
"
type="button"
onclick='JavaScript:showCurrentTime()'
name="showdate"></font></p>

<div id="result" align="center"></div>

</form>

<div id=result></div>

</body>

</html>

When use clicks on the "Show Time" button, the showCurrentTime() is called. The the
function showCurrentTime() calls the time.php using Ajax and then updates the time
values retrieved from server.

Here is the code of PHP (time.php) file:

<?
print date("l M dS, Y,
H:i:s");
?>
The above PHP code prints current date and time.

Try the example Online

                          

Ajax Multiplication Program

                          

Ajax is a web development technique where you can send the request to server without
refreshing the page. In this section, you will learn how to multiply two values and display
the result on the page. This program calls the method 'callmultiply()' for the multiplying 
the values entered by user. The multiplication operation is performed in the 'multiply.php'
page at serverside. The 'callmultiply()' sends the numbers as url string by calling the
'postRequest()' method. The 'postRequest()' method generates Ajax call to serverside
script 'multiply.php'. And finally 'updatepage()' method updates the multiplication result
on the html page.

Example of Ajax multiplication program:

<html>
     <head>
          <title>Ajax Multiply Example</title>
          <script language="Javascript">
               function postRequest(strURL){
                    var xmlHttp;
                    if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
                         var xmlHttp = new XMLHttpRequest();
                    }
                    else if(window.ActiveXObject){ // For Internet Explorer
                         var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlHttp.open('POST', strURL, true);
                    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
                    xmlHttp.onreadystatechange = function(){
                         if (xmlHttp.readyState == 4){
                              updatepage(xmlHttp.responseText);
                         }
                    }
                    xmlHttp.send(strURL);
               }
               
               function updatepage(str){
                    document.getElementById('result').value = str;
               }
               
               function callMultiply(){
                    var a = parseInt(document.f1.a.value);
                    var b = parseInt(document.f1.b.value);
                    var url = "multiply.php?a=" + a + "&b=" + b + "";
                    postRequest(url);
               }
          </script>
     </head>
     
     <body>
          <h1 align="center"><font color="#000080">Ajax Example</font></h1>
          <form name="f1">
               <input name="a" id="a" value="">
               <input name="b" id="b" value="">
               <input name="result" type="text" id="result">
               <input type="button" value="Multiply" onClick="callMultiply()"
name="showmultiply">
          </form>
     </body>
</html>

Here is the code of the "multiply.php" page:

<?
     $a=$_GET["a"];
     $b=$_GET["b"];
     $mul=$a*$b;
     echo $mul;
?>

Try the example online

                          

Ajax Login Program

                          

In this program you will learn  how to validate the user and show alert message if user
name or password are not correct. These days almost all the e-comm applications requires
authentication before accessing the secured part of the web site. In this program we will
show how you can send ajax request to authenticate the user. 
When a user input username and password and press Login button,  'call_login()' function
is called. This method sends ajax request to server (login.php) to validate the user. We
have hardcoded the authonication mechanism e.g. if you enter login name admin and
password admin then the program will show you success message. Otherwise it will show
login failed message. You can change the authentication logic in the page and easily
authenticate use from database.

Example of Ajax login Program :

<html>
<head>
<script language="javascript">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}

function updatepage(str){
if(str=="yes"){
alert("Welcome User");
}else{
alert("Invalid Login! Please try again!");
}
}

function call_login(){
var username = window.document.f1.username.value;
var password = window.document.f1.password.value;
var url = "login.php?username=" + username + "&password=" +password ;
postRequest(url);
} 
</script>
</head>

<body>
<Center>

<form name="f1" onsubmit="return call_login();">

<table border="0" bgcolor="#CCCCFF" cellspacing="1" cellpadding="3"
width="287">
<tr>
<td align="left" colspan="2" width="275"><b><font size="5"
color="#000080">Login</font></b></td>
</tr>
<tr>
<td align="right" width="81"><b><font color="#000080">User
Name:</font></b></td>
<td width="184"><input type="text" name="username" id="user" size="20"
value="" /></td>
</tr>
<tr>
<td align="right" width="81"><b><font
color="#000080">Password:</font></b></td>
<td width="184"><input type="password" name="password" size="20"
value="" /></td>
</tr>
<tr>
<td colspan="2" align="center" width="275"><input type="button" name="a1"
value="Login" onclick="call_login()"></td>
</tr>
</table>
</form>

</center>
</body>
</html>

 Here is the code for login.php page:

<?
$username=$_GET["username"];
$password=$_GET["password"];
if($username=="admin" && $password=="admin"){
echo "yes";
}else{
echo "No";
}
?>

Try the example online

                          

Ajax Registration Program

                          

In this Ajax Registration  program you will learn  how to validate the user registration
through ajax call and then display the alert massage if no values are provided in the
username and password fields.

When a user input user Id and password and press Register button , method
'call_Register()'  will make ajax call. If  the value returned from the server is "yes" the
alert box will show 'Welcome for Register' otherwise it will show ' the Invalid
Id/password please enter the Id/password!'. 

Example of  Ajax Registration program:

<html>

      <head>

      <title>Ajax Registratiion program</title>

      <script language="javascript">

      function postRequest(strURL){

var xmlHttp;

if(window.XMLHttpRequest){ // For Mozilla, Safari, ...

var xmlHttp = new XMLHttpRequest();

else if(window.ActiveXObject){ // For Internet Explorer

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlHttp.open('POST', strURL, true);

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xmlHttp.onreadystatechange = function(){

if (xmlHttp.readyState == 4){

updatepage(xmlHttp.responseText);

xmlHttp.send(strURL);

}
function updatepage(str){

if(str == "no"){

       alert("Invalid Id/password! Please fill Currect Id/password")

}
                       else{

    alert("welcome for register !");

                        }

                     }

function call_register(){

var login_id =document.reg.uid.value;

                var password=document.reg.passwd.value;

var url = "Register.php?loginid="+login_id+"&password="+password+"";

postRequest(url);

} 
      </script>

      </head>

      <body> 

      <center>

 <form name="reg">

      <table border="1" width="30%">

      <tr>

     <td align="center" colspan="2">  <font face="Monotype"

size="5">Registration</font></td>

      </tr>

      <tr>

    <td>  Login id: </td>  <td> <input type="text" name="uid"  size="20"></td>

      </tr>

 <tr> 

    <td> Password: </td><td><input type="password" name="passwd" size="20" /></td>

      </tr>

      <tr>

    <td align="center" colspan="2"> <input type="submit"  value="Register"

onClick="return call_register()" 

 style="background-color:#FFE9D2;color:#0000FF; border-color:#99CC33"> </td>

      </tr>
  </table>

      </form>

      </body>
      </html>
Here this code support the Register.php for Ajax Registration program:

<?
$loginid=$_GET["loginid"];
$password=$_GET["password"];
if( $password == "" || $loginid == "" || ($loginid == "" && $password == "") ){
echo "no";
}
else{
echo "yes";
}
?>

Try the Example online