AJAX or Asynchronous JavaScript and XML is not a server platform or markup language. AJAX is not even a technology per se, rather a group of technologies for mature Web interface design and development.

For the end user, AJAX transforms hitherto clumsy, simple Web applications with characteristically slow response times into Web applications more akin to their native cousins (Microsoft Window or UNIX clients) by shortening page response time and providing rich enhancements in functionality.

AJAX is flexible and easy to understand -- so much so that even developers with limited experience in client development can be productive instantly. In a nutshell, AJAX is ushering in a more mature Web design and development paradigm which can only be good for clients and developers alike.

Why did AJAX come about?
Web interface design has made extraordinary advances since the introduction of the first Web browsers in the early '90s so much that our reliance on the Web has increased exponentially. These advancements have created unique issues for interface designers (who are usually graduates trained in solving logical problems, not design problems).

A typical Web design issue is that of the submit button and the back button. For those who have ever written a Web page, you will know exactly what I'm referring to. Users don't understand (nor should they) why they cannot click the back button after clicking the submit button. For designers the logic is simple: submit data, and go on to something else. For the end user the flow is different: submit data, change mind, go back, do it again, etc.

It is the task of the designer to allow this (or as is more common, disallow), but at the end of the day, the designer must prevent errors from occurring. For these and many other problems AJAX has come to the rescue.

How does AJAX solve these problems?
AJAX solves many Web development issues through the use of asynchronous call-backs to update page data without transitions. Prior to AJAX this could only be easily achieved through the use of clumsy and buggy hidden frames or proprietary browser plug-ins.

Technically speaking, AJAX is based around an object called XMLHttpRequest that provides asynchronous calls to HTTP Web servers with XML payloads from JavaScript. This enables interfaces to be modified on the fly with DHTML and JavaScript with data sent back to the client from the server --usually in the form of XML.

Getting started
For this example I will illustrate the basics of AJAX client-side call-backs to solve the simple Web development problem mentioned above: the dreaded back button click after a page submission. The problem is this: after a submit button is pressed the browser loads a new page dependent on the page data that submitted with the form; to go back to the original page the page data must be submitted again resulting in a second unintended form submission.

How does AJAX solve this issue? Simply remove the form submission! To submit form data without a form submission is easy with AJAX. Simply bind a JavaScript event handler to a Button's onclick event and when the button is clicked the event is fired and form data is sent to the server via the XMLHttpRequest object instead of the form. This involves no page reloading or transitions.

Step 1: Create the main HTML (see Listing A) form page, in this example I will keep things to a bare minimum, but you can add other data elements like select boxes and textareas. Name the file step1.htm.

Listing A
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION=”saveData.jsp”>
<INPUT TYPE=TEXT NAME=DATA ID=DATA>
<INPUT TYPE=SUBMIT VALUE=Submit>
</FORM>
</BODY>

Step 2: Write a page on the server that displays the submitted data. As AJAX is purely client-side, you can write this code in any language you like. I've chosen Java for this example. But you could use ASP.NET, PHP or any other server-side language. Name the file saveData.jsp (or saveData.aspx, saveData.php, etc). It should look like this:

<%="Data Saved: - + request.getParameter(-DATA")%>

Test: Load step1.htm in your browser, enter some data and click submit. The data should be shown in your browser (if not, debug your server-side code). Now reload the page, notice the browser prompts a warning about reloading the page will submit the form data a second time? This is undesirable for users and a problem for Web developers.

12 Next >

Do you need help with AJAX? Gain advice from Builder AU forums

Related links

Comments

1

Phil Cohen - 12/10/05

How would you submit a form that is set as multipart/form-data instead of application/x-www-form-urlencoded. Is this possible? I would like to upload images as well as the various text fields using AJAX. We are using ASPUpload at the server end so it needs the multipart/form-data type of form using the post method. Any info would be appreciated.

» Report offensive content

2

vipin deshwal - 21/09/06

It is very good site for best intro information and exmpiles. its write getway for bigners.

» Report offensive content

3

Atul - 06/12/06

Right i dont no how to run and which environment will use for writing the ajax program. i want to use ajax in aps.net

» Report offensive content

4

Reza - 08/12/06

Not working properly

» Report offensive content

5

radha - 26/01/07

Thanks phil,
I have the same question. I want to upload files using ajax without refreshing. I don't know how to send multipart/form data and retrieve the fileItems using apache's FileUpload utility.
Please if someone could elaborate I would really appreciate it.

Thanks in advance.

» Report offensive content

6

Prakash - 14/02/07

I want to upload files using ajax without refreshing

» Report offensive content

7

Pankaj Sharma - 20/04/07

i want to upload images and editing images online by using Ajax

» Report offensive content

8

Andrew - 03/05/07

Can someone tell me / show me how to upload images using ASPJpeg? I already use ASPJpeg along with ASPUpload and it works great, but I would like to redesign my control panel using AJAX. If anyone could help me out I would really appreciate it. Thanks in advance!

» Report offensive content

9

mahesh_60489 - 17/07/07

it is the best site which gives detailed information. It is the right gateway for beginners.thank u.

» Report offensive content

10

utpal mondal - 20/08/07

How to remove race condition of ajax.

» Report offensive content

11

dfd - 13/09/07

dfds

df

» Report offensive content

12

Ananth - 15/10/07

Hi friends when i use ajax with DHTML or table or layer or div Ajax not proporly working here i paste my code if any one knows help me.... mobile 9994264662.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<link href="field.css" rel="stylesheet" type="text/css" />

<style type="text/css">

<!--

#apDiv1 {

	position:absolute;

	width:200px;

	height:115px;

	z-index:1;

}

-->

</style>

</head>



<body>

<script  src="hrcmvalidation.js"> </script>

<script type="text/javascript" language="javascript">

   var http_request = false;

   function makeRequest(url, parameters) {

      http_request = false;

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

         http_request = new XMLHttpRequest();

         if (http_request.overrideMimeType) {

         	// set type accordingly to anticipated content type

            //http_request.overrideMimeType('text/xml');

            http_request.overrideMimeType('text/html');

         }

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

         try {

            http_request = new ActiveXObject("Msxml2.XMLHTTP");

         } catch (e) {

            try {

               http_request = new ActiveXObject("Microsoft.XMLHTTP");

            } catch (e) {}

         }

      }

      if (!http_request) {

         alert('Cannot create XMLHTTP instance');

         return false;

      }

      http_request.onreadystatechange = alertContents;

      http_request.open('GET', url + parameters, true);

      http_request.send(null);

   }



   function alertContents() {

      if (http_request.readyState == 4) {

         if (http_request.status == 200) {

            //alert(http_request.responseText);

            result = http_request.responseText;

            document.getElementById('myspan').innerHTML = result;            

         } else {

            alert('There was a problem with the request.');

         }

      }

   }

   

   function get(obj) {

      var getstr = "?";

      for (i=0; i<obj.childNodes.length; i++) {

         if (obj.childNodes[i].tagName == "INPUT") {

            if (obj.childNodes[i].type == "text") {

               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";

            }

            if (obj.childNodes[i].type == "checkbox") {

               if (obj.childNodes[i].checked) {

                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";

               } else {

                  getstr += obj.childNodes[i].name + "=&";

               }

            }

            if (obj.childNodes[i].type == "radio") {

               if (obj.childNodes[i].checked) {

                  getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";

               }

            }

         }   

         if (obj.childNodes[i].tagName == "SELECT") {

            var sel = obj.childNodes[i];

            getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";

         }

         

      }

      makeRequest('get.php', getstr);

   }

</script>

<br>

Server-Response:<br>

<span name="myspan" id="myspan"></span>

<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">

  <select name="select" class

			
» Report offensive content

13

Prabhu - 03/05/08

I am the beginner in ajax.so give me some guidelines how to develop

ourselves ajax.How to start working in ajax..and tell me the easy to

learn more in ajax 

document.httrequest("beginnner")

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

Latest comments

13

Prabhu - 05/03/08

I am the beginner in ajax.so give me some guidelines how to develop ourselves ajax.How to start working in ajax..and tell ... more

12

Ananth - 15/10/07

Hi friends when i use ajax with DHTML or table or layer or div Ajax not proporly working here i paste ... more

11

dfd - 13/09/07

dfdsdf ... more

Log in


Sign up | Forgot your password?

Blogs

RSS feed

What's on?