Top Banner
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 has 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 a 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
65
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Ajax Introduction

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 has 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 a 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 web server, more JavaScript can be used to update the current page. DHTML and CSS are used to show the output to the user. JavaScript is used very heavily to provide the 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.  

Page 2: Ajax Introduction

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, and 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

Page 3: Ajax Introduction

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. 

Page 4: Ajax Introduction

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, and 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

Page 5: Ajax Introduction

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 Flicker and instant search use AJAX. In Flicker 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 book marking, 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.  

Page 6: Ajax Introduction

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

Page 7: Ajax Introduction

getting more information on the project. Ajax First Example

                          

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:

Page 8: Ajax Introduction

 <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;

Page 9: Ajax Introduction

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");?>

Page 10: Ajax Introduction

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;               }

Page 11: Ajax Introduction

                              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

Page 12: Ajax Introduction

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 Explorervar 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>

Page 13: Ajax Introduction

<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">UserName:</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";}?>

Page 14: Ajax Introduction

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');

Page 15: Ajax Introduction

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> 

Page 16: Ajax Introduction

      <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 == "") ){

Page 17: Ajax Introduction

echo "no";}else{echo "yes";}?>

Try the Example online

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. You can make your application's interface like gmail interface.

1. Chickenfoot firebox   Chickenfoot is a Firefox extension that puts a programming environment in the browser's sidebar so you can write scripts to manipulate web pages and automate web browsing. In Chickenfoot, scripts are written in a superset of JavaScript that includes special functions specific to web tasks. Fixed some bugs related to packaging Chickenfoot scripts as standalone extensions. Exported Chickenfoot scripts were trying to find the chickenfoot/setup directory in the end-user’s Firefox profile directory. If the end-user had never installed Chickenfoot, this directory would not exist, causing the extension to crash.                                           

2. Mouse wheel programming in JavaScript Web applications are becoming more and more like “normal” desktop applications. Of course, they are more and more functional, but smooth user interface acts the primary role. So we have drag and drop, autocompletition, and much more. Many of those nice features got possible only with help of AJAX. This page, however, is not about AJAX (or any other buzzword). It is about rather simple user input method -- mouse wheel. I believe it would now be difficult to find a mouse without wheel. Vast majority of users are used to the wheel as a control for scrolling in lists, zooming etc. Rather few web applications, however, make smart use of mouse wheel. This page is to provide you with general information about handling mouse wheel-generated events in JavaScript programming language.                                           

3. JavaScript Sound Kit The JavaScript Sound Kit is a wrapper around the ActionScript Sound Object, it makes it possible to use the Sound Object in JavaScript the same way you do it in ActionScript. The API works almost the same way as the ActionScript Sound Object. The JavaScript Sound Kit works by calling a Sound Object in a flash

Page 18: Ajax Introduction

movie with a sound class bridge implemented. The magic happens by using the External Interface available on the flash plugin version 8.                                                 

4. Hibernate, Spring, Echo2 Base Application This project is designed as a base application and guide for building AJAX applications using Hibernate, Spring, and Echo2. It is intentionally left sparse (It contains only a group and user editor) so that it can be used as a base for a full blown application. All three technologies are matched cohesively together to provide a robust base for your AJAX applications. Security:Allows username/password logon, logoff, and permission checking.Permissions can be queried using has Permission(), or enforced using require Permission().Enforcement is done in the business tier.                                              

5. XAP: Extensible AJAX Platform XAP is an XML-based declarative framework for building, deploying and maintaining rich, interactive Ajax powered web applications. It aims to reduce the need for scripting and help solve the development and maintenance challenges associated with large scale JavaScript programming. XAP provides:* Declarative rich user interface via XML; * Data binding for connecting UI to data. * Incremental update of web pages in a declaratively and programmatically. * A "plugin architecture" allowing developers to define their own XML tags to provide behavior and UI or even use a completely different XML syntax.                                                      

6. Project jMaKi jMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component. jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets. jMaki currently provides bootstrap widgets for many components from Dojo, Script.aculo.us, Yahoo UI Widgets, Spry, DHTML Goodies, and Google. jMaki provides a common interfaces to these widget libraries and allows you to use these libraries together in the same page. Play with the jMaki sample application running live at http://javaserver.org/jmaki. For more on running the code on your own server see Running the jMaki Sample Application.                                   

7. Protowidget I’d like to introduce a new JavaScript/Ajax framework that my company is creating. We’re calling it Protowidget because it uses Prototype and does things with widgets. And yes, we know it’s 2006 and this is something like the 800th Ajax framework released this year. We think this one is new and different, though (of course, every parent thinks their baby is beautiful). It is being created out of real needs while building applications for customers and is helping us create better stuff. Please note that this is just a preview. Not everything works like it should or has been tested to the degree we would like. In particular, under certain circumstances, the library leaks memory. We know what needs to change to fix

Page 19: Ajax Introduction

this but haven’t gotten to it yet.                                          

8. WidgetServer In the beginning WidgetServer was intended to be an alternative to XML/GUI and XUL frameworks with the difference that WidgetServer supports multiple target technologies from one single binary application and configuration set:* Swing standalone applications or fat Clients,* Swing Client/Server application with a rich thin Swing Client,*Web applications based on HTML, CSS, if needed JavaScript,* and MulitChannel applications which support a mixed Client environment.* WidgetServer is prepared for other channels like SWT, mobile etc.                                                                                                                                      

9. Rhino in Spring Rhino in Spring is a project that intends to integrate Mozilla Rhino JavaScript interpreter, the interpreter for the best (in our opinion) dynamic language on the Java platform with Spring Framework, the also best (again, in our opinion) enterprise framework on the Java platform. The aim is to provide a system that amalgamates the rapid development benefits and flexibility of a dynamic language with the strength, scalability and versatility of the Java platform and the Spring framework. At the moment, the project delivers a controller component for Spring MVC that allows complex control flows spanning several webpages in web applications to be expressed as a single structured algorithm in JavaScript, putting the rich set of control flow structures and function reusability of a full-blown language at your fingertips.                                                                                              

10. Spry framework for Ajax The Spry framework for Ajax is a JavaScript library for web designers that provides functionality that allows designers to build pages that provide a richer experience for their users. It is designed to bring Ajax to the web design community who can benefit from Ajax, but are not well served by other frameworks. The first release of the Spry framework was a preview of the data capabilities that enable designers to incorporate XML data into their HTML documents using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page. The Spry framework is HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript. The framework was designed such that the markup is simple and the JavaScript is minimal. The Spry framework can be used by anyone who is authoring for the web in their tool of choice. This is the 4th pre-release of Spry. In this release, we are introducing Spry Effects: JavaScript behaviors that provide animation and color effects for page elements.                                                                                                                                  

11. The Ajax Engine AJAX is a technology that enables web applications to call the webserver without leaving the actual page. It's possible to do this in the background without notice of the user. This avoids loading the same form or page including the html markup

Page 20: Ajax Introduction

multiple times, reduces the network traffic and increases the user acceptance. The AJAX Engine that you can find here is built upon the webservice standard protocols SOAP and WSDL for transferring the data between the browser client and the web server instead of using a new or proprietary protocol.The key part of this engine is a small webservice client written in JavaScript and a state engine that controls the asynchronous communication. The benefit of that approach is that there is no need to invent new protocols and that the webservice framework on the server can be reused.                                    

12. The Dojo Foundation Dojo is Open Source software, distributed by a non-profit foundation which has been set up for the purpose of providing a vendor-neutral owner of Dojo intellectual property. The goals of all Foundation licensing decisions are to:* Encourage adoption* Discourage political contention* Encourage collaboration and integration with other projects* Be transparent                                                  

13. What is JSMX? JSMX is an Ultra Lightweight - Language Agnostic - Ajax Framework. It is by far the easiest way to integrate Ajax into any Web Application. What separates JSMX from most other Ajax Frameworks is that the JSMX API runs entirely on the client and has no Server Side Components to install. Given this fact plus the fact that you can pass back JavaScript, XML, JSON, or WDDX makes JSMX a truly Universal Ajax API. Originally designed for ColdFusion developers by leveraging ColdFusion's native ability to quickly build server-side generated JavaScript it became (and still is) a very efficient choice as an Ajax API for the ColdFusion Community. But ColdFusion developers aren't the only ones who can take advantage of this small but powerful API. JSMX has been extended to support XML, JSON, and now WDDX while remaining completely backward compatible to it's original user base. With no Server Side Modules to install and with so many data-exchange options, JSMX is now the perfect choice for fast Ajax integration for ANY language.                                                                                                                                                                          

14. What is CFAjax? CFAjax is the AJAX implementation for coldfusion. It makes coldfusion method calls on server directly from HTML page using JavaScript and return backs the result to the calling HTML page. CFAjax comes with simple to use JavaScript API and simple coldfusion implementation that marshal’s the response between your CF methods and HTML page. Using CFAjax you can create highly interactive websites with greater performance and usability. Implementing authentication in CFAjax. If you are concerned about exposing your CFAjax logic/functions to outside world and want to prevent other websites from stealing/using your content, there are three authentication mechanism that you can

Page 21: Ajax Introduction

implement in CFAjax to prevent unauthorized access.                                                

15. AjaxCFC AJAX is Asynchronous JavaScript and XML. It is not a technology, but an umbrella that combines several concepts to enrich user experience by allowing server interaction without refreshing the browser. AjaxCFC is a ColdFusion framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.                                                                                    

16. Ajason JavaScript AJASON is a PHP 5 library and JavaScript client for the upcoming Web technology called AJAX. AJAX permits data to be fetched asynchronously without the need for reloading the Web page and thus allows the development of interactive GUI-like Web applications. JSON is a lightweight data interchange format which is used by AJASON to exchange data between server and client. The key features of AJASON are:* Fully object oriented code in PHP 5 and JavaScript* Call PHP functions and object methods from JavaScript asynchronously* Exchange even complex data types like arrays and objects (precisely object properties) between server and client* Use JavaScript callback functions to process server responses* Client side error reporting for server side AJASON errors* Open source released under the GNU GPL                             

17. ICEfaces Ajax ICEfaces Community Edition is an Ajax application framework that enables J2EE application developers to easily create and deploy thin-client rich web applications in pure Java. ICEfaces Community Edition is a fully featured product that Java developers can use to develop new or existing J2EE applications at no cost. ICEfaces' revolutionary Direct-to-DOM (D2D) rendering technology and Ajax Bridgeempowers developers to quickly produce sophisticated and robust J2EE applications that exhibit the following characteristics:* Smooth, incremental page updates with in-place editing and no full page refresh.* Asynchronous page updates driven from the application in real time.* Fine-grained user interaction during form entry that augments the standard submit/response loop.* User context preservation during page update, including scrollbar positioning and user focus.                                                    

18. Javeline Framework Javeline FrameWork does away with traditional page-based interfaces on the

Page 22: Ajax Introduction

Internet. Web applications can now behave exactly like a desktop application. Javeline FrameWork includes familiar controls such as trees and buttons that enable developers to build interactive, data-bound applications that automatically update their data without round trips to the server. With the included Skinning Engine designers can create a custom look & feel, using familiar, established technology such as CSS and XHTML. Data is delivered to the application via Javeline TelePort, making Javeline FrameWork applications agnostic of back-end technology. Javeline TelePort takes care of the communication between the client and the server. It elegantly handles errors, time-outs and retry. TelePort features an advanced polling interface for controlling reconnecting and polling frequency. Javeline TelePort has built-in support for XML-RPC, SOAP, JSON, REST, Comet and Javeline FrameWork-specific protocols.                                                                                                                                   

19. My-BIC Ajax My-BIC provides support for XML, JSON and TEXT ajax transactions. My-BIC has also been tested to work with Safari, Firefox, IE and Opera web browsers. That's the front controller that runs the server side. I provide 2 server side pieces and you supply the rest. Please visit the tutorials section to see how easy most things are. The high level overview is you make a xmlhttp request to a server page named "mybic_server.php" which reads a $_REQUEST['action'] variable to find out what class it needs to load. The nice thing about having a front controller style on the server side is you can add security layers in one file which get handled on every ajax request. Let's say someone doesn't like you and decides to write a script that sends bad data nonstop to all your ajax pages.                                                                                                                                                                        

20. Ajax Toolkit Frameworks AJAX Toolkit Framework (ATF) provides extensible tools for building IDEs for the many different AJAX (asynchronous JavaScript and XML) run-time environments (such as Dojo, Zimbra, etc.). This technology also contains features for developing, debugging, and testing AJAX applications. The framework provides enhanced JavaScript editing features such as edit-time syntax checking; an embedded Mozilla Web browser; an embedded DOM browser; and an embedded JavaScript debugger. An additional and unique aspect of the framework is the Personality Builder function, which assists in the construction of IDE features for arbitrary AJAX run-time frameworks and thus adds to the supported set of run-time environments in the ATF.                                                                                                                                                        

21. SAJAX Simple Ajax Toolkit Get support from the people who made Ajax easy for the masses. If your staff needs a helping hand with your Ajax project, we now offer commercial support and consulting. Email support for the Sajax library starts at an affordable $199 per year. We can help you build your project for rates from $150 per hour. Contact us for more information. Sajax itself remains under the open source BSD license. Sajax is an open source tool to make programming websites using the Ajax

Page 23: Ajax Introduction

framework - also known as XMLHTTPRequest or remote scripting  as easy as possible. Sajax makes it easy to call PHP, Perl or Python 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.                                                     

22. G et Elements By Tag Names HTML has several related elements with distinct tag names, like h1-h6 or input, select and textarea. getElementsByTagName works only on elements with the same tag name, so you cannot use it to get a list of all headers or all form fields. The getElementsByTagNames script (note the plural "names") takes a list of tag names and returns an array that contains all elements with these tag names in the order they appear in the source code. This is extremely useful for, for instance, my ToC script, which needs all h3s and h4s in the document in the correct order. I'd have  loved to add this method to the Node prototype, but that's impossible in Explorer and Safari. Therefore I use it as a normal function until all browsers expose their W3C DOM prototypes.                                                                                                

23. JavaScript Component for AJAX AJAX Client Engine (ACE) is a JavaScript component that makes it easy to develop AJAX-style Web applications.* Object-oriented API. The component encapsulates the details of creating and calling the XMLHTTPRequest object completely. It provides an object-oriented API that is simple and yet powerful. The user only need become familiar with three JavaScript classes, Engine, Request, and Response, to access all the functionality of the XMLHTTPRequest object as well as additional framework services.* Cross-browser support. The component handles the differences between Internet Explorer and Mozilla Firefox browsers in creating the XMLHTTPRequest object, transforming XML documents, and so on.* Request option. The user can make either an asynchronous or a synchronous request by either providing a callback function or not.                                                                      

24. Rialto - Rich Internet Application Toolkit Rialto (Rich Internet Application Toolkit) is ajax-based cross browser JavaScript widgets library. Because it is technology agnostic it can be encapsulated in JSP, JSF, .Net, Python or PHP graphic components. Nowadays it supports pure JavaScript development and JSP/taglib development. A JSF, pyhton, .Net and PHP integration are on the road. The purpose of Rialto is to ease the access to rich internet application development to corporate developers. Ideally a Rialto developer have neither need to write or understand DHTML, Ajax or DOM code.                                                                     

25. PAJAJ: PHP Asynchronous JavaScript and JSON You do not have to be an expert at PHP, HTML, JavaScript, and CSS to use the framework. You can do most, if not all, your coding in PHP, and the framework will generate HTML, CSS, and JavaScript for you. There are object for most of the HTML element, with method to manage common task, like updating the

Page 24: Ajax Introduction

content of a Div or items in a forms Select pull down. A lot of the other frames include a simple example that is anything but simple. the framework supports 3 different development models: i. the developer develops the whole application and interface in PHP, since the framework knows about HTML elements you want to interact with, i.e. there are objects for Select, Div, Table with instances with unique IDs; it is easy to have the framework generate simple html and CSS for you. ii. A designer generate a pretty but dump page, and you then hook events to it to make it a real application.  iii. You design an interface as a template, and have the framework make html, CSS, JavaScript that you pore into the template.                                                      

26. Ajax jsquery An implementation of an AJAX JavaScript data generation server, http client, and client result set Uses a JavaScript http client to dynamically map the results of data requests from a Java application server to a web browser HTML form without requiring refresh or page submit (similar to Google Suggest). Server side data can be SQL via JDBC, an object relational mapping using a tool such as Hibernate, returned from a server connecting a group of peers or pipelined from another source like a SOAP server. In other words, jsquery allows the pages in your web application to dynamically get new information from the a server application without requiring a page refresh.                                                   

27. Sack Ajax JavaScript SACK and will be, over the next little while, updated with resources and tutorials about how to use SACK to enhance your webpages. Maybe it will even give you some ideas! If you come up with something special please let me know, I’d love to hear from people that are using my SACK in their projects or products. The same goes for any suggestions, please tell me how I can make this better. SACK 1.2 is included with WordPress 2.0, which makes me happy beyond words, newer versions of SACK should work with no problems in WordPress. Full documentation of the classes methods and variables is available here. However this information is included in the zip package as well. It should be more than you need, but if you have any trouble then please let me know: The aim is to make everything simple, so if you are confused I need to fix something.                                                                               

28. JS Eclipse JSEclipse is the best and most popular JavaScript plugin for the Eclipse environment. Its benefits are visible from the simplest tasks like editing small sections of code for your site to the more complex ones like working with the next big AJAX library or developing plugins for a product that embeds JavaScript like Dreamweaver or Photoshop. JSEclipse offers several licensing options, out of which one will surely fit your needs. Read more about the licensing scheme. You can also use the unrestricted free for non-commercial use version.                                                                                                

29. Ajax any where Ajax Anywhere is designed to turn any set of existing JSP or JSF components into

Page 25: Ajax Introduction

AJAX-aware components without complex JavaScript coding. In contrast to other solutions, Ajax Anywhere is not component-oriented. You will not find here yet another AutoComplete component. Simply separate your web page into multiple zones, and use Ajax Anywhere to refresh only those zones that needs to be updated.How to work: 1. Mark "reload-capable" zones of a web page with AjaxAnywhere custom tags. 2. Instead of submitting a form in traditional way, do it by AjaxAnywhere javascript API. 3. During request processing on the server-side, determine the zones to refresh.  4. On the server-side AjaxAnywhere will generate an XML containing only the "updated" HTML. 5. On the client-side AjaxAnywhere javascript will receive the XML, parse it and update the selected zones.                                                     

30. PowerWEB LiveControls for ASP.NET Imagine creating rich web applications that don't flash when posting data to the server...shopping carts that dynamically confirm customer information, inventory, shipping costs, and discounts using server-side resources...financial applications that update rates without the usual flicker...sports applications that update scores in real time...all with simple drag and drop ASP.NET controls. PowerWEB LiveControls for ASP.NET is a suite of 21 Web Controls that allow you to raise server-side callbacks and update form elements without reloading the entire HTML page. They are a direct replacement for many standard Microsoft controls, allowing you to manipulate client-side objects or send data to the client without disrupting the user experience with a page refresh.                                             

31. World's Easiest JavaScript AJAX ToolKit AJFORM is a JavaScript toolkit which simply submits data from any given form in an HTML page, then sends the data to any specified JavaScript function. AJFORM degrades gracefully in every aspect. In other words, if the browser doesn't support it, the data will be sent through the form as normal. It has been successfully tested on: * Mozilla FireFox 1.0+  * Netscape 7.0+  * Internet Explorer 5.5+ for Windows * Safari 1.2+  * Opera 7.6+ .                                                    

32. Ajax JSP Tag Library The AJAX Tag Library is a set of JSP tags that simplify the use of Asynchronous JavaScript and XML (AJAX) technology in JavaServer Pages. AJAX is primarily rooted in JavaScript. However, many server-side developers do not have an extensive knowledge of client-side programming in the browser. It's much easier in some cases for J2EE developers, especially, to simply add a JSP tag to the page to gain the function desired. This tag library fills that need by not forcing J2EE developers to write the necessary JavaScript to implement an AJAX-capable web form. The tag library provides support for live form updates for the following use cases: auto complete based on character input to an input field, select box population based on selections made from another field, callout or balloon popup for highlighting content, refreshing form fields, and toggling images and form

Page 26: Ajax Introduction

field states on/off.                                                 

33. JavaScript to Java AJAX communications library JSON-RPC-Java is a key piece of Java web application middleware that allows JavaScript DHTML web applications to call remote methods in a Java Application Server without the need for page reloading (now refered to as AJAX). It enables a new breed of fast and highly dynamic enterprise Web 2.0 applications. JSON-RPC-Java is a dynamic JSON-RPC implementation in Java. It allows you to transparently call server-side Java code from JavaScript with an included lightweight JSON-RPC JavaScript client. It is designed to run in a Servlet container such as Tomcat and can be used with JBoss and other J2EE Application servers to allow calling of plain Java or EJB methods from within a JavaScript DHTML web application.                                                  

34. Introduction to JSON JavaScript Object Notation (JSON) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language. JSON is built on two structures:* A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.* An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.                                                                                  

35. Introduction to the Simple Web Framework The Simple Web Framework (SWF) is a Java framework for creating Web applications and occupies the same architectural niche as Struts and JSF. Unlike Struts and similar to JSF, the SWF is based on a server side event system. Unlike Struts or JSF, the SWF supports In place Page Updating, or IPU. With IPU, an event is posted through an XmlHttpRequest channel rather than as a form submit, as is the case with JSF. The result returned to the browser is not a full page, but only the page fragments that have been changed (dirty regions) by the event. The SWF refreshes the dirty fragments in place, without reloading the page. With IPU, the page will not lose its scroll position, JavaScript variables will not be lost, and a host of other behavioral improvements that help you create a richer application. The SWF also fully supports links and submit type events, like JSF, for when you want (or need) to use full Page reloads.                                                     

36. AjaxAC - Open-souce PHP framework for AJAX 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

Page 27: Ajax Introduction

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. Features 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.* All application code is self-contained in a single class (plus any additional JavaScript libraries)* Calling PHP file / HTML page is very clean. All that is required is creating of the application class, then referencing the application JavaScript and attaching any required HTML elements to the application.* Built in functionality for easily handling JavaScript events.                                            

37. Flexible Ajax Framework Flexible Ajax is a handler to combine the remote scripting technology, also known as AJAX (Asynchronous Javascript and XML), with a php-based backend. The AJAX Technique is best described in the wikipedia article and the original article on adaptivepath.com, giving the technique the name AJAX. Basically, Flexible Ajax is the tool to call php functions from within javascript and handle the returned values, without having to reload the entire page. Facts about Flexible Ajax* written in PHP5 using object-oriented code* consists of a client and a server handler* allows separation of client side-code and server side-code* get and post methods supported* easy to implement into existing co                                            

38. Introducting xajax 0.2.4 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. 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.

Ajax Chat 

                          

Page 28: Ajax Introduction

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. You can use these applications on your website.

WebChat en AJAX* Servidor con soporte PHP.* Navegador que soporte AJAX por parte del usuario, como estos.* No necesita un servidor que retransmita los mensajes.* No necesita base de datos (se utiliza este fichero de texto).* Prueba también las nuevas salas de chat (chat rooms).                                                                       ULRTMT - Skype Version Now Supports Real-Time TranslationHappy to announce that the The ULRTMT - Skype Version 2.5 Beta "Universal Language Real-Time Message Translator" now supports. Yes, you can now chat with others in your own native language and have your text translated in "Real-Time". Both your sent and received chat messages.People from all over the world can now be in the same chat using their own native language and everyone can understand each other. The ULRTVR - Universal Language Real-Time Voice Recognition for Skype example shows once again the power of the Skype4COM lib. This is a simple PoC "Proof of Concept" to show how easy it is to create your own voice recognition interface to the Skype client. These concepts could be used to do many other things for both home and business, and can interface to sound devices other than the sound card as well. 

Php free chat php Free Chat is a free, simple to install, fast, customizable and multi languages chat that uses a simple file system for message and nickname storage. It uses AJAX to smoothly refresh (no flicker) and display the chat zone and the nickname zone. It supports multi-rooms (/join), private messages, moderation (/kick, /ban), customized themes based on CSS and plugins systems that allows you to write your own storage routines (ex: Mysql, IRC backends ...), and you own chat commands .

Metatron Chat EngineThe Metatron Chat Engine is a PHP/MySQL/JavaScript powered engine. The Engine was formerly known as the ORP Engine on which Onlineroleplay.net was running. You can check out an example by following the example link from the menu. The Metatron Chat Engine is a web-based Chat System that can be used on any computer that has a JavaScript-Enabled Web browser. It's got an easy to maintain Channel system and it is easy for users and visitors to navigate around. Features * Multi-Channel  * Registration of Users * Private Channels * User Banning and Kicking on IP and User ID level * Tunneling * Channel Observations * Custom Avatar Images * Usages of Emoticons per Channel * Private Messages * Dice-Roller 

XHTML (ajax) Chat sources for downloadAfter a slow start (following the announcement of the XHTML (ajax) Chat) things got finally busy. I had so many requests that I have decided to offer the complete sources for

Page 29: Ajax Introduction

download. With Backbase AJAX software, developers can create more user-friendly web applications in record-time. The Backbase framework has many user interface controls and code samples, and advanced development tools. Backbase supports all main web browsers, without the need for a plug-in. You can download our software below.

Lace- Ajax ChatLace is a free chat application for your website. It takes advantage of Ajax in modern browsers, and degrades gracefully in older browsers. The recent beta test of 0.1.6b1 has turned up several bugs that will be squashed soon for a second, public beta. Soon, my time might become limited by forces beyond my control, so I hope to have this complete within the next few weeks. Once the dust settles, Lace 0.1.6 will absolutely be the last version on that branch, despite anything I may have said in the past. It's likely it will remain in beta as development continues on the new 0.2 branch.

AJAX Web ChatThis tutorial will walk you through the step in order to create an AJAX driven web chat program. This will be a very simple program, but will be expanded upon in future tutorials. AJAX programming is centered around the XMLHTTPRequest() Object. This is the piece that makes all AJAX programming possible. Unfortunatlly, creating the XMLHTTPRequest() object is different for each browser. Luckly it is fairly simple to write code to use the correct object for the clients browser, and once you create the object, it functions in pretty much the same manner.

JSON AJAX Web ChatThis tutorial will walk you through the steps to create an JSON AJAX driven website. This tutorial is very similar to the original AJAX Web Chat tutorial that I wrote back in November of 2005, but instead of passing the message data back as XML, we will be using JSON. JSON stands for JavaScript Object Notation and is basically a lightweight way of describing hierarchical data. Since it is so lightweight, it makes it an ideal candidate for AJAX applications. So what does JSON look like.

Ajax Tutorials

                          

1. Creating a MySQL connection with PHP/AJAX The purpose of this article is to demonstrate how the XMLHttpRequest object works within php and the advantages of using it. This tutorial will be the first in a series of articles leading to the development of a fully functional dynamic web events application. AJAX is a fancy technique for creating websites that gather information from servers without having to refresh themselves. I could get into the nitty-gritty about advantages and disadvantages of using AJAX but for now all you need to know is any users action that would normally generate a HTTP request takes the form of a JavaScript call to the AJAX engine instead. The

Page 30: Ajax Introduction

engine makes any data requests asynchronously without pausing a user’s interaction with the web application.

2. Getting Started with Ajax 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. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events and provides one of the cornerstones of Rich Internet Applications (RIA) referred to in discussions of “Web 2.0.” The DOM plays into Ajax in a number of ways. How you use the DOM depends a good deal on how you handle the content returned from the server. You can treat the content as simple text using the response Text property of the server response, or you can treat it as XML using responseXML.                                       

3. Mastering Ajax part-2 Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server. In the last article of this series, you were introduced to the Ajax applications and looked at some of the basic concepts that drive Ajax applications. At the center of this was a lot of technology that you probably already know about: JavaScript, HTML and XHTML, a bit of dynamic HTML, and even some DOM. In this article, I will zoom in from that 10,000-foot view and focus on specific Ajax details.                                                     

4. Mastering Ajax: Introduction to Ajax Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together - from an overview to a detailed look -- to make extremely efficient Web development an easy reality. He also unveils the central concepts of Ajax, including the XMLHttpRequest object. Five years ago, if you didn't know XML, you were the ugly duckling whom nobody talked to. Eighteen months ago, Ruby came into the limelight and programmers who didn't know what was going on with Ruby weren't welcome at the water cooler. Today, if you want to get into the latest technology rage, Ajax is where it's at. These are both familiar; desktop applications usually come on a CD and install completely on your computer. They might use the Internet to download updates, but the code that runs these applications resides on your desktop. Web applications -- and there's no surprise here -- run on a Web server somewhere and you access the

Page 31: Ajax Introduction

application with your Web browser.                                                                   

5. Guide to Using AJAX and XMLHttpRequest from WebPasties The XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers without refreshing themselves. The benefit to end users is that they don't have to type as much and they don't have to wait as long. For example, having the user's city and state show up in a webpage automatically after the ZIP code has been typed in is a big time saver. Although the XMLHttpRequest object might sound complex and different from any other JavaScript object you have ever used, it really isn't. A good way to think of the XMLHttpRequest object is as you would think of the JavaScript Image object. As we know, with the Image object you can dynamically specify a new URL for the image source without reloading the page. Similarly with the XMLHttpRequest object, you can dynamically specify a URL to get some server data without reloading the page.                     

6. Direct Web Remoting DWR allows JavaScript in a browser to interact with Java on a server and helps you manipulate web pages with the results. Our stable release is DWR version 1.1. We are developing DWR version 2.0, and recently announced 'Reverse Ajax' which allows Java on the server to asynchronously send JavaScript to the client. License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.                                      

7. Sajax Toolkit Commercial consulting and support now available. Get support from the people who made Ajax easy for the masses. If your staff needs a helping hand with your Ajax project, we now offer commercial support and consulting. Email support for the Sajax library starts at an affordable $199 per year. We can help you build your project for rates from $150 per hour. Contact us for more information. Sajax itself remains under the open source BSD license. Breaking news: After a long delay, Sajax version 0.12 is finally out. PHP support has been much improved, including many bug fixes and improvements to the serialization support. Please download the new version and contact us if you find any bugs. Sajax is an open source 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 PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you

Page 32: Ajax Introduction

have no excuse to not use it.                                                         

8. JavaScript Rico Internet Application Ajax is the term that describes a set of web development techniques for creating interactive web applications. One of the key ingredients is the JavaScript object XmlHttpRequest. Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request. Desktop applications have long used drag and drop in their interfaces to simplify user interaction. Rico provides one of the simplest interfaces for enabling your web application to support drag and drop. Just register any HTML element or JavaScript object as a drag gable and any other HTML element or JavaScript object as a drop zone and Rico handles the rest.                                       

9. How does xajax work? 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. xajax's unique XML response / JavaScript message-pump system does the work for you, automatically handling the data returned from your functions and updating your content or state according to the instructions you return from your PHP functions. Because xajax does the work, you don't have to write JavaScript callback handler functions.                                      

10. Welcome to Ajax any where  AjaxAnywhere is designed to turn any set of existing JSP or JSF components into AJAX-aware components without complex JavaScript coding. In contrast to other solutions AjaxAnywhere is not component-oriented. You will not find here yet another AutoComplete component. Simply separate your web page into multiple zones, and use AjaxAnywhere to refresh only those zones that needs to be updated. Advantages* Less JavaScript to develop and to maintain. Absence of commonly accepted naming convention, formatting rules, patterns makes JavaScript code messier then Java/JSP. It is extremely difficult to debug and unit-test it in multi-browser environment. Get rid of all those complexities by using AjaxAnywhere.* Easy to integrate. AjaxAnywhere does not require changing the underlying application code.* Lower technical risk. Switch whenever you need between AJAX and traditional behaviour of your web application. Your application can also support both behaviors.                                                   

Page 33: Ajax Introduction

11. How To Use AJAX AJAX, an acronym for Asynchronous JavaScript and XML, is the latest technology buzzword. Asynchronous means that you can make a request to a server via Hypertext Transfer Protocol (HTTP) and continue to process other data while waiting for the response. This means, for example, that you can make calls to a server-side script to retrieve data from a database as XML, send data to a server-side script to be stored in a database, or simply load an XML file to populate pages of your Web site without refreshing the page. However, along with all of the benefits, AJAX sparks some unquestionable debate over issues with the Back button. This article will help you to determine when AJAX is a good solution for developing your users' experiences.                                   

12. Very Dynamic Web Interfaces One of the classic drawbacks to building a web application interface is that once a page has been downloaded to the client, the connection to the server is severed. Any attempt at a dynamic interface involves a full roundtrip of the whole page back to the server for a rebuild--a process which tends to make your web app feel inelegant and unresponsive. In this article, I'll be exploring how this problem can be tackled with the use of JavaScript and the XMLHttpRequest object. The user requests a page from the server, which is built and delivered to the browser. This page includes an HTML form element for capturing data from the user. Once the user posts their input back to the server, the next page can be built and served based on the input, and so the process continues. This is largely dictated by the nature of HTTP and differs from the traditional desktop application model of an interface which is inherently connected to the application layer.                                 

13. AJAX: Getting Started AJAX (Asynchronous JavaScript and XML) is a newly coined term for two powerful browser features that have been around for years, but were overlooked by many web developers until recently when applications such as Gmail, Google Suggest, and Google Maps hit the streets.The two features in question are that you can:* Make requests to the server without reloading the page* Parse and work with XML documents                     

14. Using the XML HTTP Request object Internet Explorer on Windows, Safari on Mac OS-X, Mozilla on all platforms, Konqueror in KDE, Ice Browser on Java, and Opera on all platforms including Symbian provide a method for client side JavaScript to make HTTP requests. From the humble begins as an oddly named object with few admirers, it's blossomed to be the core technology in something called AJAX . The Object makes many things easier and neater than they other would be, and introduces some things that were otherwise impossible such as HEAD requests to see when a resource was last modified, or to see if it even exists. It makes your scripting options more flexible allowing for POST requests without having the page change, and opens up the possibility of using PUT, DELETE etc. These methods

Page 34: Ajax Introduction

are increasingly used to provide richer Web Applications like G-Mail that use lower bandwidth and offer snappier user interaction.                          

15. Ajax Tutorial Getting to a semi-usable point with my system took me about a week of part-time digging, and coding. This was done on evenings, and only when I could get an hour here and there to work on it. My goal was three-fold.1. The ability to have PHP output discrete portions of a page (a major part of AJAX)2. To be able to take those different pieces and have a simple way to update the html page3. To be able to submit form information to a script and have the results returned as in point 1                            

16. AJAX: Instant Tutorial After taking a look at this tutorial and a couple others, I was dissapointed at the quality of the code so here’s a quick tutorial to get you jump started with AJAX (Asynchronous JavaScript + XML). I am using object detection and explain some of the caveats for doing what I am doing. Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it’s content and load them into your existing page without having to refresh the whole page. This means that services like email don’t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.                                                    

17. A Simpler Ajax Path I began working with web applications back in the bad old days, when making an application behave like a desktop app meant wrestling with byzantine table-based layouts nested five and six levels deep, and horrid, hackish frame sets within frame sets within frame sets. Those were the days. Things have steadily improved for web developers with the advent of standards-compliant browsers, CSS, DHTML, and the DOM. Pervasive broadband access has made web apps feel a lot snappier. Now something called the XMLHttpRequest object makes it even easier to develop full-blown, super interactive applications to deploy in the browser.                                 

18. The Hows and Whys of Degradable Ajax While working on Particle tree's shopping cart system for our magazine, we decided that we wanted to create a flawless user experience for all users without having to sacrifice the added user interface benefits provided by Ajax goodness. A lot of places will tell you that it is ok to use JavaScript and Ajax as long as it’s not mission critical. Well, we don’t think web apps have to be boring to be reliable. And so we’ve developed some solid strategies to help us use Ajax in our apps without having to worry if they’re essential or not to the application. After some heavy experimenting, we’ve developed a method for making web pages work regardless of the user’s browser settings. While other sites have implemented their own versions of degradable Ajax, we found the lack of

Page 35: Ajax Introduction

documentation on the subject discouraging. And so it is with great pleasure that we present to you the Particle tree method of degradable Ajax.                                  

19. Remote Scripting with AJAX This two-part series of articles covers remote scripting using the AJAX XMLHttpRequest protocol. Part one walks through an example application that demonstrates how to implement the protocol, while part two will show how to create a usable interface. To begin, download the code archive, which contains all of the files you'll need to create the working examples presented here and for the upcoming second part of this series. Essentially, remote scripting allows client-side JavaScript to request data from a server without having to refresh the web page. That's it. Everything else that goes into making a seamless web application draws upon the established methods of manipulating the Document Object Model. However, remote scripting and seamless applications bring with them a host of problems from the desktop application design realm, making those same issues possible on the Web.                                      

20. AJAX made simple with DWR AJAX, or Asynchronous JavaScript and XML, describes a Web development technique for creating interactive Web applications using a combination of HTML (or XHTML) and Cascading Style Sheets for presenting information; Document Object Model (DOM); JavaScript, to dynamically display and interact with the information presented; and the XMLHttpRequest object to interchange and manipulate data asynchronously with the Web server. Many examples on the Internet show all the necessary steps for using XMLHttpRequest to communicate with the server from within an HTML file. When manually writing and maintaining the XMLHttpRequest code, a developer must deal with many potential problems, especially with cross-browser compatibilities like different DOM implementations. This can lead to countless hours spent coding and debugging JavaScript code, which is not known to be developer friendly.                                 

21. An Introduction To Ajax As J2EE developers, it seems we are constantly focused on "backend mechanics." Often, we forget that the main success of J2EE has been around the Web application; people love developing applications that utilize the Web for many reasons, but mainly because the ease of deployment allows a site to have millions of users with minimal cost. Unfortunately, over the years we have invested too much time in the back end and not enough time in making our Web user interfaces natural and responsive to our users. 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,

Page 36: Ajax Introduction

thereby providing an improved browsing experience.                                 

22. Developing AJAX Applications the Easy Way AJAX is the buzzword of the moment among web developers, so much so that you could be sick of introductions to AJAX by now (if that's the case, skip down to "The Chat Web Page"). AJAX is a technology that is hotly debated from many angles, but it has stuck because it encapsulates something that is new from a user's perspective. The functionally that is newly available to all web users is "in-page replacement": the ability for a web page to change using data from a web server without totally redrawing itself. This functionality has been around in Mozilla and Internet Explorer for a while, but it is only recently that Safari and Konqueror users have been able to join in. AJAX isn't the best acronym in the world: it stands for Asynchronous JavaScript and XML. This does nothing to describe the benefits to a user: the technology behind it does not have to be asynchronous, and the best implementations don't necessarily use XML, either. However, the buzzword has stuck so we are better off going with the flow now.                                                      

23. Ajax on Rails In a few short months, Ajax has moved from an obscure and rarely used technology to the hottest thing since sliced bread. This article introduces the incredibly easy-to-use Ajax support that is part of the Ruby on Rails web application framework. This is not a step-by-step tutorial, and I assume that you know a little bit about how to organize and construct a Rails web application. If you need a quick refresher, check out Rolling with Ruby on Rails, Part 1 and Part 2. In the beginning, there was the World Wide Web. Compared with desktop applications, web applications were slow and clunky. People liked web applications anyway because they were conveniently available from anywhere, on any computer that had a browser. Then Microsoft created XMLHttpRequest in Internet Explorer 5, which let browser-side JavaScript communicate with the web server in the background without requiring the browser to display a new web page. That made it possible to develop more fluid and responsive web applications.                            

24. Ajax Mistakes Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems. I’ve compiled a list of the many mistakes developers using Ajax often make. Sure Ajax is cool, and developers love to play with cool technology, but Ajax is a tool not a toy. A lot of the new Ajax applications are really just little toys, not developed for any real purpose, just experiments in what Ajax can do or trying to fit Ajax somewhere where it isn’t needed. Toys might be fun for a little while, but toys are not useful applications. The back button is a great feature of standard web site user interfaces. Unfortunately, the back button doesn’t mesh very well with JavaScript. Keeping back button functionality is a major reason not to go with a pure JavaScript web app.

Page 37: Ajax Introduction

Ajax Examples

                          

There are a few AJAX demos and examples on the web right now. While these are invaluable to learning AJAX, some people need a bit more information than just a raw piece of code. In todays environment there are many ways to learn AJAX including, books, classes, conferences, workshops and tutorials. Of these the only one that is free and accessible to everyone are web-based tutorials. The following is a list of what I consider the be the best and most helpful AJAX tutorials that I've found over the past year.

The Ajax alternate TechniquesThe first alternate Ajax technique is dynamic script loading. The concept is simple: create a new <script/> element and assign a JavaScript file to its src attribute to load JavaScript that isn't initially written into the page. The beginnings of this technique could be seen way back when Internet Explorer 4.0 and Netscape Navigator 4.0 ruled the web browser market. At that time, developers learned that they could use the document.write() method to write out a <script/> tag. The caveat was that this had to be done before the page was completely loaded. With the advent of the DOM, the concept could be taken to a completely new level. 

Ajax and XMLHttp Request from webPastiesThe XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers without refreshing themselves. The benefit to end users is that they don't have to type as much and they don't have to wait as long. For example, having the user's city and state show up in a webpage automatically after the ZIP code has been typed in is a big time saver. Although the XMLHttpRequest object might sound complex and different from any other JavaScript object you have ever used, it really isn't. A good way to think of the XMLHttpRequest object is as you would think of the JavaScript Image object. As we know, with the Image object you can dynamically specify a new URL for the image source without reloading the page. Similarly with the XMLHttpRequest object, you can dynamically specify a URL to get some server data without reloading the page.                                                           

The Ajax Make request with asynchronous JavaScript   Most Web applications use a request/response model that gets an entire HTML page from the server. The result is a back-and-forth that usually involves clicking a button, waiting for the server, clicking another button, and then waiting some more. With Ajax and the XMLHttpRequest object, you can use a request/response model that never leaves users waiting for a server to respond. In this article, Brett McLaughlin shows you how to create XMLHttpRequest instances in a cross-browser way, construct and send requests, and respond to the server. First, take this last bit of overview before you dive into code -- make sure you're crystal clear on this idea of the Web 2.0. When you hear

Page 38: Ajax Introduction

the term Web 2.0, you should first ask, "What's Web 1.0?" Although you'll rarely hear Web 1.0, it is meant to refer to the traditional Web where you have a very distinct request and response model. For example, go to Amazon.com and click a button or enter a search term. A request is made to a server and then a response comes back to your browser.

The Advanced requests and responses in AjaxIn the last article in this series, I provided a solid introduction to the XMLHttpRequest object, the centerpiece of an Ajax application that handles requests to a server-side application or script, and also deals with return data from that server-side component. Every Ajax application uses the XMLHttpRequest object, so you'll want to be intimately familiar with it to make your Ajax applications perform and perform well. In this article, I move beyond the basics in the last article and concentrate on more detail about three key parts of this request object:* The HTTP ready state* The HTTP status code* The types of requests that you can make   

Ajax Example Drag and Drop with JavaScript and cssIn Web applications I've seen numerous -and personally implemented a few  ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification boo. With sorting vertically oriented items under our belt, onto the next challenge: sorting floated, wrapped list items. Earlier versions of my code had separate scripts for vertical, horizontal, and wrapped lists. Now they are unified into one script that does it all.

Ajax Building a Drag and Drop shopping cartThe rise of AJAX over the past several months has taken over the development world and breathed new life into the Web. Although these techniques have been possible for many years now, the maturity of Web standards like XHTML and CSS now make it a viable alternative that will be viewable by all but the oldest browsers. It's also been possible to accomplish many of the same things using Flex or Flash, but the development cycle with those applications is typically more involved and the overhead often not justified. We're going to harness the power of the Scipt.aculo.us JavaScript library to provide our interaction. As their Web site states, this library "provides you with easy-to-use, compatible and, ultimately, totally cool JavaScript libraries to make your web sites and web applications fly, Web 2.0 style." We're also going to utilize the <CF_SRS> library to handle the actual AJAX data piping to our application. Both of these libraries are free for all to use, and they're easier to integrate than you would think.

The Better a Ajax and JavaServer FacesBrowser-based file uploads, in particular those involving the HTML <input

Page 39: Ajax Introduction

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 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.

Ajax Using the PHP and SajaxThe goal of creating a truly responsive Web application was hampered by one simple fact of Web development: To change the information on part of a page, a user must reload the entire page. Not anymore. Thanks to asynchronous JavaScript and XML (Ajax), we can now request new content from the server and change just part of a page. This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work.  This tutorial is for those interested in developing rich Web applications that dynamically update content using asynchronous JavaScript and XML (Ajax) with PHP, without having to refresh entire Web pages with each user click. You will learn about Ajax, as well as issues surrounding its usage. You will also build an Ajax application in PHP that will display parts of a previously written tutorial. Then you will integrate the Simple Ajax Toolkit (Sajax) into your Ajax application, which will synchronize the use of Ajax, simplifying development.

The Ajax getting StartedAjax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest() object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. In order to make an HTTP request to the server using JavaScript, you need an instance of a class that provides you this functionality. Such a class was originally introduced in Internet Explorer as an ActiveX object, called XMLHTTP. Then Mozilla, Safari and other browsers followed, implementing an XMLHttpRequest class that supports the methods and properties of Microsoft's original ActiveX object.

The Ajax Developer for prototypeIn case you haven't already used it, prototype.js is a JavaScript library written by Sam Stephenson. This amazingly well thought and well written piece of standards-compliant code takes a lot of the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back. If you tried to use this library

Page 40: Ajax Introduction

recently, you probably noticed that documentation is not one of its strongest points. As many other developers before me, I got my head around prototype.js by reading the source code and experimenting with it. I thought it would be nice to take notes while I learned and share with everybody else. I'm also offering an un-official reference for the objects, classes, functions, and extensions provided by this library. As you read the examples and the reference, developers familiar with the Ruby programming language will notice an intentional similarity between Ruby's built-in classes and many of the extensions implemented by this library.

Ajax creating autosuggest with JavaScript Over the past year, Google has branched out from its search engine into other types of Web applications. One that caused a great deal of excitement among Web developers is Google Suggest. The basic idea is very simple: as you type, Google suggests search terms that come up with results. The first suggestion is filled into the textbox as you type while a list of several suggestions appears in a dropdown list beneath the textbox. If you haven't tried it yet, check it out before reading on. The idea behind Google Suggest is something that has been used in desktop applications for some time and has only recently made it onto the Web. Google Suggest wasn't the first implementation of such an interface  but it popularized the technique among developers to the point where people have dissected the source code and attempted to recreate the functionality. In building the autosuggest textbox, you will JavaScript in a true object-oriented fashion. The main implementation consists of two types of objects: one to represent the autosuggest control and one that provides the suggestions. The autosuggest control does the heavy lifting in the code by handling all of the user interaction with the textbox.

Ajax How to Create the suggest with ASP. NET 2.0It all started when Netscape released Navigator 2.0 in 1996. This browser boosted two revolutionary new features; frames and JavaScript. Although Netscape had different intensions for these features, developers could exploit frames and JavaScript to set up an out-of-band communications channel between the browser and the web server. This made it possible to update forms data without posting back. The concept behind the communications channel was simple. You created a frameset made up of two frames. One of the frames had the height or width attribute set to zero, in practice making the frame “invisible”. The other frame contained the user interface. When the user clicked a button she triggered a JavaScript function which replaced the location property of the hidden frame with the URL for a CGI script that handled the request. The various parameters were passed thru the query string.

The Ajax is very Dynamic interfaceOne of the classic drawbacks to building a web application interface is that once a page has been downloaded to the client, the connection to the server is severed. Any attempt at a dynamic interface involves a full roundtrip of the whole page back to the server for a rebuild-a process which tends to make your web app feel inelegant and unresponsive. In this article, I'll be exploring how this problem can be tackled with the use of JavaScript and the XMLHttpRequest object. Take the simple example of filling out a

Page 41: Ajax Introduction

serial number box to register a desktop app on a platform like Microsoft Windows. According to convention, once you've finished typing that tiresome string of alphanumeric into the little boxes, a big green 'tick' icon appears to indicate you've entered a valid code. This happens instantly as a result of the interface being sewn to the application; as soon as you finish typing the number, the application is able to check its validity and respond.

The Ajax make Website in less then 10 MinutesI've been toying around with AJAX apps and XMLHttpRequest but have wanted to put up a site that loads all of its content asynchronously. If you're like me and you learn best from working with examples you're only 10 minutes away from your first AJAX website. Angus Turnbull of Twinhelix has written an interesting piece of code named, “HTMLHttpRequest v1.0beta2” and it’s the perfect start to building your own rich client-side web applications that send and retrieve data to/from a server. I have done several examples and tutorials on this subject, but this is one of the most complete I’ve seen to date. This implements both XMLHttpRequest and a custom-written hidden-IFRAME-based transport layer. Therefore, it works in a wider range of browsers, including Opera 7 and IE5/Mac.

Ajax Design PatternsBy now the entire World has heard about AJAX, even those who don’t care about Web-Development have seen the potential of this new technology. Everybody is tired of endless introductions on how cool AJAX is and those endless lists of good examples like Google Suggest, GMail and alike, so I decided to cut a long story short and jump right into the real tutorial. Well yes and no, it is different in being a tutorial on how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget. To keep the tutorial readable, and to avoid having to implement low level functionality, I’m using the dojo toolkit, I tried prototype too and really enjoyed working with being a really nice and easy to use Library, but dojo provides much more functionality bundled with it. For both frameworks one thing is true: documentation is scarse, and I spent alot time debugging and reading posts on the newsgroups.

                           Facing Programming Problem?

Ask Questions? Browse Latest Questions

Question-Answer Guidelines Add This Tutorial To:  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 

Current Comments

8 comments so far (post your own) View All Comments Latest 10 Comments:

Page 42: Ajax Introduction

can i write my own Action instead of php file in ajax code?

Posted by G.Venu Prasad on Monday, 02.18.08 @ 17:13pm | #48890

      View This Comment Separately

Provided excellent information and very good example in AJAX. This is really helpful for who want to be a AJAX professional.

Posted by jagadeesh rajanala on Thursday, 07.26.07 @ 14:40pm | #21987

      View This Comment Separately

Try out dojo toolkit..

Its a great ajax framework

http://www.jyog.com

Posted by jYog on Thursday, 05.3.07 @ 10:11am | #15195

      View This Comment Separately

Its nice to startup with.Thanku.

Posted by Sailatha Patchala on Saturday, 02.10.07 @ 02:14am | #7067

      View This Comment Separately

Pls Guide Me how to use AJAX with JSF with a Sample Example

Posted by Sowmithry on Monday, 01.29.07 @ 14:30pm | #4625

      View This Comment Separately

hi this is very clear about ajax but i haven't seen simple java example

Posted by murali on Thursday, 01.25.07 @ 17:28pm | #4347

      View This Comment Separately

itz really nice but there should be example of java also ajax using struts

Posted by maheshv on Friday, 01.19.07 @ 16:49pm | #3832

Page 43: Ajax Introduction

      View This Comment Separately

Its very nice....Please provide more Examples on this.U do not given a single example for java people.

Posted by nagendra kumar on Monday, 01.15.07 @ 16:26pm | #3537

      View This Comment Separately

Leave your comment:

Name:

Email:

URL:

Title:Comments:

Enter Code:

 

Note: Emails will not be visible or used in any way, and are not required. Please keep comments relevant. Any content deemed inappropriate or offensive may be edited and/or deleted.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.

Page 44: Ajax Introduction