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

Question

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

Answer 1

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...