unable to make 2nd xmlhttprequest

[Rags]

below code is working only for first ajax request . in my
page i have multiple(3) calls but i am unable to use the xmlhttprequest
again. is there any way i can make it work? for example i have below 2
calls, only for first one is i am good but the second one requests are
not getting. any thoughts?

loadDiv("dataProcessing", "FileDropReceiver.aspx?id=1&fileName=" +
FilePath[row - 1] + "&client=" + clientCodeAndName.replace('&',
'|'));

loadDiv("dataProcessing",
"FileDropReceiverRags.aspx?setSecurity=yes&postMyGroup=" +
postMyGroup + "&postPermission=" + postPermission);

below is my code

var xhr;
var isNotIE = false;

var uploading = false;
function loadAjax(div) {
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e) {
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e2) {
try {
xhr = new XMLHttpRequest();
isNotIE = true;
}
catch (e3) {
xhr = false;
}
}
}
if (!xhr) {
alert("fail!");
}

xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {

var ajaxDisplay = document.getElementById(div);

ajaxDisplay.innerHTML = xhr.responseText;

if (xhr.status == 200) {
xhr.responseText;
}
else {

}
}
};
}
function loadDiv(div, page) {
loadAjax(div);
xhr.open("GET", page, false);
xhr.send(null);
}

let me know how to reuse the xmlhttprequest again and again?

[Brett]

You're overriding your xhr object. Javascript is asynchronous, so even though you are explicitly making a syncrhonous call with the xhr object in the scope of your method "loadDiv", it will execute the next loadDiv (effectively replacing your global xhr object) in the LoadAjax(div) method before the synchronous results of the first call completes.

you should consider a couple things here.
  First is minor, telerik has a 'modernizer'-like helpers at its scope.. so "$telerik.isIE" will hold the boolean value.for determining whether the user-agent is Internet Explorer.

  Second, instead of falling back to legacy methods, in particular: ActiveX; use and implement Polyfillers and shims; that is what they are for. In which case, you wouldn't even need to handle if isIE, isChrome, IsFirefox clauses; the Polyfiller and shim libraries would 'describe' and inject the support and functionality of modern browsers, and features like xhr.

  Third, consider turning 'loadAjax' into a nested function of 'loadDiv' and defining (dimensions) the variable (named xhr) in the loadDiv function scope. At that point, you will not need to pass 'div' (which is really an ID), nor 'xhr' to load Ajax, because it will be in the scope of it's parent function.

function loadDiv(id, uri)
{
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechance = loadAjax;
   xhr.open("GET", uri, false);
   xhr.send(null);
   function loadAjax(e) {
       var el = document.getElementById(id);
             el.innerHTML = xhr.responseText;
   }
}

note: I didn't add the readystate or status checks within the readystatechange for simplicity.. you'll want to have those.



 

[Brett]

function loadDiv(id, uri)
{
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = loadAjax;
   xhr.open("GET", uri, false);
   xhr.send(null);
   function loadAjax(e) {
       var el = document.getElementById(id);
             el.innerHTML = xhr.responseText;
   }
}

Minor edit (onreadystatechange.. I typo'd it above)

[Rags]

Hi Brett,

Thanks for your reply and well explanation. i will look in to your suggestions and will try to implement the logic as you said.

Have a great day...much appreciated .

Regards
Rags