Javascript 了解使用AJAX获取图表数据时的数据流

我正在尝试使用一个名为Chart.JS的JS库创建一个测试自动化结果仪表板。我想显示一个随时间变化的条形图，显示通过和失败的测试总数

为此，我做了以下几件事：

创建了一个dash_proj.html文件，其中包括Chart.js，在这个文件中，我将实际将图形绘制到画布上

创建了一个.php文件，在该文件中，我使用PDO连接查询我机器上的本地数据库副本（目前通过localhost在本地进行测试）

在同一个.php文件中，我以文本形式将结果显示在浏览器上，以确保获取了适当的数据

现在，我对从这里开始的事情的正确流动感到困惑。从我所读到的内容来看，下一步应该是使用JavaScript调用AJAX函数，并告诉它要查看哪个PHP文件名（运行MySQL查询的文件名），这将实时返回数据（无需刷新屏幕）。在HTML文件中，我应该等待JavaScript返回该信息，最后一步是实际绘制图形

jQuery在哪里发挥作用？我可以把我的AJAX调用放在php文件中进行数据库查询吗

---

我正在考虑测试，以确保AJAX调用能够工作，方法是首先将虚拟数据插入数据库，然后检查结果是否通过localhost实时显示在我的PHP文件上。我想下一步是将$query->fetch（）中的所有数据存储到两个不同的数组中（一个用于测试通过，另一个用于测试失败），然后从调用Chart.JS的HTML文件中访问该数组，并将该数据粘贴到绘图条形图函数中？

您不必使用jQuery。这个JavaScript库包含许多函数来简化AJAX调用和访问DOM，尽管浏览器API的融合使得现在不再需要这些函数。尽管如此，它仍然很受欢迎

您的第一个任务可能是在页面加载时启动AJAX操作。您可以从直接将此JavaScript添加到页面开始，尽管您可能希望在逻辑正常工作后将其作为小型资产添加

function ajax() {
    // @todo Add your ajax logic in here
}

// Load the AJAX data into the chart as soon as the DOM is ready
$(document).on('ready', function() {
    ajax();
});

使用返回JSON的

get

操作执行读取操作是很常见的，这可以很好地工作。添加此逻辑以代替上面的

@todo

注释

之后，您可能需要定期刷新数据，比如说每60秒刷新一次。您可以这样做：

setInterval(60 * 1000, ajax);

注意，间隔计时器以毫秒为单位工作，因此需要乘以1000

上述方法的一个缺点是，如果您希望有大量用户，或者希望将间隔减少到一个非常小的值，那么您的web服务器将处理大量冗余请求（因为大多数调用不会导致屏幕更改）。因此，在这里使用AJAX的可伸缩性不是很强

---

更好的方法是配置服务器，使用Web套接字将更新推送到浏览器。但是，这需要一种单独的web服务器，因此我可能暂时不推荐您使用它。

jquery是一个帮助程序库。它只是javascript。JS中没有任何东西是你用“纯”javascript无法完成的。你做得怎么样？