ajax 显示 ajax 正在处理时加载映像

我有ajax代码，我从商店获取产品名称。它的工作绝对没问题。但是我希望当ajax进程继续时，它应该显示加载图像。我的 ajax 代码是这样的我的点击按钮是这样的。

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

我的 getProdList 函数是这样的

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);
}

任何帮助和建议都将非常可观。谢谢