How to use xmlhttprequest in javascript


Today i will discuss by using a scenario how to refresh a page asynchronously without Using server type of controls like Update panels and Timer Event.I will illustrate this Article with snippet of Code Lines in c#

Scenario to refresh a Page Asynchronously/Synchronously :



In Some Application we come across a situation we need to refresh the Page with every specific time Intervals or Specific period of time that we need to go and check the Database.Based on that Database value we need to perform some action.

Disadvantage of Using Timer Event



If we use a Timer Event the timer event will get refresh the whole page and hence flickering of the Page will occur.Hence we can not able to maintain the state of Control even we Use Update Panels.So for that we need to work with non server Control Mechanism.

Advantages of Using XmlHttprequest and XmlHttpResponse



1)xmlhttprequest and xmlhttpresponse are based on Asynchronous and Synchronous way of posting the data to the Server Page.

2)Without post back or flickering the page and no server controls needed only by using java script.
Without having the browsers Concern(ie. works fine all browsers) i.e IE,MOZILLA,FIREFOX,GOOGLE CHROME.

3)First we need to create xmlhttpRequest with Creating new Activex Object.To create XmlHttpObject



var XMLHttpFactories = [
function () {
return (new XMLHttpRequest());
},
function () {
return (new ActiveXObject("Msxml2.XMLHTTP"));
},
function () {
return (new ActiveXObject("Msxml3.XMLHTTP"));
},
function () {
return (new ActiveXObject("Microsoft.XMLHTTP"));
}
];

function createXMLHTTPObject() {
var xmlhttp = false;

for (var i = 0; (i < XMLHttpFactories.length); i++) {
try {
xmlhttp = XMLHttpFactories[i]();
}

catch (e) {
continue;
}

break;
}

return (xmlhttp);
}



The Use of these versions(i.e. Msxml2.XMLHTTP,Msxml3.XMLHTTP,Microsoft.XMLHTTP) will create the xmlhttprequest on specific browsers based on
browser will create an XmlHttpRequest.The XmlHttprequest Object has these types of members .Events ,Methods and Properties.

The important methods are Open and Send which enable the request open for a given page or an Url.And send method will send the given message that is described in open Method.In Send Method you can pass parameters

The open method looks like this...


Set Your own path of the file/page that exists in your Application
request.open("Post", 'MasterPage.Master.aspx', false);


if Url you need to open


var URL = "http://www.google.com?url="+phani+";
xmlhttp.open("GET",URL,true);



The Description is as follows

the Open Method takes

1)the type of request: GET or POST

2)url: the location of the file on the server

3)sync: true (asynchronous) or false (synchronous)

Difference between Asynchronous and Synchronous

Asynchronous :

If you use XMLHttpRequest from an extension, you should use it asynchronously. In this case, you receive a callback when the data has been received, which lets the browser continue to work as normal while your request is being handled.

Only Get Methods can be used Asynchronous..

Synchronous : If you want to just post the data but in turnyou are not waiting for any Response then you can use Synchronous. You can use it in Post Method.When Using xmlhttprequest you can set attribute true or false for diferentiate Asynchronus and Synchronus.


script type="text/javascript"
var XMLHttpFactories = [
function () {
return (new XMLHttpRequest());
},
function () {
return (new ActiveXObject("Msxml2.XMLHTTP"));
},
function () {
return (new ActiveXObject("Msxml3.XMLHTTP"));
},
function () {
return (new ActiveXObject("Microsoft.XMLHTTP"));
}
];

function createXMLHTTPObject() {
var xmlhttp = false;

for (var i = 0; (i < XMLHttpFactories.length); i++) {
try {
xmlhttp = XMLHttpFactories[i]();
}

catch (e) {
continue;
}

break;
}

return (xmlhttp);
}
function ResetTimeOut() {

var pageToCall = "MasterPage.Master";

if (window.XMLHttpRequest) {

var request = createXMLHTTPObject();

//var request = new XMLHttpRequest()
request.open("post", 'MasterPage.Master.aspx', false);
request.setRequestHeader('Content-Type', 'text/html');
request.send('');



}
else
{
request = new ActiveXObject("Microsoft.XMLHTTP")
}

}
window.setInterval("ResetTimeOut();", 1000);
script


In the Above Code SetInterval Javascript Function will raise for every 1 millisecond i.e ResetTimeOut which will post it to the Masterpage.I am not expecting any return from that.Hence i use Post Method and Synchronous.And it will not refresh the Page or Flickering in the UI part.


Article by srirama
A Good advice from parent to a Child , Master to a Student , Scholar to an Ignorant is like a doctor prescribed pill it is bitter to take but when they take it will do all good for them --- Bhushan

Follow srirama or read 73 articles authored by srirama

Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: