Through for launch the function with ajax request via post. The function sends data to the server and after processing it should output the value " processed n from m " in the counter.

The data is displayed only after the end of the cycle and only the last result shows me. If you look at the console, then everything goes in a cycle.

How to update the counter after each ajax request?

  function createObject() { var request_type; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer") { request_type = new ActiveXObject("Microsoft.XMLHTTP"); } else { request_type = new XMLHttpRequest(); } return request_type; } var http = createObject(); for(var i=0; i < countEl; i++) { run(data[i], i, countEl); } function run(data, i, countEl) { http.open('post', '/modules/index.php?load', false); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http.send("data="+data+"&counter="+i); if(http.readyState == 4 && http.status == 200) { counter(i, countEl); } } function counter(i, m) { var n = i + 1; console.log('Загружено '+n+' из '+m); document.getElementById("counter").innerHTML = 'Загружено '+n+' из '+m; }
  • what is the http object? - Grundy
  • function createObject () {var request_type; var browser = navigator.appName; if (browser == "Microsoft Internet Explorer") {request_type = new ActiveXObject ("Microsoft.XMLHTTP"); } else {request_type = new XMLHttpRequest (); } return request_type; } var http = createObject (); - ANTiK
  • add this to the question - Grundy
  • So here agazhkom and does not smell - Mr. Black
  • then please tell me what it smells like and which way to dig - ANTiK

1 answer 1

enter image description here

 <span id='download'>Загружено 0 из 10</span> 
 count = 0; for(i=0; i<10; i++) { send('do='); } function send(s) { request(new XMLHttpRequest()); function request(xhr) { xhr.open('POST', 'a.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(s); xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) { count++; document.querySelector('#download').innerHTML = 'Загружено ' + count + ' из 10'; } } } } } 
 if(isset($_POST['do'])) { sleep(rand(1, 5)); echo 'ok'; }

At the synchronous request inner does not manage to work, setTimeout comes to the rescue

 max = 10; send('do=', 0); function send(s, i) { xhr = new XMLHttpRequest(); xhr.open('POST', 'a.php', false); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(s); if(xhr.status == 200) { document.querySelector('#download').innerHTML = 'Загружено ' + i + ' из ' + max; if(i < max) { i++; setTimeout(function() { send('do=', i); }, 0); } } }
  • Asynchronous requests. The code even works on IE8, I checked :) It only remains to change requests for - Mr. Black
  • gif! why not snippet? :-D - Grundy
  • @Grundy, but there is a jerky hyphule there) - Mr. Black
  • the fact is: xhr.open ('POST', 'a.php', true); - when I set true the server to which the data is sent processes only the first request and that's all - ANTiK
  • @ANTiK, is there a launch of a python chtoli or some kind of arduino? - Mr. Black