AJAX Problem

I have used ajax function for populating two drop down. the values of second drop down depends on the first one. If the retrieved data is large in number the drop down doesn't get refreshed and the browser doesn't respond for a long time.
I have used InitXMLHttpRequest() object for this purpose.
the script used is as follows,
<!--
var req = null;

function InitXMLHttpRequest() {
// Make a new XMLHttp object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getval(str,cond1,cond2,cond3,cond4,cond5) {
//document.forms[0].txtsearch.value = document.forms[0].sub_group.text+" "+document.forms[0].item_grp.value
InitXMLHttpRequest();
// Load the result from the response page
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById("result").innerHTML = req.responseText;
} else {
document.getElementById("result").innerHTML = "Loading data...";
}
}
req.open("GET", "grid2.php?itemname=" + str +"&itemgrp=" + cond1+"&subgroup=" + cond2+"&category=" + cond3+"&cust_code=" + cond4+"&item_lst=" + cond5, true);
req.send(null);
} else {
document.getElementById("result").innerHTML = 'Browser unable to create XMLHttp Object';
}
}
-->

Please suggest changes, if possible, in above code so that i can reduce the time span required for retrieving the data.