javascript不能处理ajax加载的内容；不使用jquery_Javascript_Ajax

javascript不能处理ajax加载的内容；不使用jquery

javascript ajax

javascript不能处理ajax加载的内容；不使用jquery,javascript,ajax,Javascript,Ajax,我正在使用ajax将“mysite/math/”中的所有内容加载到math.php中。在math.php中，我想使用katex呈现加载的数学内容在math.php内部，我从cdn加载库katex，可以在上面的链接中找到 php的html： <body> <div id='main'> </body> 这给了我一个数组x，它包含了每个文件的位置，我想把这些文件的内容加载到我的网页中现在，在javascript中，我对数组x中的URL进行了多个AJAX调

我正在使用ajax将“mysite/math/”中的所有内容加载到math.php中。在math.php中，我想使用katex呈现加载的数学内容

在math.php内部，我从cdn加载库katex，可以在上面的链接中找到

php的html：

<body>
  <div id='main'>
</body>

这给了我一个数组x，它包含了每个文件的位置，我想把这些文件的内容加载到我的网页中

现在，在javascript中，我对数组x中的URL进行了多个AJAX调用：

// defining the ajaxing function
function myfunction(url, someFunction) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      someFunction(this, url);
    }
  };
  xhr.open('GET', url, true);
  xhr.send(null);
}

// defining the callback function
function callbackfunction(xhr, url) {
  var name = url;
  var div = document.createElement('div');
  div.innerHTML = xhr.responseText;
  div.className += name;
  document.getElementById('main').appendChild(div);
}

// here, I'm actually executing the ajax calls
for (var i = 0; i < x.length; i++) {
  myfunction(x[i] + '?w=' + Math.random(), callbackfunction);
}

到目前为止，所有这些都很有效

问题是：

在“mysite/math/”中的每个html文件中，都有class='math'的span标记，其中包含我要呈现的数学内容。因此，在math.php中，我看到了我的所有内容，我看到了带有class='math'的span标记；他们都在那里

在math.php中还有以下javascript，它使用katex函数katex.render

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].innerHTML, math[i]);
}

如果没有使用ajax加载内容，我使用katex的方式就可以很好地工作

注:

这个问题我已经问过好几次了，但答案总是使用jquery。我想要一个javascript解决方案。

问题很可能是当浏览器调用katex.render时，您的AJAX提供的内容还没有出现在页面上

由于要进行多个调用以加载内容，因此需要等到所有调用都返回后才能调用katex.render。使用vanilla JavaScript，我可以想到几种方法：

创建一个事件处理程序，用于侦听要完成的每个调用。完成所有操作后，可以跟踪变量中完成的调用数，调用katex.render。将每个AJAX调用封装在一个promise中，将它们全部放入一个数组中，然后在数组中调用promise.all。在Promise.all.then中，调用katex.render。

这个解决方案并不复杂，但我认为它能解决问题

我通过包含一行applyKatexdiv更改了回调函数

我想到了您列出的第一个选项：创建事件处理程序。我只是想不出一个。你有什么建议吗？至于第二个，我不知道承诺是什么，所以我可能会考虑它。就个人而言，我倾向于两个承诺。如果您正在编写JavaScript，那么了解一般情况是非常有用的。这里有一个很好的解释，说明了如何将原生XHR调用转换为承诺：这里是MDN对承诺的解释。所有内容：我的js技能仍然需要大量工作，因此我将继续研究承诺对象。但是，我确实认为我已经找到了一种方法来获得我想要的结果。我不确定这是否是一种优雅的方式，但我现在将katex.render应用于每个div的子级，因为将div添加到页面中似乎是可行的。

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].innerHTML, math[i]);
}

// defining the callback function
function callbackfunction(xhr, url) {
  var name = url;
  var div = document.createElement('div');
  div.innerHTML = xhr.responseText;
  div.className += name;
  document.getElementById('main').appendChild(div);
  applyKatex(div); //  <---this is what i added
}

function applyKatex(element) {
  var math = element.getElementsByClassName('math');
  for (var i = 0; i < math.length; i++) {
    katex.render(math[i].innerHTML, math[i]);
  }
}