Using responseText in Ajax Call

The response can come in many different forms, such as XML, plain text, (X)HTML, or JavaScript Object Notation (JSON). Depending on the data format that you receive, there are two different ways to handle it: with responseText or with responseXML. The responseText method is used for all formats that are not based on XML. It returns an exact representation of the response as a string. Plain text, (X)HTML, and JSON are all formats that use responseText. Using this method on plain text or HTML is trivial: (Source)

For this post i will use the responseText property to get the data return by the Ajax call. For this example i have used the northwind database and in that database i have used the two tables which are orders and the Employees table. I have used DropDownList control which is used to fill with the countries name from the order and i have used the distinct select statement to get the countries name from the order table. Next i have the div control which will show the detail of order which is get from the order table based on the country name. When use select the country name from the DropDownList then the detail of that country is display in the div control.

First i have fill the country DropDownList control by selecting the distinct shipCountry form the order table and also attaching the onChange event to the country DropDownList country, The onChange is the name of the JavaScript function which will be called when ever value in the country DropDownList is changed. This is registered against the onchange JavaScript event. Here is the complete JavaScript. In the onChange function have called the showCustomer function which will take the country name as input parameter.

function onChange(CurrentItem)
{
showCustomer(CurrentItem.value);
}

//xmlHttp object
var xmlHttp

function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");

   return;
}
var url="OrderDetail.aspx";
url=url+"?Country="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
var divDetail = document.getElementById("");
divDetail.innerHTML = xmlHttp.responseText;
}
}

In the showCustomer function i have initialize the xmlHttp object which is declared globally in the JavaScript. I have called the GetXmlHttpObject function which will check the browser and then return the xmlHttp object depending on the browser. I have not paste the GetXmlHttpObject function here, you can find it in the source code of this project. Next i have check the xmlHttp object for null, if the xmlHttp object is null then no need to go further just display the message to user and return. If the xmlHttp object is not null then next i have created the url which will be used to call the page. In this case i have call the OrderDetail.aspx page for the Ajax call and also pass the country in the query string and a random number in the query string so that each time the call goes to the OrderDetail.aspx it will treat it as new call each time. Next i have attach the onreadystatechange function to the xmlHttp object so that when the state of the 4 mean our request is complete , we can check the responseText project to get the our result, which is return from the Ajax call. For detail of the onreadystatechange and the state of the request click here.

In the OrderDetail code behind file what did is to get the country name from the query string and then query the sql server to get the detail of the order based on the country name. For fetching the detail of the order based on the country name i have used the order table and also the employees table to get the employee name from that. Then after the successful of the sql query i have store the return values in the data reader object. and the loop through the data reader read() function call i have generate the html table which will be as it is shown on the client side.

After the return from the server in the onreadystatechange function , when the state of the request return 4 I have get the div control and then assign the xmlHttp.reponseText to the innerHTML property of the div control and the over loop is complete based on the DropDownList onchange event.

You can download the source code from here. you can read more about the responseText more by clicking here

All and any comments / bugs / suggestions are welcomed!