XMLHttpRequest onprogress Uncaught SyntaxError: Invalid or unexpected token

Question

我有一个有效的 ajax 函数

但是当我使用 onprogress 时，我有时会返回一半 html 并且控制台显示 Uncaught SyntaxError: Invalid or unexpected token 但我仍然继续。

这里是函数

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);

}

***** 我知道如果我将 .onprogress 更改为 xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { $("#"+divID).html(e.currentTarget.responseText) ; } } 我将不会出现控制台错误....但有时，php 中发生的事情需要执行时间很长，想显示进度。

我的 PHP8 配置了没有输出缓冲区的 NGINX，所以如果我这样做 echo 'stuff'; sleep(3); echo '2'; 我看到 'stuff' 然后 3 秒后看到 '2' 出现。

请注意：这里描述的 php 部分不是问题。

问题：有没有办法避免在进行中（在 javascript 侧）出现“返回一半 html”？

Answer 1

我找到了新的 javascript 替换提取。通过一些挖掘，我想出了这个 streamble html

它也适用于网络视图 android 和 IOS ;)

在这个场景中，我有 PHP 8 和输出缓冲区关闭的 NGINX，因此在继续执行的同时推送每个 echo....

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();
            }
          });
    });

}

XMLHttpRequest onprogress Uncaught SyntaxError: Invalid or unexpected token

XMLHttpRequest onprogress Uncaught SyntaxError: Invalid or unexpected token

javascript

ajax

xmlhttprequest

live