AJAX not working in IE8

Hello,

The code works fine in Firefox and other modern browsers (even IE7 and IE9) but for some reason IE8 it just doesn't work.

I have used some alerts to try find the problem and as far as I can tell it setups the ajaxRequest / XMLHTTPRequest fine, however when I put an alert in the readyState 1 / 2 / 3 part nothing comes up so it looks like the script, for some reason, isn't sending the request.

This is the code

function switchProduct(id) {
	
	
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	
 try
 {
  var ajaxRequest = new XMLHttpRequest();
 }

 catch(err1)
 {
  //For older browsers (IE6 etc)
  var ieXmlHttpVersions = new Array();
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
  ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";

  var i;
  for (i=0; i < ieXmlHttpVersions.length; i++)
  {
   try
   {
    var ajaxRequest = new ActiveXObject(ieXmlHttpVersions[i]);
    //document.getElementById("Content").innerHTML="<h1>Using " + ieXmlHttpVersions[i] + "</h1>";
	
    break;
   }
   catch (err2)
   {
    
   }
  }
 }

ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var searchResponse = ajaxRequest.responseText;
		
		if(searchResponse != "") {
			splitResponse = searchResponse.split("---");
			
			$('#prod_detail_box').fadeOut('slow', function() {
				document.getElementById("prod_detail_box").style.backgroundImage = "none";
    			document.getElementById("prod_detail_box").innerHTML = '<a href="ecom-prodshow/' + splitResponse[1] + '.html" title="' + splitResponse[2] + ' - ' + splitResponse[0] + '"><img src="media/ecom/prodlg/' + splitResponse[3] + '" alt="' + splitResponse[2] + ' - ' + splitResponse[0] + '"></a><p class="aller">' + splitResponse[2] + '</p><p><a href="ecom-prodshow/' + splitResponse[1] + '.html">Full Specification</a>';
				$("#prod_detail_box").fadeIn('slow');
  			});

			
			
		} 
		
	} else if(ajaxRequest.readyState == 1 ||ajaxRequest.readyState == 2 || ajaxRequest.readyState == 3) {
		document.getElementById("prod_detail_box").style.backgroundImage = "url(media/loading.gif)";
	}
}

var url = "grab_prod.php";
var params = "prodid=" + id;
ajaxRequest.abort();
ajaxRequest.open("POST",url,true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.send(params);

}

Code (markup):

Any ideas?

Thanks!

 

Have a look at this :

var xmlhttp;
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
				
if(browser == "Microsoft Internet Explorer" && version >= 4)
{
add_click_ie();
} else {
 add_click();
}
function add_click_ie()
{
var url="";
xdr = new XDomainRequest();
                
xdr.open("GET", url);
try{
xdr.send();
}catch (e){
alert(e);
}
}
            
function add_click()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
			
function stateChanged()
{
if (xmlhttp.readyState==4)
{
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

HTML:

Had problem way back with IE and this coded solved them all.