AJAX is one of the hottest new technologies, in the ever growing universe of Web development. In this article, we’ll get to know how AJAX fits in a real-world situation and how you can assess its value in a project. Hopefully, by the time you finish reading this article, you’ll know what AJAX is, why, and how to use it.Nothing really new about what is happening here.
The normal routine in Web development involves requesting a file from the Web Server and receiving a page as response. So whats new with AJAX. Just that the difference, is that requests are being made from the Client side Java Script, which is embedded within HTML.
So what is AJAX ?
AJAX is acronym of Asynchronous Java Script and XML
Asynchronous:
Imagine you are the User, and you have sent some request to the Web server via Hypertext Transfer Protocol (HTTP). In regular web technology, you must wait for the web server to respond. In AJAX, while you are waiting for the response , you are free to do some processing on the same page you have requested. Since your response may not come back immediately what you can do is, set up a function which will wait for it to be send from the server, and which will be authorised to respond back.
Java Script :
As all we know, Java script used to make request to the server. Once you get the response back from the server you can use the document object model in some way to show output. That is, the submission is done successfully.
XML :
The data you receive back from the server, will often be packaged as a snippet of XML, since it can be easily processed with Java script. However, any type of text file can be used with AJAX.
In AJAX, the request to server is being done through Hypertext Transfer Protocol (HTTP). The speciality of AJAX is that, the client side script can continue with the process, even while waiting for the response from the Web server. So its called Asynchronous.
So lets keep this simple. We retrieve data from a database as XML, make the calls to a server-side script, then send data to a server-side script that has to be stored in a database, or simply load the XML file in order to populate pages of your Web site without refreshing the page. This article will help you to determine, when AJAX is a good solution for developing your users’ experiences.
I assume that one have the basic understanding of the Java, Java Script and XML part of the acronym . Although one can request any type of text file with AJAX, Here we focus only on XML. You’re going to learn how to create the object, make a request, and customize the available response, while maintaining a good practice that provides an intuitive user experience. Ultimately it is the user experience that is going to count more than anything else.
Let’s Do AJAX:
To begin with, you need to create an XML file, that we will use in our AJAX program. Keep in mind, that the file you’re requesting must reside on the same server as the finished project resides.
The request will be made by an HTML file, so we need to create an XML file as our next step . When the page loads with the help of ‘onload’ method in the body tag, the request is made to the server . The div tag of the HTML file will have an ID so that we can target it when we’re ready to display the content. Once you’ve finished doing this this, the content of the body of your page should have :
<body onload="makeRequest("'xml/data.xml'");">
<div id="copyhere"></div>
</body>
Request Object Creation:
In order to create the request object, the first thing is to check whether browser uses the XMLHttpRequest or the ActiveXObject. The main difference between the objects, is the browsers that use them. ActiveX object is used by Windows IE 5 and above ; XMLHttpRequest object is used by Mozilla, Netscape 7, Opera, and Safari 1.2 and above. The way in which you create the objects also makes a difference. While Opera, Mozilla, Netscape, and Safari, simply calls the object’s constructor, the Windows IE requires the name of the object to be passed to the ActiveX constructor. Following example shows you how to write the code to determine which object to use and how do we create it:
if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
Making a Request to the Server:
Since we have created the request object, the request to the server can be done now. The reference must be created for an event handler to listen for onreadystatechange. So once the state changes, the event handler method will start its functionality. As soon as we finish writing, the request, we’ll write this method. We now need to have a connection to GET or POST, a custom URL, which in this particular case is the content.xml, and have a Boolean defining whether you want the call to be asynchronous.
Now the time has come to send the request. For this example, We will use null because we’re using GET; when one use POST, along with this method, you need to send a query string.
request.onreadystatexchange = onResponse;
request.open("GET". url, true);
request.send(null);
Custom Loading and Error Handling Messages
The place to focus on loading and error handling is the event handler that you created for onreadystatechange method . Now it is time we start thinking about the users and provide feedback on the status of the content with which they’re interacting. In this example, we shall provide feedback to almost all the loading status codes and some basic feedback for the error handling status codes that seems to occur most frequently. While indicating the current status of the request object, the readyState property includes the values shown in the following table.
Value |
Description |
|
0 |
Uninitialized. Without data the object is being initialized |
|
1 |
Loading. The data is carried and loading to its object. |
|
2 |
Loaded. Finished loading its data by object. |
|
3 |
Interactive. Possible for user to interact with the object even while it’s not fully loaded. |
|
4 |
Complete. The object now completely initialized. |
Parsing the Response
It is when you’re ready to parse the response from the request object, that the real work begins. Now, we actually start working with the data that you requested. To display the raw data from the response for testing purposes alone during development, the responseText and responseXML properties can be used, if one feel so. To begin accessing nodes in the XML response, start with the request object that you created, while target the responseXML property to retrieve (you guessed it) the XML from the response. Target the documentElement, which retrieves a reference to the root node of the XML response.
var response = request.responseXML.documentElement;
Now that you have a reference to the root node of the response, you can use getElementsByTagName() to retrieve childNodes by their node names. The following line locates a childNode with a nodeName of header:
response.getElementsByTagName('header')[0].firstChild.data;
Using firstChild.data allows you to access the text within the element:
response.getElementsByTagName('header')[0].firstChild.data;
Here’s a complete example of how to write the code:
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;
Assessing the requirements:
Now that you know the basics of how to use AJAX, to decide on whether to use it on a project will be certainly the major step. The most important thing to keep in mind while developing application using AJAX is the unavailability of the Back button when you’re not refreshing the page. It may be beneficial, if you focus on using AJAX in smaller sections of your project that could benefit from using this type of interaction. For instance, you could build a form that queries a script every time a user enters an input field, or even types a letter in order to provide real-time validation. You could build a drag-and-drop page that sends data to a script on the release of an item and saves the state of the page to a database. The reasons for using AJAX definitely exist, and are beneficial not only to the development experience but to users; it all depends on the situation and execution.
There are also ways to work around the issues with the Back button, such as with Google and Gmail, which now provides an undo for steps that you make without refreshing the page. Many more creative examples are sure to surface, which will benefit users by providing developers with ways to create unique, real-time experiences.
Conclusion
Even though AJAX may allow developers to build new,advanced and improved ways of communicating with a Web page, as an AJAXIAN one need to remember that our product is not only about the technologies we use to implement; Without the consideration of the end users, any project we build would have no purpose. If one have that principle in mind, we can assess what technologies to use and when is it appropriate to use , in order to create an efficient,improved application that’s beneficial to all who use it.
About the author:
Lishoy M. J is a Java developer specializing in AJAX related programming. He is currently working for Bobcares.
0 Comments