AJAX, an acronym for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability.
An XmlHttp object can be created like this:
<script language="javascript">
//Global XMLHTTP Request object
var XmlHttp;
//Creating and setting the instance of appropriate XMLHTTP Request object to
//a "XmlHttp" variable
function CreateXmlHttp()
{
//Creating object of XMLHTTP in IE
try
{
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttp = null;
}
}
//Creating object of XMLHTTP in Mozilla and Safari
if(!XmlHttp && typeof XMLHttpRequest != "undefined")
{
XmlHttp = new XMLHttpRequest();
}
}
</script>
We can send a request to the server page to retrieve the data from the server through the XmlHttp object.
var requestUrl = "WebForm2.aspx" + "?SelectedCountry=" + (selectedCountry);
CreateXmlHttp();
// If browser supports XMLHTTPRequest object
if(XmlHttp)
{
//Setting the event handler for the response
XmlHttp.onreadystatechange = HandleResponse;
//Initializes the request object with GET (METHOD of posting),
//Request URL and sets the request as asynchronous.
XmlHttp.open("GET", requestUrl, true);
//Sends the request to server
XmlHttp.send(null);
}
The above code explains how to send a request to webpage2.aspx with the request object collection. This collection contains the selected country itself.
When the request is recieved on the server side, the server page executes the code and gives the response through the XmlHttp object:
Dim xList As XmlNodeList
Dim xNode As XmlNode
Dim Str As String
xmlDoc.Load(Server.MapPath("CountriesAndStates.xml"))
Dim Country As String = Request.QueryString("SelectedCountry")
Dim query As String = ("/countries/country[@name='" & country & "']")
xlist = xmlDoc.SelectNodes(query)
Response.Clear()
For Each xNode In xList
If xNode.HasChildNodes = True Then
For Each xN As XmlNode In xNode.ChildNodes
Str &= xN.InnerText & "-"
Next
End If
Next
Response.Clear()
Response.ContentType = "text/xml"
Response.Write(str)
Response.End()
Recieving the response from the server page can be done like this:
The valid list of XMLHttpRequest ready states is listed in the following table:
|
Value |
Description |
|
0 |
Uninitialized |
|
1 |
Loading |
|
2 |
Loaded |
|
3 |
Interactive |
|
4 |
Complete |
The list of status codes for the HTTP status is given below:
Request received, continuing process.
The action was successfully received, understood, and accepted.
The client must take additional action to complete the request.
The request contains bad syntax or cannot be fulfilled.
The server failed to fulfill an apparently valid request.
if(XmlHttp.readyState == 4)
{
// To make sure valid response is received from the server,
// 200 means response received is OK
if(XmlHttp.status == 200)
{
ClearAndSetStateListItems(XmlHttp.responseText);
}
else
{
alert("There was a problem retrieving data from the server." );
}
}
There are two types of XmlHttp responses for rectrieving the response.
responseText responseXMLThe responseText is split using the split function and the response is assigned to an array.
Then, the array values are added in the dropdown list.
var stateList = document.getElementById("stateList");
//Clears the state combo box contents.
for (var count = stateList.options.length-1; count >-1; count--)
{
stateList.options[count] = null;
}
var stateNodes = countryNode.split("-");
//window.alert(stateNodes)
var textValue;
var optionItem;
//Add new states list to the state combo box.
for (var count = 0; count < stateNodes.length; count++)
{
textValue = (stateNodes[count]);
optionItem = new Option( textValue, textValue, false, false);
//window.alert(textValue);
//stateList.appendChild(textValue);
stateList.options[stateList.length] = optionItem;
}
This is my first article in The Code Project.
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
