XMLHttpRequest onprogress Uncaught SyntaxError: Invalid or unexpected token

Question

I have a working ajax function

but when I use onprogress I sometimes get half returned html and the console says Uncaught SyntaxError: Invalid or unexpected token but i continues anyway.

here the function

function xhrAJAX ( divID , param2 ) {

    var pcache = (Math.floor(Math.random() * 100000000) + 1);
    var params = "divID="+encodeURIComponent(divID)+"&param2="+encodeURIComponent(param2);
    var xhr = new XMLHttpRequest(); xhr.open("POST", "/file.php?pcache="+pcache, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onprogress = function(e) { $("#"+divID).html(e.currentTarget.responseText) ; }
    xhr.send(params);

}

***** I know that If I change the .onprogress with xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { $("#"+divID).html(e.currentTarget.responseText) ; } } I won't have the console error.... but sometimes, what happens in the php takes long time to execute and want to show the progress.

My PHP8 is configured with NGINX with no output buffer so if I do echo 'stuff'; sleep(3); echo '2'; I see 'stuff' then after 3 seconds see '2' appear.

PLEASE : note that the php portion described here is not the question.

THE QUESTION : is there a way to avoid "half returned html" on the onprogress (in the javascript side) ?

Answer 1

I found the new javascript replacement fetch. with some digging I came up with this streamble html

It also works from within webviews android and IOS ;)

in this scenarion, I have PHP 8 and NGINX with output buffer off, so each echo is pushed while continuing the execution....

function fetchsrteam ( divid , sub , buttonid ) {
    
    var pcache = (Math.floor(Math.random() * 100000000) + 1); 
    var postix = [];
    postix["preventCache"] = pcache;
    postix["divid"] = encodeURIComponent(divid);
    postix["buttonid"] = encodeURIComponent(buttonid);
        
    fetch("/.........php?pcache="+pcache, {
      method: "POST",
      body: JSON.stringify(Object.assign({}, postix)),
      headers: {"Content-type": "application/json; charset=UTF-8"}
    }).then(response => response.body)
      .then(rb => {
        const reader = rb.getReader();
          return new ReadableStream({
            start(controller) {
              function push() {
                reader.read().then( ({done, value}) => {
                  if (done) {
                    console.log('done', done); controller.close(); return;
                  }
                  controller.enqueue(value); $("#"+divid).append(new TextDecoder().decode(value)); push();
                })
              }
            push();
            }
          });
    });

}