Ajax案例：异步加载商品分类信息

好的，下面是一个简单的 Ajax 异步加载商品分类信息的案例：

1. HTML 页面中设置一个 select 元素，用于显示商品分类信息：

<select id="category">
    <option value="">请选择商品分类</option>
</select>

2. 编写 JavaScript 代码，通过 Ajax 获取商品分类信息，并将其添加到 select 元素中：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求地址和请求方法
xhr.open('GET', 'http://localhost/getCategory', true);

// 发送 Ajax 请求
xhr.send();

// 监听 Ajax 请求状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器返回的 JSON 数据
        var data = JSON.parse(xhr.responseText);

        // 获取 select 元素
        var categorySelect = document.getElementById('category');

        // 遍历商品分类信息，并添加到 select 元素中
        for (var i = 0; i < data.length; i++) {
            var option = document.createElement('option');
            option.value = data[i].id;
            option.text = data[i].name;
            categorySelect.appendChild(option);
        }
    }
};

3. 在服务器端处理 Ajax 请求，返回商品分类信息的 JSON 数据：

<?php
// 获取商品分类信息
$categories = get_categories();

// 将商品分类信息转换成 JSON 格式
$json = json_encode($categories);

// 设置响应头，告诉浏览器返回的是 JSON 数据
header('Content-Type: application/json');

// 返回 JSON 数据
echo $json;
?>

注意：上面的代码仅为示例，请根据实际情况进行修改。