seemingly random and unorgainzed bits of information
5.14.2006
Start Using Ajax Today, It's Easy!
In this blog entry, my job is to convince you that Ajax is EASY and you should start using it today.
The Resurgence of JavaScript
When you ear people talk about Ajax, they are really talking about browser programming using JavaScript. Over the years, JavaScript has matured into a powerful and agile scripting language. Before the mass epiphany (see previous blog entry) of the capabilities of language, the most exercise that JavaScript received was the development of dynamic menus on web pages. With the Ajax movement, developers are realizing that JavaScript provides powerful development platform rivaling desktop technologies.
XMLHTTP Object Changed Everything
The star of the Ajax Show is the JavaScript object called "XMLHTTP". This object facilitates the "asynchronous" functionalities of AJAX (Asynchronous JavaScript and XML) approach. Back in version 5, Microsoft (yes, Microsoft started it first) introduced the capability to seamlessly send requests to a web server without causing a screen refresh.
This simple feature is at the heart of the browser's rich client Ajax evolution. In traditional usage model, the browser refreshes the screen automatically with each request to the server which causes the screen to loose all of its states. Using JavaScript and the XMLHTTP request object, a web page can open a connection to the server and receive data without having the browser page refresh. The page maintains its state and the programmer only updates the necessary components.
Your First Ajax Page
In deed, using Ajax is easy (if you have worked with HTML before). If you are familiar with HTML and its components you are 80% there. The rest is to become familiar with JavaScript and the browser's built-in API's that let you programmatically control the HTML components.
Hello AJAX World
In this example, we are going to update the content of a page without doing any page refresh to demonstrate the basic of Ajax technologies. Our example will have the followings:
- An input text box
- A button
- A span tag
<head>
<script>
function sayHello() {
// query DOM set for specific elements by ID
var label = document.getElementById("label");
var name = document.getElementById("name").value;
// change element styles on the fly
if(!name) {
label.style.backgroundColor = "red";
label.style.color = "white";
msg = "Enter your name now or else!";
}else{
label.style.backgroundColor = "blue";
label.style.color = "white";
msg = "Hello " + name;
}
// update lement content on the fly
label.innerHTML= msg;
}
</script>
<title>Hell AJAX World!</title>
</head>
<body>
<form>
Enter Name: <input id="name">
<input type="button" value="Say Hello" onclick="sayHello();">
</form>
<span id="label"></span>
</body>
</html>
(Copy, paste, and save in an html file. Tested with Firefox 1.x and IE 6)
This simple HTML page depicts several important aspects of Ajax technologies:
- Ability to query the DOM set to retrieve specific HTML components using document.getElementById() method.
- Retrieve value of components.
- Use JavaScript to update content and style of HTML components.
The majority of your Ajax code will be spent on the activities listed above. Once you master and understand how to use JavaScript effectively to manipulate your HTML components, the rest is even easier.
As I said in the beginning of the this blog, Ajax is easy and I have demonstrated it through a simple Hello-World-style example. In my next blog we will explore more complicated examples using the XMLHTTP request object to send data back to the server.
