This article is for those who are new to Ajax

This article is for those who are new to Ajax. Ajax stands for Asynchronous Java And Xml. Ajax is the great solution for the new age of web applications, it simply helps developer to increase the performance of the site along with the more user interactive UI. Since web page is not getting refreshed each time, it is more users friendly.

The idea is; if page size is 500kb and only 10kb of data is to be updated, then if web application sending and receiving only 10kb data to and from server make more sense, than refreshing whole page. Also the request to server is asynchronously so that user can continue with the work instead of waiting for the response from the server.

It really works fast a very good web experience, in old days of the web development each time user is suppose to wait for the whole page to get refreshed, not a good idea.

Start with AJAX :

Ajax actually works because of the XMLHttpRequest object. Using this object web application can communicate with the server, i.e. either web service or the webpage. In this case web service or webpage will send required data to client page and then on client side using Java script corresponding field can be update.

You can create XMLHttpRequest object as follows:

<br />var request = false<br /> if (window.XMLHttpRequest) // if Mozilla, Safari etc<br /> request = new XMLHttpRequest()<br /> else if (window.ActiveXObject)<br /> { // if IE<br /> try <br /> {<br /> request = new ActiveXObject("Msxml2.XMLHTTP")<br /> } <br /> <br /> catch (e)<br /> {<br /> try<br /> {<br /> request = new ActiveXObject("Microsoft.XMLHTTP")<br /> }<br /> catch (e){}<br /> }<br /> }<br /><br />


“request” is the XMLHttpRequest object in above code. (Code is in JavaScript )

Next step after this is to open the object connection and send the request
Open method looks like

XMLHttpRequest.open(method, url, in boolean async, [user, password])
i.e.
request.open('GET', url+parameter, true)
request.send(null)

(Here we are not going to use user and password)
but before this, we need to specify the function which will take care of the data return from the server. i.e. once we send request to the server using XMLHttpRequest object and once response comes from the server which function will handle it.
Before sending the request we will specify the action; for this XMLHttpRequest object posses one event called as onreadystatechange. On this event we can specify which function should be called on each ready state change.
Now before this will understand which are the states XMLHttpRequest object supports.

Ready state value	Description
0	Represents an uninitialized state in which XMLHttpRequest object is created; and not initialized
1	Open() method has been successfully called
2	Sent () : request has been sent to the server.
3	Represent "receiving" state in which the HTTP response headers have been received; message body has not yet been completely received.
4	Loaded, data transfer has been completed.

So the above code will change to

<br />request.onreadystatechange=function() <br />{ <br />if(request.readyState == 4 && request.status==200)<br /> {<br />//Here put your code<br />}<br /> }<br />request.open('GET', url+parameter, true)<br /> request.send(null)<br /><br />

Now we will develop a web application in which user will select the value in the combo box and on selection of the value dependent textbox will be filled. In this case on change event of the combo will be used to fire an Ajax request to the server and server in turns will send a response to the client. (Coding is done in asp.net 2.0)

1.Create a web application design a combo box and text box as follows

<br /> <form id="form1" runat="server"><br /> <div><br /> <br /><br /> <br /><br /> <br /><br /> //This is the input dropdown list. Select any value and following text box will be filled.<br /> <asp:dropdownlist id="InputList" runat="server"><br /> <asp:listitem>Select values</asp:ListItem><br /> <asp:listitem>A</asp:ListItem><br /> <asp:listitem>B</asp:ListItem><br /> <asp:listitem>C</asp:ListItem><br /> <asp:listitem>D</asp:ListItem><br /> </asp:DropDownList><br /><br /> <br /><br /> <br /><br /> <br /><br /> //This is the dependent text box.<br /> <asp:textbox id="DependentOutput" runat="server"></asp:TextBox><br /><br /> </div><br /> </form><br /><br /><br />


2.And in code behind add attribute to “InputList” i.e. to combo box.
<br />public partial class _Default : System.Web.UI.Page <br />{<br /> protected void Page_Load(object sender, EventArgs e)<br /> {<br /> InputList.Attributes.Add("onchange", "callToServer(this.value)");<br /> }<br />}<br />
"callToServer(this.value)" is the javascript function, this function will accept the selected value and send request to the server; using XMLHttpRequest object.

3.Now add one webservice in the same project. Also add following prototypes in web.config file.
<br /><webservices><br /> <protocols><br /> <add name="HttpGet"><br /> <add name="HttpPost"><br /> </protocols><br /> </webservices>
Add above code in tab. This is required to communicate with webservice over http.

4.Now write one webmethod in the webservice. i.e.
<br />[WebMethod]<br /> public string sendMessage(string str) {<br /> string retVal = "";<br /> switch (str)<br /> { <br /> case "A":<br /> retVal = "You have selected A";<br /> break;<br /> case "B":<br /> retVal = "You have selected B";<br /> break;<br /> case "C":<br /> retVal = "You have selected C";<br /> break;<br /> case "D":<br /> retVal = "You have selected D";<br /> break;<br /><br /> }<br /> return retVal;<br /> }<br />
We will call this webMethod in our Ajax call.

5.After this, will write a JavaScript function "callToServer(this.value)" . This function will be called on onchange event of dropdown list (Ref point 1).
<br />function callToServer(val)<br /> {<br /> // Url will change according to your websevice<br /> var url = "http://localhost:1027/WebSite3/webservice.asmx/sendMessage?str="+val;<br /> // For more than one prameter in webMethod <br /> // var url = "http://localhost:1027/WebSite3/webservice.asmx/sendMessage?str="+val + "&para1=123&para2=qwe;<br /> if (window.XMLHttpRequest) // if Mozilla, Safari etc<br /> request = new XMLHttpRequest();<br /> else if (window.ActiveXObject)<br /> { // if IE<br /> try <br /> {<br /> request = new ActiveXObject("Msxml2.XMLHTTP");<br /> } <br /> <br /> catch (e)<br /> {<br /> try<br /> { <br /> request = new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> catch (e){}<br /> }<br /> }<br /><br /> if(request)<br /> { <br /> request.onreadystatechange=handleResponse;<br /> request.open("GET", url, true);<br /> request.send(null);<br /> <br /> } <br /> }<br />
If you observe the url it is the url of the webserivce in the same project.
Here we have to use url which is under the same domain, Firefox doesn’t allow cross refrence, and IE give warning (i.e. IE 6).

Means
var url = "http://domain1/WebSite/webservice.asmx/sendMessage?str="+val;
this will give warning in the IE 6 but Firefox will not allow you to access this webservice.


In the above function check request.onreadystatechange=handleResponse;
Here if you obsever onreadystatechange on function named handleResponse is called. So in the next step we will have to write a function which will handle the response from the server.


6.handleResponse function will be as follows
<br /> function handleResponse()<br /> {<br /> if(request.readyState == 4 && request.status == 200)<br /> {<br /> if (window.ActiveXObject) // for IE<br /> {<br /> var doc=new ActiveXObject("Microsoft.XMLDOM");<br /> doc.async="false";<br /> doc.loadXML(request.responseText);<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else<br /> {<br /> var parser=new DOMParser();<br /> var doc=parser.parseFromString(request.responseText,"text/xml");<br /> }<br /> try<br /> {<br /> var data = doc.documentElement.childNodes[0].nodeValue;<br /> window.document.getElementById('DependentOutput').value = data;<br /> }<br /> catch(e) {}<br /> }<br /> } <br />
Since the response is from webservice and it is in the xmlformat, we have to use parser to parse the data. If you want to see what is the response from the server add alert(request.responseText) in the above code after 1st if condition.

window.document.getElementById('DependentOutput').value = data; this line will fill the textbox with the response from the server.


This how we can create Ajax application, it’s very simple and easy. Once you understand this concept, you can modify the code and make it more complex as per your requirements.