XMLHTTPJSClass - JSON Class for Ajax Operations

Share |

In the development of Ajax application many times we may come across following issues.

• Need to update multiple text boxes simultaneously.
• Fill more that one dropdown lists.
• Combination of text boxes, dropdown lists and div tags.
• Calling different web pages and different webservices

Means one event may lead to updating of many html elements. In such cases we will have to send Ajax request in a loop. Again for each request we will have to take care of timeouts and request failures. Here if data is static we can keep it on HTML page and using JavaScript can directly hide and show the contents. But if we have to use real time data and also choices of display vary according to choices of the user, in such case looping of Ajax request may not be a good idea.

In this article we will discuss about XMLHTTPRequest object and JavaScript. We will develop a JavaScript class in which we can vary our choices and also be able to update multiple HTML contents. Also this class can be extended as per the requirements.

We will first talk about class in JavaScript, there is no keyword called class in JavaScript but we can use function as a class.

Checkout following code

<br /> function testClass()<br /> {<br /> this.Msg = "Hello";<br /> this.showMsg = function()<br /> {<br /> alert(this.Msg);<br /> }<br /> }<br /> <br /> var obj = new testClass();<br /> obj.Msg = "HI";<br /> obj.showMsg();<br />

In above script if we remove obj.Msg = "HI"; we will get an alert with text Hello.


Now step by step we will start developing our JavaScript class.
1.Include JS file and write following
<br /> function AjaxClass()<br /> {<br /> this.Method = "GET";//OR "POST" <br /> this.Async = true; //OR false (asynchronous or synchronous call)<br /> this.request = null;<br /> this.init = function() <br /> {<br /> if (window.XMLHttpRequest) // if Mozilla, Safari etc<br /> this.request = new XMLHttpRequest();<br /> else if (window.ActiveXObject)<br /> { // if IE<br /> try <br /> {<br /> this.request = new ActiveXObject("Msxml2.XMLHTTP");<br /> } <br /> catch (e)<br /> {<br /> try<br /> { <br /> this.request = new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> catch (e){}<br /> }<br /> }<br /> <br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> //we will develope this.handleResponse function in step 3<br /> this.request.open(this.Method, this.url , this.Async);<br /> this.request.send(null);<br /> }<br /> } <br /> }<br />

In this step we have created XMLHTTPRequest object and simply send call to the server. By default method is GET (this.Method = "GET") and calling type is Ascynchronous (this.Async = true)

2.In this step we will develop simple logic which will allow us to dynamically call Ajax function.

For this in our above Ajax function we will add one JSON (www.json.org) object as follows.

<br /> this.JSONArray = { "Method" : "POST", //Method type<br /> "Async" : true, //Call type<br /> "CallPage" : "CallPage.aspx", //page or webservice<br /> "Querystring" : "", //Query string<br /> "dependentType" : null,//[0,1,2,3] for isEdit <br /> "isEdit": [<br /> {<br /> "textBoxId" : null, //0 then this element<br /> "dropDownId" : null, //1 then this element<br /> "default" : null, //2 then this element<br /> "misc":null //3 then this element<br /> }<br /> ]<br /> <br /> };<br />

In above script we can set the default values for all. Please reffer demo JS file to understand this better. We will use these values to set response from the server to textboxes,drop down lists,Div tags, td tags etc. Using "CallPage" : "CallPage.aspx" we can define default server page and while calling Ajax function we can reset this value to web method or to any other web page.
As we will proceed in this article we will come to know how can we change all above values and how can we use it for multiple updation.Also we will see that how to extend the class for further customization.

3.As we have seen in 1st step;

this.request.onreadystatechange=this.handleResponse;
In this step we will develop this.handleResponse function also in this function we will use JSON object defined in 2nd step.
Whenever this.handleResponse function gets call script looses the focus of this. To keep trac of this object we will assing it to some variable. i.e

<br /> var self = this; // To handle lose of focus<br />

In this function we will be able to receive data from server. Once we get the data we can play with it the way we want.
This function will take care of the responses from web services as well as from web pages.
Difference is, web service returns response in the form of XML where are response from the webpage can be defined by web developer.

The function will be as follows

<br /> var self = this; // To handle lose of focus<br /> this.handleResponse = function()<br /> {<br /> if(self.request.readyState == 4 && self.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(self.request.responseText);<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else<br /> {<br /> var parser=new DOMParser();<br /> var doc=parser.parseFromString(self.request.responseText,"text/xml");<br /> }<br /> try<br /> {<br /> var data = "";<br /> if(doc.documentElement) //Response from webservice<br /> data = doc.documentElement.childNodes[0].nodeValue;<br /> else data = self.request.responseText; //from web page<br /> //data contains response text from the server<br /> <br /> //At this point we have response from serve<br /> //so here we will write our function to //manipulate the data. We will develop it in <br /> //4th step.<br /> }<br /> catch(e) {}<br /> }<br /> } <br /> <br />

If there is any problem in understanding please go through above code again.

In the the 1st step we have

<br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> this.request.open(this.Method, this.url , this.Async);<br /> this.request.send(null);<br /> }<br /> We will modify this as follows so that we can directly use JSON array which we have defined in 2nd step.<br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> this.request.open(this.JSONArray.Method, this.url , this.JSONArray.Async);<br /> this.request.send(null);<br /> }<br />

While developing Ajax application take care of following point.

• URL for XMLHTTPRequest object should belong to same domain.
• Firefox and other browser doesn’t allow cross domain communication.
• IE will show warning

Thus our
<br /> this.url = “http://myDomain/mysite/" + this.JSONArray.CallPage + this.JSONArray.Querystring;<br />

e.g. "http://localhost/Demo/CallPage.aspx?"+this.JSONArray.Querystring;

Also when ever we want to call web methods like above example, we need to set following protocols under in web.config file.

<br /> <webservices><br /> <protocols><br /> <add name="HttpGet"><br /> <add name="HttpPost"><br /> </protocols><br /> </webservices><br />

4.Up to this point we have finished with development of Ajax logic which will return us response. And in this point we will develop logic for population HTML controls

In this.handleResponse (step 3) we have seen that we get response in
“data” variable in JavaScript.

So once we got response from the server we will write following logic

<br /> switch(self.JSONArray.dependentType)<br /> {<br /> case 0:<br /> PopulateControls(self.JSONArray.isEdit[0].textBoxId,data);<br /> //simple call to JS function<br /> break;<br /> case 1:<br /> PopulateControls(self.JSONArray.isEdit[0].dropDownId,data);<br /> break;<br /> }<br />

self.JSONArray.isEdit[0].textBoxId will contain id of the text box in which we have to fill the response. And data is the response from the server.
In 2nd step we have defined JSON object as follows

<br /> this.JSONArray = { "Method" : "POST", //Method type<br /> "Async" : true, //Call type<br /> "CallPage" : "CallPage.aspx", //page or webservice<br /> "Querystring" : "", //Query string<br /> "dependentType" : null,//[0,1,2,3] for isEdit <br /> "isEdit": [<br /> {<br /> "textBoxId" : null, //0 then this element<br /> "dropDownId" : null, //1 then this element<br /> "default" : null, //2 then this element<br /> "misc":null //3 then this element<br /> }<br /> ]<br /> <br /> };<br />

And in our above switch we have simply used the elements of JSON object

At this point we will see how to call our Ajax Class, how to initiate the request and how to set Elements of our JSON object.
Simply create object of our AjaxClass().

<br /> var obj = new AjaxClass(); //Object creation<br /> obj.JSONArray.Method = "GET"; //Setting Method <br /> obj.JSONArray.isEdit[0].textBoxId="txt1";//Textboxid for response<br /> obj.JSONArray.dependentType=0;//0->Textbox,1->drop downlist,<br /> //2->tagId,3->Misc and so on<br /> obj.init();//Initiate the AjaxCall<br />

if obj.JSONArray.dependentType=1 then our switch case will not work for text box, but it will work for dropdown list (check above switch case). Means we will have to set dropdown list of JSON object.

<br /> obj.JSONArray.isEdit[0].dropDownId="ddl1";<br />

and so on, we can define our own set of HTML controls to be filled.

In the same way we can change all default settings in JSON object of that class.
e.g. obj.JSONArray.Method = "GET";
obj.JSONArray.CallPage = "Mywebservice/webMethod";
obj.JSONArray.Querystring= "My querystring";

For this URL will be

<br /> this.url = this.url + this.JSONArray.CallPage + this.JSONArray.Querystring ; <br /> //Check this.init = function() of XMLHTTPJSClass.Js in democode.<br />

In case of web service we will have to set CallPage element in the same way we did in above example.

Now for multiple textboxes simple trick,
obj.JSONArray.isEdit[0].textBoxId="txt1$txt2$txtn";//$ is a delimiter
While sending data from server send it with the same delimiter,in such a way when we split obj.JSONArray.isEdit[0].textBoxId and response data on $; we will get one to one data and textBoxId.

Now we can have different types like “txtbox(es) + drop down list(s) + div” in such case we can use "misc" option of isEdit element of JSON object.
And we can define our PopulateControls function the way we want.

Just think of the choices for getting Response from AjaxCall; we can develop very critical systems using this logic and keeping code as simple as possible. Also we can integrate our ICallback logic for large data transfer.



Demo JavaScript file is as below ( DOWNLOAD)

<br /> // JScript File<br /> //var request;<br /> <br /> function AjaxClass()<br /> {<br /> this.JSONArray = { "Method" : "GET", //Method type; For webservice user GET method only.<br /> "Async" : true, //Call type<br /> "CallPage" : "", //Calling page or webservice<br /> "Querystring" : "", //Query string<br /> "dependentType" : null,//[0,1,2,3] for isEdit <br /> "isEdit": [<br /> {<br /> "textBoxId" : null, //0 then this data<br /> "dropDownId" : null, //1 then this data<br /> "tagId" : null, //2 then this data<br /> "misc":null //3 then this data<br /> }<br /> ]<br /> <br /> };<br /> <br /> this.Method = this.JSONArray.Method;//"POST";<br /> this.url = "http://localhost:2849/XMLHTTPJSClassExt"; <br /> this.Async = this.JSONArray.Async//"true";<br /> this.textBox = this.JSONArray.textBox;//true;<br /> this.request = null;<br /> var self = this; // To handle lose of focus<br /> this.handleResponse = function()<br /> {<br /> if(self.request.readyState == 4 && self.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(self.request.responseText);<br /> }<br /> // code for Mozilla, Firefox, Opera, etc.<br /> else<br /> {<br /> var parser=new DOMParser();<br /> var doc=parser.parseFromString(self.request.responseText,"text/xml");<br /> }<br /> try<br /> {<br /> var data = "";<br /> if(doc.documentElement) data = doc.documentElement.childNodes[0].nodeValue;<br /> else data = self.request.responseText;<br /> <br /> //Logic for Poputating the HtmlControl<br /> switch(self.JSONArray.dependentType)<br /> {<br /> case 0:<br /> PopulateControls(self.JSONArray.isEdit[0].textBoxId,data);<br /> break;<br /> case 1:<br /> break;<br /> case 2:<br /> window.document.getElementById(self.JSONArray.isEdit[0].tagId).innerHTML = data;<br /> break;<br /> }<br /> }<br /> catch(e) {}<br /> }<br /> } <br /> <br /> this.init = function() {<br /> this.url = this.url + this.JSONArray.CallPage + this.JSONArray.Querystring ; //WebService.asmx/HelloWorld";<br /> if (window.XMLHttpRequest) // if Mozilla, Safari etc<br /> this.request = new XMLHttpRequest();<br /> else if (window.ActiveXObject)<br /> { // if IE<br /> try <br /> {<br /> this.request = new ActiveXObject("Msxml2.XMLHTTP");<br /> } <br /> catch (e)<br /> {<br /> try<br /> { <br /> this.request = new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> catch (e){}<br /> }<br /> }<br /> <br /> if(this.request)<br /> { <br /> this.request.onreadystatechange=this.handleResponse;<br /> this.request.open(this.Method, this.url , this.Async);<br /> this.request.send(null);<br /> } <br /> } <br /> }<br /> <br /> <br /> function PopulateControls(ids,values)<br /> {<br /> // Split ids and Split values on $ for multiple Fillins<br /> var idArr = ids.split('$');<br /> var dataArr = values.split('$');<br /> if(idArr.length == dataArr.length)<br /> {<br /> for(var i = 0 ; i < idArr.length ; i++) { window.document.getElementById(idArr[i]).value = dataArr[i]; } } } // function testClass() // { // this.Msg = "Hello"; // this.showMsg = function() // { // alert(this.Msg); // } // } // // var a = new testClass(); // a.Msg = "HI"; // a.showMsg();

Download Demo Code here --> XMLHTTPJSClass.zip