Webdesign articles, tips and tutorials

Ajax Programming

Ajax (Asynchronous JavaScript and XML) is not new programming language, it is merely a new way of using standards that currently exist. Basically, it is the art of data exchange with a server as well as the updating of parts or a web page without having to reload the entire page. The use of Ajax results in the creation of dynamic and fast web pages. Applications that currently utilize the programming techniques of Ajax are as follows: Facebook tabs, YouTube, Gmail and Google Maps. Prior to learning the art of Ajax programming, one should have at least a basic working knowledge of:

  • DOM/JavaScript
  • CSS

It is imperative to have this base knowledge, since Ajax is based on the standards of the internet while utilizing an amalgamation in the following manner: basic programming

  • XMLHttpRequest object – used to asynchronously exchange data with a server. This occurs behind the scenes that allows for parts of a page to be updated.
  • JavaScript/DOM – is used to interact/display with the information provided
  • CSS – is used for data styling
  • XML – is generally utilized as the transferring data format

Common Steps

The following will explain sequence of actions in an Ajax web application and the structure of HTML:

  1. The handEvent (), JavaScript will be summoned when an event has ensued on the HTML element
  2. In the handEvent (), a XMLHttpRequest object is created
  3. The XMLHttpRequest object is able to organize an XML message in about the status of the page and then it is sent to the server
  4. XMLHttpRequest object parses the returning message from the server as it updates it into the DOM

Example Code

<form id=”form1” runat=”server”> <div> <input type=”text” id=”lblTime”> <br> <input type=”button” id=”btnGetTime” value=”Get Time” onclick=”getTime();” /> </div> </form>  

  1. The DOM object is input type=”text” id=lblTime” which needs to be refreshed singularly. This will be accomplished by pressing the onclick/the event of a button
  2. The handEvent() is GetTime()

Within JavaScript the most basic implementation of the XMLHttpRequest resembles the following: javascript file

`var xmlHttpRequest; function GetTime() { //create XMLHttpRequest object xmlHttpRequest =(window.XMLHttpRequest) ?new XMLHttpRequest() : new ActiveXObject (“Msxm12.XMLHTTP”);

//If the browser doesn’t support Ajax, exit now if (xmlHttpRequest ==null) return;

//Initiate the XMLHttpRequest object xmlHttpRequest.open(“Get”, “Time.aspx”, true);

//Setup the callback function xmlHttpRequest.onreadystatechange=StateChange;

//Send the Ajax request to the server with the GET data xmlHttpRequest.send(null); }

Function StateChange() { if (xmlHttpRequest.readyState == 4) { Document.getElementaryById(‘lblTime’).value = xmlHttpRequest.responseText; } }`

The handEvent() ex. GetTime() creates an XMLHttpRequest as follows:

//create XMLHttpRequest object xmlHttprequest = (window.XMLHttpRequest) ? new XMLHttpRequest () : newActiveXObject(“Msxm12.XMLHTTP”);

If Ajax is not supported, the browser will return a false The connection to the server must be opened with the new XMLHttpRequest object.

//Initiate the XMLHttpRequest object xmlHttpRequest.open(“Get”, “ime.aspx”, true); When working with Ajax, you will become accustomed to its “callback” function that is used to catch the response of the server when it has completed processing the Ajax request. The callback reference is created like this:

//Setup the callback function xmlHttpRequest.onreadystatetechange = StateChange;. The function of the callback will look like the following: Function StateChange() { if(xmlHttpRequest.readyState == 4) { Document.getElementById('lblTime’).value =xmlHttpRequest.responseText; } }

The onreadystatechange will fire multiple times during a request via Ajax. The “readyState” property must be evaluated to determine when the server response is complete (4). Once it becomes 4, the DOM can be updated with the response message provided via the server.

The request method being sent is “GET” (this is case sensitive). There is zero need to send additional information to the server.

//Send the Ajax request to the server with the GET data xmlHttpRequest.send(null); Via Time.aspx.cs on Page_Load event, a simple response is to be written.

Response.Write(DateTime.Now.Hour + “:” +DateTime.Now.Minute +“:” +DateTime.Now.Second );

Read More:

Ajax tutorial for beginners Ajax programming rules and techniques