Question

I am using Ajax in my application. It is working fine in all the browsers, but not in any of the IE versions. Here is the code that I have written, please have a look and tell me where I am wrong. Here’s the code:

<script type="text/javascript">
  function loadXMLDoc(str) {
    document.getElementById('spinner').style.display = "block";

    if (str == "") {
      document.getElementById("pickZone").innerHTML = "";
      document.getElementById('spinner').style.display = "none";
      return;
    }



    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
          xmlhttp = false;
        }
      }
    }



    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById('spinner').style.display = "none";
        document.getElementById("pickZone").innerHTML = xmlhttp.responseText;
      }
    }

    xmlhttp.open("GET", "getPickZone.jsp?q=" + str, true);
    xmlhttp.send();
  }
</script>

Answer 1

If you’re not opposed to using jQuery you could just use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function loadXMLDoc(str) {
  $('#spinner').css({display:"block"});
  $('#pickZone').html('');
  if (str != '') {
    $.ajax({
      type: "GET",
      url: "getPickZone.jsp",
      data: {q:str},
      success: function(xml) {
        $('#spinner').css({display:"none"});
        $('#pickZone').html(xml);
      }
    });
  }
}
</script>

It might clean things up a bit and solve your cross-compatibility issues.