Why my following ajax is not working in Asynchronous mode - asp.net

Question

below is my code that I call on page load.
it works when I use
xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, false);
but if I use
xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, true);
xmlhttp.onreadystatechange is called for only last div. Why it is happening? I need it in Asynchronous mode.
function myfunction() {
try {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var table = document.getElementById('<%=GridView1.ClientID%>');
if (table == null) return;
var divs = table.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var msg = xmlhttp.responseText.split("|");
var table = document.getElementById('<%=GridView1.ClientID%>');
var divs = table.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].id == msg[0]) {
divs[i].innerHTML = msg[1];
divs[i].parentNode.style.backgroundColor = msg[2];
}
}
}
}
xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, false);
xmlhttp.send();
}
} catch (e) {
alert(e);
}
}

Answer 1

You need to create a new xmlhttp object inside your for cycle. Currently you are overwriting everything each time so only the last request actually goes through.
It works in synchronous mode because xmlhttp.open() will block until everything is finished so in the next iteration everything is overwritten but that does not matter anymore.
function myfunction() {
try {
var table = document.getElementById('<%=GridView1.ClientID%>');
if (table == null) return;
var divs = table.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var msg = xmlhttp.responseText.split("|");
var table = document.getElementById('<%=GridView1.ClientID%>');
var divs = table.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
if (divs[i].id == msg[0]) {
divs[i].innerHTML = msg[1];
divs[i].parentNode.style.backgroundColor = msg[2];
}
}
}
}
xmlhttp.open("GET", "../handlers/fetchshift.ashx?id=" + divs[i].id, false);
xmlhttp.send();
}
} catch (e) {
alert(e);
}
}