在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种技术，它允许我们在不刷新整个页面的情况下，从服务器获取数据并更新部分网页内容。本文将详细介绍如何使用AJAX从后台获取数据并在HTML前端进行显示。
让我们了解AJAX的基本工作原理。AJAX通过JavaScript创建XMLHttpRequest对象，这个对象负责与服务器进行通信。当用户触发一个事件（如点击按钮），JavaScript会发起一个异步请求到服务器，请求可以是GET或POST方式。服务器接收到请求后处理数据，然后将结果以特定格式（如JSON、XML或纯文本）返回给客户端。JavaScript在前端解析这些数据，并将其动态插入到HTML元素中，从而实现页面内容的局部更新。
在提供的示例中，我们看到一个简单的AJAX实现过程。HTML页面包含一个`<div>`元素，其ID为"test"，这就是我们将在后台获取数据后显示内容的地方：
```html
<div id="test"></div>
```
接下来是AJAX的JavaScript代码，这里使用了jQuery库来简化操作：
```javascript
$(document).ready(function() {
$.ajax({
url: "admin/get_online_ganbu.php",
dataType: "json",
type: "post",
async: false,
success: function(data) {
var html = "";
for (var i = 0; i < data.length; i++) {
var ls = data[i];
html += "<span>测试：" + ls.name + "</span>";
}
$("#test").html(html);
},
});
});
```
这段代码在文档加载完成时执行，通过$.ajax方法向服务器发起POST请求。请求的目标URL是"admin/get_online_ganbu.php"，预期的响应类型是JSON。当请求成功时，`success`回调函数会被调用，参数`data`包含了服务器返回的数据。在本例中，我们遍历这个数据数组，并为每个元素创建一个新的`<span>`标签，然后将生成的HTML字符串插入到ID为"test"的`<div>`元素中。
服务器端的PHP代码如下：
```php
<?php
include "conn.php";
$result = mysql_query("SELECT * FROM online WHERE class = 1");
$dataarr = array();
while ($row = mysql_fetch_array($result)) {
array_push($dataarr, $row);
}
mysql_close($con);
echo json_encode($dataarr);
?>
```
这里，PHP连接到数据库（使用`conn.php`文件中的连接信息），执行SQL查询以获取在线甘部（ganbu）的信息。查询结果被存储到一个数组中，然后使用`json_encode`函数将数组转换成JSON格式并发送回客户端。
总结起来，这个示例展示了如何使用AJAX和PHP实现从后台获取数据并在HTML前端显示。需要注意的是，虽然这个例子使用了旧版的MySQL API（`mysql_*`系列函数），但在实际开发中，建议使用更安全和现代的MySQLi或PDO。此外，异步请求的`async`设置为`false`意味着这是一个同步请求，这可能会影响用户体验，通常应保持异步模式以保持页面的响应性。
