free web page hit counter

« Creator Tip: Setting... | Main | Plugin development... »
Tuesday Jan 17, 2006

Creating an AJAX application - my first experience

After seeing Craig's excellent AJAX demo during an Executive Briefing, I decided to learn AJAX. This is my first baby step, so decided to do it systematically

First, I got the book AJAX in action and stared reading it. It was a long read before I encountered the steps to write my first AJAX program in chapter 3, but worth a read.

I'm an IDE junkie. So I decided to use some kind of IDE that supports java script. Did a google search and after evaluating couple of Javascript editor, decided to use C-Point Antechinus JavaScript Editor v6

As you know, unlike Java development, Javascript development is a pain in the .. you know where. So having a JavaScript debugger will be handy. Since I'm already familiar with Mozilla project Venkman JavaScript Debugger, decided to use it.

Downloaded and installed Apache topmcat server to host the application.

Now on to the first AJAX program I wrote (turned out to be simpler than I imagined).

This is my simple AjAX program logic

  1. Create a Page with one button and title "My first AJAX Program"
  2. On clicking the button, asynchronously open a file and display its content in the page
First created couple of Java Script functions
  1. getXmlHttpRequest(), to crete the XML HTTP Request object. This object facilitates the asynchronous communication between the server and browser.
  2. sendHttpRequest(), to send the HTTP Request to the server.
  3. readyStateChangeCallback(), a call back function to monitor and receive data from server. This call back is added to the XmlHttpRequest object in the sendHttpRequest() function.
  4. displayData(), to display the received data, called in the readyStateChangeCallback(), when the completed status is received.
  5. geteData(), to get the data when the button is clicked. Set to the onClick attribute of the button.

Here is the simple HTML page with the AJAX code, I created.

Suggestion: If it is your first program, do not copy and paste. Rather type the code by hand. This will really help in understanding what you are doing. You might make mistake, but helps to understand the subject very clearly!

<html>
<head>
<title> AJAX Sample </title>
<script language = "JavaScript">

var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;

var xmlHttpRequest = null;
var console = null;

/* Get the XMLHttpRequest object */
function getXmlHttpRequest(){
  if (window.XMLHttpRequest){
    xmlHttpRequest = new XMLHttpRequest();
  }else if (typeof ActiveXObject != "undefined"){
     xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlHttpRequest;
}

/* Send the Http Request object to server*/
function sendHttpRequest(url, params, httpMethod){
  if(httpMethod == null){
    httpMethod = "GET";
  }
  xmlHttpRequest = getXmlHttpRequest();
  if (xmlHttpRequest != null){
    xmlHttpRequest.onreadystatechange = readyStateChangeCallback;
    xmlHttpRequest.open(httpMethod, url, true);
    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlHttpRequest.send(params);
  }
}

/* Call back to monitor and receive data from server*/
function readyStateChangeCallback(){
  var readyState = xmlHttpRequest.readyState;
  var data = null;
  if (readyState == READY_STATE_COMPLETE){
    data = xmlHttpRequest.responseText;
  }else{
     data = "loading .... [" + readyState + "]";
  }
  displayData(data);
}

/* Display the received data in the */
function displayData(data){
  if( console != null){
    var newLine = document.createElement("div");
    console.appendChild(newLine);
    var txt = document.createTextNode(data);
    newLine.appendChild(txt);
  }
}

/* Get the data when the button is clicked */
function getData(){
  console = document.getElementById("console");
  sendHttpRequest("welcome.txt");
}

</script>
</head>
<body bgcolor="white">
  <h1>My first AJAX program!</h1
  <input type="button" value="Get Data" name="button" onClick="getData()">
  </br> </br>
  <div id="console"> </div>
</body>
</html>

To ran the code, placed the HTML file in the webpages/ROOT folder along with welcome.txt file. This was needed because I did not create a web application to be deployed to the webserver.

Tip: Do not just open the HTML file in a browser from your desktop (the mistake I did first). This doesn't work and browser doesn't complain either. Using mozilla Javascript console I found out the problem

Here are the result

After clicking the button

Yahoo! My first AJAX Program worked.

Posted at 09:45PM Jan 17, 2006  |  Permanent link to this entry

Comments:

>>Do not just open the HTML file in a browser from your desktop It should work (and it works). Only thing is the file that you are reading (welcome.txt here) should be in the same folder (on the desktop in this case).

Posted by Debashish on January 18, 2006 at 10:07 PM PST #

hi, mr. Winston, I have a question, could you help me? How can I to remove the bar from the rich textarea in creator and disabled to the user? please help me.

Posted by jhonny on February 08, 2007 at 03:24 PM PST #

http://www.batteryfast.co.uk/hp/dv8100.htm hp dv8100 battery,
http://www.batteryfast.co.uk/hp/dv8200.htm hp dv8200 battery,
http://www.batteryfast.co.uk/hp/dv8300.htm hp dv8300 battery,

Posted by laptop battery on October 24, 2008 at 12:35 AM PDT #

If you need (or want) a computer that’s easy to take along,you can see it from http://www.adapterlist.com/hp/dv8100.htm hp dv8100 battery , whcih offer the longlife and consistently reliable performance you need to get the most out of your notebook.

Posted by laptop bettery on March 03, 2009 at 05:50 PM PST #

Post a Comment:
  • HTML Syntax: NOT allowed