HTML5 Worker通过XMLHttpRequest请求PHP返回值undefined问题求助

1. XMLHttpRequest异步处理逻辑顺序错误 #

XMLHttpRequest是异步请求对象，你当前代码的执行顺序完全颠倒：你在请求刚初始化、还没发送、更没收到响应的时候就提前读取了responseText，这时候值必然为空，自然拿不到msg字段。你需要监听onload事件，等请求成功返回后再处理响应内容。

2. 没有对JSON格式的响应做解析 #

PHP返回的{"msg":29}是JSON字符串，不是JS原生对象，你需要先调用JSON.parse()把字符串转成JS对象之后，才能访问msg属性。

3. POST请求头配置缺失 #

用XHR发送POST请求时，需要手动设置Content-Type请求头为对应格式，否则PHP后端无法正常接收你传过去的Totalaccounts参数。

4. 循环变量更新逻辑缺失 #

你当前的逻辑里没有把请求返回的新值赋值给Totalaccounts，下一轮循环还是用的初始值，不会更新。

修正后的Worker Script代码 #

onmessage = function(dbs) {
  console.log(dbs.data);
  // 如果主脚本传过来的是字符串格式的数字，先转成数值类型
  var Totalaccounts = Number(dbs.data);
  
  var DBScriptLoop = setInterval(function () {
    DBStartWorking(); 
  }, 123000);

  function DBStartWorking(){
    for (var dw = 0; dw < Totalaccounts; dw++) {
      setTimeout(function() {
        const httpRequest = new XMLHttpRequest();
        // 先绑定请求成功的回调
        httpRequest.onload = function() {
          if (httpRequest.status === 200) {
            // 解析JSON字符串为JS对象
            const dataresponse = JSON.parse(httpRequest.responseText);
            const NewCount = dataresponse.msg;
            // 更新循环用的Totalaccounts值
            Totalaccounts = NewCount;
            postMessage(NewCount);
            console.log(NewCount);
          }
        };
        // 再打开请求、设置头、发送数据
        httpRequest.open('POST', 'DostuffV1.php');
        // 走常规$_POST接收的话设置这个头
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        httpRequest.send('Totalaccounts=' + Totalaccounts); 
      }, 1200 * dw);
    }
  }
};

适配说明 #

如果你PHP端是用file_get_contents('php://input')拿原始POST数据，不是用$_POST的话，修改请求配置即可：

httpRequest.setRequestHeader('Content-Type', 'application/json');
httpRequest.send(JSON.stringify(Totalaccounts));

内容的提问来源于stack exchange，提问作者Martin4523