progressbar con conteggio record da una chiamata Ajax

[ans66]

Tramite una chiamata Ajax ad una classe php avviene la storicizzazione dei record (al primo gennaio del nuovo anno) come mostro di seguito. Avrei bisogno di creare una progressbar con conteggio dei record storicizzati

function Storicizza() {

DatiDB(); // dove ci sono server, password e user

sql="SELECT * FROM (entusc) WHERE EXTRACT(YEAR FROM entusc.Data)= '"+currentYear+"'";

var funzione="NrOfDateReq";
var xURL = "characteristicsInsert.php?funzione="+funzione+"&sql="+sql+"&server="+server+"&user="+user+"&passw="+passw;

GetData("Date", xURL, "");
	
return

} 

function StoricizzaRecord() {
DatiDB();
annoprec=parseInt(currentYear)-1;
annoprecStr=annoprec.toString();
ini_set('max_execution_time', 300); //300 seconds = 5 minutes

sql="SELECT * FROM (entusc) WHERE EXTRACT(YEAR FROM entusc.Data)= '"+annoprecStr+"'";

var funzione="Storicizza";
var xURL = "characteristicsInsert.php?funzione="+funzione+"&sql="+sql+"&server="+server+"&user="+user+"&passw="+passw;

GetData("Stor", xURL, "");
	
return

}

function GetData(form_tag, xURL, mes)
	{
		  mes = mes || "";
      
			var xmlhttp=false;
      
      
			if (!xmlhttp && typeof XMLHttpRequest!='undefined')
			{
				try { xmlhttp = new XMLHttpRequest(); }
				catch (e) { xmlhttp = false; }
			}
			if (!xmlhttp && window.createRequest)
			{
				try { xmlhttp = window.createRequest(); }
				catch (e) { xmlhttp = false; }
			}

			xmlhttp.onreadystatechange=function()
			{
				if (xmlhttp.readyState===4 && xmlhttp.status===200)
				{
          data = xmlhttp.responseText;
          SetValues(form_tag, data, mes);
				}
			}
			xmlhttp.open("GET", xURL, true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send(null);
		
		return
	}

di seguito la Select Class con la funzione Storicizza:

<?php 

class SelectList
{
public function NrOfDateReq ($sql, $server, $user , $passw) {
  
  $res = $this->connDatabase($sql, $server, $user , $passw);
  
  $numRows=mysql_num_rows ($res);
  
  return $numRows;
  
  }
  
  public function Storicizza ($sql, $server, $user , $passw) {
  
  $array = array();
  $res = $this->connDatabase($sql, $server, $user , $passw, false);
    
     while($row = mysql_fetch_array($res))
        {
         $array[] = $row;
        }
   $risp= $this->DelIns($array, $server, $user , $passw);    // bidimensionale
   return $risp;
  }
  
  function DelIns($array, $server, $user , $passw)
  {
     
   for ($x = 0; $x <count($array); $x++) {
   
   if (strpos ($array[$x][3],"'")==false ) {$cat=$array[$x][3];} else {$cat=str_replace("'","''",$array[$x][3]);}
   if (strpos ($array[$x][4],"'")==false ) {$sog=$array[$x][4];} else {$sog=str_replace("'","''",$array[$x][4]);}
   if (strpos ($array[$x][5],"'")==false ) {$doveAc=$array[$x][5];} 
  else{$doveAc=str_replace("'","''",$array[$x][5]);}
   
   $sql = "DELETE FROM entusc  WHERE IdEntUsc=".$array[$x][0]; 
   $res = $this->connDatabase($sql, $server, $user , $passw); // cancello da entusc
   $sql2="INSERT INTO entusc_stor (Data, Valore, Categoria, Soggetto, DoveAcquistato) ";
   $sql2.="VALUES ('".$array[$x][1]."',".$array[$x][2].",'".$cat."','".$sog."','".$doveAc."')"; 
   $res2 = $this->connDatabase($sql2, $server, $user , $passw); // inserisco in entusc_stor
   
   }
   
   return count($array);
  }
 
  function connDatabase($query,$server, $user , $passw, $opt=true)
  {

    $link = mysql_connect($server, $user, $passw);
    if (!$link)
      die('connessione a Mysql non riuscita!: ' . mysql_error());
    else 
    {
      $db_selected =mysql_select_db("gestentusc",$link);	//connessione a database
      if (!$db_selected)
        die('connessione al database non riuscita!: ' . mysql_error());
      else
      { 
        $result = mysql_query($query,$link) or die(mysql_error()." ".$query);	
        return $result;

      }
    } 
  }

}

Grazie per l'aiuto.

 

[ans66]

Dopo tanto tempo ho trovato ed elaborato una soluzione che mi aggrada (anche se non c'è un vero e proprio conteggio dei record perchè e.lengthComputable=false ma solo un log dei byte caricati e un tag progress che simula avanzamento):

jQuery(document).ready(function($){

var valore=10;

$('body').append( '<div id="myDialog"><label for="file">Avanzamento %:&emsp;&emsp;&emsp;&emsp;</label><progress id="barra" value="'+valore+'" max="100"></progress><br><br><textarea id="areatxt" style="overflow:auto;resize:none" draggable="false"  cols="50" readonly class="event-log"></textarea></div>');

myDlg= $("#myDialog").dialog({
        height: 250,
        width:500,
        modal: true,
        closeOnEscape: false,
        draggable: false,
        resizable: false,
        autoOpen:false,
        position: {
                    my: "center",
                    at: "center",
                    of: $("body"),
                    within: $("body")
                        } ,
        open: function(event, ui) {  $(".ui-dialog-titlebar-close").hide(); },
        close: function (event, ui) {
            $(this).dialog('close');
        }
    }).prev(".ui-dialog-titlebar").css("background","#D0D0D0");



loadXMLTesti();

function loadXMLTesti(xURL)
    {
   
    var funzione='entusStor';
    var user=user;
    var passw=pssw;
    var server="localhost";
    // due file php dove sono contenute select
    var xURL = "characteristics.php?funzione="+funzione+"&server="+server+"&user="+user+"&passw="+passw;
    var tagform="selstor";
    GetData2(tagform, xURL);
    return
    }


function GetData2(form_tag, xURL, mes)
{
const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');
const xhr = new XMLHttpRequest();

mes = mes || "";


function handleEvent(e) {
   
    // loop caricamento record - apro dialog solo una volta
    if (valore==10) {$("#myDialog").dialog("open");}
    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
    valore=valore+10;
   
   
    $("#barra").val(valore);
   
    if (xhr.readyState===4 && xhr.status===200)  {
    $("#myDialog").dialog( "option" , "title" ,"Operazione completata!");
    $("#barra").val(100);  
    var text = $("#areatxt").val();  
    var lines = text.split(/\r|\r\n|\n/);
    var count = lines.length;
    $('#areatxt').attr('rows', count-1);
    data = xhr.responseText;
   
    // per popup Soggetti
          if (form_tag=="sog") return data;
    // Lancia SetVaues
          SetValues(form_tag, data, mes);
         
    setTimeout(function(){ $("#myDialog").dialog("close"); }, 5000);  
    return
   
    }
       
}

function addListeners(xhr) {
    xhr.addEventListener('loadstart', handleEvent);
    xhr.addEventListener('load', handleEvent);
    xhr.addEventListener('loadend', handleEvent);
    xhr.addEventListener('progress', handleEvent);
    xhr.addEventListener('error', handleEvent);
    xhr.addEventListener('abort', handleEvent);
   
}



function runXHR(url) {
    log.textContent = '';

    //const xhr = new XMLHttpRequest();
    addListeners(xhr);
    xhr.open("GET", url);
    xhr.send();
    return xhr;
}


runXHR(xURL);

}


           
function SetValues(form_tag, data, mes)
    {
      mes = mes || "";  


}


});