当ajax正在进行时，ajax显示加载图像

Question

I have ajax code where I am getting the products name from a store. Its working absolutely fine. But I want that when the ajax process is in continue it should show the loading image. My ajax code is like this My onClick button is like this.

<input type="button"  onclick="getProdList(this.value,this.id)">

My getProdList function is like this

function getProdList(id,langid) {
  var xmlHttp=initXMLHTTPRequest();
  //console.log(xmlHttp);
  var str = "value="+id+"&langid="+langid;
  var span="";

  var url = "../php/searchDetails.php?";
    document.getElementById('imgDiv').style.display = 'block';
  xmlHttp.onreadystatechange=function() {
  if(xmlHttp.readyState==4 ) {
    document.getElementById('imgDiv').style.display = 'none';
    span=span+"<ul style='padding-bottom:20px;'><li><b>"+id+"</b></li>";
    var xmldata=xmlHttp.responseXML;
    var xmlObj = xmldata.getElementsByTagName("ProductDetails")[0];
    var menusize=xmlObj.childNodes[0].childNodes[0].childNodes[0].nodeValue;
    var xmlObjlength = xmlObj.childNodes.length;
    for(var i=1;i<xmlObjlength;i++) {
      var ProductName=xmlObj.childNodes[i].childNodes[0].childNodes[0].nodeValue;
      var productId=xmlObj.childNodes[i].childNodes[1].childNodes[0].nodeValue;
      span=span+"<li  style='line-height:20px;display:block;height:20px;list-style:none;border-bottom:1px solid #666666;'><a href='product.php?id_product="+productId+"'><div>"+ProductName+"</div></a></li>"
    }
    if(xmlObjlength==1) {
      document.getElementById("products").innerHTML="";
      document.getElementById("products").innerHTML="Sorry No Products Under this Alphabet";
    }
    else {
      document.getElementById("products").innerHTML="";
      span=span+"</ul>";
      document.getElementById("products").innerHTML=span;
    }
  }
  };
  xmlHttp.open("POST",url,true); 
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", str.length);
  xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send(str);
}

Any help and suggestions will be really appreciable. Thanks

Answer 1

function getProdList(id,langid) {
  var xmlHttp=initXMLHTTPRequest();
  //console.log(xmlHttp);
  var str = "value="+id+"&langid="+langid;
  var span="";
  var url = "../php/searchDetails.php?";

  document.getElementById('imgDiv').style.display = 'block';

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

    document.getElementById('imgDiv').style.display = 'none';

    span=span+"<ul style='padding-bottom:20px;'><li><b>"+id+"</b></li>";
    var xmldata=xmlHttp.responseXML;
    var xmlObj = xmldata.getElementsByTagName("ProductDetails")[0];
    var menusize=xmlObj.childNodes[0].childNodes[0].childNodes[0].nodeValue;
    var xmlObjlength = xmlObj.childNodes.length;
    for(var i=1;i<xmlObjlength;i++) {
      var ProductName=xmlObj.childNodes[i].childNodes[0].childNodes[0].nodeValue;
      var productId=xmlObj.childNodes[i].childNodes[1].childNodes[0].nodeValue;
      span=span+"<li  style='line-height:20px;display:block;height:20px;list-style:none;border-bottom:1px solid #666666;'><a href='product.php?id_product="+productId+"'><div>"+ProductName+"</div></a></li>"
    }
    if(xmlObjlength==1) {
      document.getElementById("products").innerHTML="";
      document.getElementById("products").innerHTML="Sorry No Products Under this Alphabet";
    }
    else {
      document.getElementById("products").innerHTML="";
      span=span+"</ul>";
      document.getElementById("products").innerHTML=span;
    }
  }
  };
  xmlHttp.open("POST",url,true); 
  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlHttp.setRequestHeader("Content-length", str.length);
  xmlHttp.setRequestHeader("Connection", "close");
  xmlHttp.send(str);
}