This article and its contents are based on the articles on the W3C Website, and is a great place to start learning.

AJAX uses the XMLHTTPRequest JavaScript object to communicate directly with the web server and has three important properties:

• the onreadystatechange property
• the readystate property
• the responsetext property

It’s important to note that the XMLHTTPRequest object is not supported by Internet Explorer which uses an ActiveX object, and for that reason when you create an XMLHTTPObject in JavaScript you have to add a few try/catch statements so that it returns the correct object for the correct browser.

If you want to use AJAX on a webpage it is thus important to understand that you need an XMLHTTPRequest object to make it possible. JavaScript is used to create the XMLHTTPRequest object and looks like this:

function GetXMLHTTPObject()
{
     var xmlHttp = null;
     try
     {
          xmlHTTP = new XMLHttpRequest();
      }
      catch(e)
      {
          try
          {
              xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
          catch(e)
          {
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
      }
     return xmlHttp;
}

I downloaded the LiveValidation script recently and I realised after implementing it on a webpage I did not understand how it interacts with a PHP or ASP.NET application and it got me thinking that maybe I need to just try and understand how server-side and client-side code interacts with JavaScript.

What is AJAX? I know it’s an acronym for Asynchronous JavaScript and XML, but what does it really mean and how does it work. Client- and Server-side scripting is easy to understand on their own and its easy to understand how both technologies are used, but where it becomes tricky for myself is when the server-side and client-side code need to interact with each other. Developing web applications with ASP.NET does not always expose a developer to the inner workings of that specific technology. AJAX is not unique to PHP or ASP.NET. Both ASP.NET and PHP are server side scripting languages. The first thing to understand is that AJAX is not a technology on its own, nor is it something that has not been there before, because it uses existing technologies (JavaScript, XML) to do what it does. AJAX uses a combination of programming tools to create web-based applications that react more like software applications – this means that the web-based application responds much smoother and nicer and the page does not reload to retrieve new content.

I still have not defined what AJAX looks like or what it exactly does. AJAX is based on open standards such as HTML, CSS, XML and JavaScript. AJAX uses XML and HTTP Requests to communicate with a web server. Another important thing to note is that with AJAX web applications do not re-submit a web page every time a user makes a request. If for example a user enters data on a form and submits the information to a web server, the web server will traditionally create a new page after the submit has occurred, but AJAX communicates with the web server in such a way that updates to the page only happen to the sections of the page that are affected.

Here’s the thing right, I really want to create a nice contact form for my website, but I also want to make sure that the form accepts the right type of information. For this I need some JavaScript and of late I have been reading a lot about JavaScript libraries such as jquery, mootools and prototype. I have also worked a bit with ASP.NET Ajax, but I do find the .NET implementation does hide a lot of the inner workings of the JavaScript and does not force you to understand the core references as some of the other JavaScript libraries do. With .NET you can get some AJAX running without touching much JavaScript code at all.

So the contact form on my website should allow visitors to send an email with their name, email address and a message. All three fields are required and should not contain empty values. The validation will be done server side, so that the user can see what they are doing wrong immediately and take any necessary steps to correct the information they entered.

One thing that has been bugging me recently has been to find an easy way to validate forms, and I came across LiveValidation. It’s pretty easy to setup and use, and I will be using it to create the form described above.

I also downloaded Amaya, an free XHTML editor, since I am extremely keen on sticking to Web Standards and all.

The basic structure for the form can be seen here. The form requires all three fields and validates the email address field, and if the email address field is found to be valid a alert message box appears on the screen. The underlying JavaScript code is quite interesting to note:

var fld_name = new LiveValidation( 'fld_name', {onlyOnSubmit: true } );
fld_name.add(Validate.Presence);
var fld_email = new LiveValidation( 'fld_email', {onlyOnSubmit: true } );
fld_email.add(Validate.Email);
fld_email.add(Validate.Presence);
var fld_msg = new LiveValidation( 'fld_msg', {onlyOnSubmit: true } );
fld_msg.add(Validate.Presence);
var automaticOnSubmit = fld_email.form.onsubmit;
fld_email.form.onsubmit = function(){
    var valid = automaticOnSubmit();
    if(valid)alert('Thank you for submitting your message!');
    return false;
}

JavaScript has been found out! Its not as simplistic and uncomplicated as some, including me, believed. Its a full featured object-oriented scripting language that runs in your browser, and it spurned the development of Web 2.0 with the emergence of AJAX (Asynchronous Javascript and XML). The emergence of AJAX resulted in the development of better user interfaces for the web, better in the sense that they are more responsive. No longer are there clicks (post backs) or flickers when you click on a link or a button but instead you now have smoother responses. Off course if you turn JavaScript off in your browser, then all the functionality will disappear, but then again I guess not too many people do that.