进度条显示加载百分比在ajax，php

Hi i am using ajax for loading database content .I want to display the total percentage of loading or image.

This is my Script

function name1(str)
{
if (str.length==0)
 {
  document.getElementById("txtHint").innerHTML="";
   return;
 }
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   }
 }
 xmlhttp.open("GET","user.php?q="+str,true);
xmlhttp.send();
}

user.php?q=ram , which is passing a value .And fetch the data from database How to modify ajax to to display the loading image

there is no easyway to do this, as you can not know the real size of the response by javascript.

What you can do is: - make a first request to php, and have it send only the total bytes size of the image - then, inside your function name1(), you have to give the xmlhttp object a onprogress callback, HTML5 handles this:

var totalsize = //get it from a initial post request

xmlhttp.onprogress = function(response){
   var percentage = response.responseText.length / totalsize * 100;
   //update the progress bar, with that value...
};

then your onreadystatechange, handles the final chunk of data...