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..
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.
Follow