基于JavaScript AJAX加载XML货运数据并按姓名升序展示

没问题，我来帮你搞定这个需求——通过JavaScript AJAX读取XML里的货运数据，在页面加载时按name字段升序排序，最后用表格展示出来。下面是完整的三个文件实现，我重点补充了排序功能：

这是页面结构，我们只需要一个容器来承载生成的表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shipment Details</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Sorted Shipment Details</h1>
    <div id="shipmentTableContainer"></div>
    <script src="script.js"></script>
</body>
</html>

这里是核心逻辑：AJAX读取XML数据，补充排序功能，然后渲染表格。我已经把排序逻辑加在了数据处理的关键环节：

window.onload = function() {
    // 创建AJAX请求实例
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'ShipmentDetails.xml', true);
    
    xhr.onload = function() {
        if (this.status === 200) {
            const xmlDoc = this.responseXML;
            // 获取所有shipment节点
            const shipments = xmlDoc.getElementsByTagName('shipment');
            
            // 把XML节点转换成数组，方便使用数组排序方法
            const shipmentArray = Array.from(shipments);
            
            // 核心排序逻辑：按name字段升序排序（大小写不敏感）
            shipmentArray.sort((a, b) => {
                const nameA = a.getElementsByTagName('name')[0].textContent.trim().toLowerCase();
                const nameB = b.getElementsByTagName('name')[0].textContent.trim().toLowerCase();
                if (nameA < nameB) return -1;
                if (nameA > nameB) return 1;
                return 0;
            });
            
            // 拼接表格HTML内容
            let tableHtml = '<table><tr><th>Name</th><th>Tracking Number</th><th>Origin</th><th>Destination</th><th>Status</th></tr>';
            
            shipmentArray.forEach(shipment => {
                const name = shipment.getElementsByTagName('name')[0].textContent;
                const trackingNum = shipment.getElementsByTagName('trackingNumber')[0].textContent;
                const origin = shipment.getElementsByTagName('origin')[0].textContent;
                const destination = shipment.getElementsByTagName('destination')[0].textContent;
                const status = shipment.getElementsByTagName('status')[0].textContent;
                
                tableHtml += `<tr><td>${name}</td><td>${trackingNum}</td><td>${origin}</td><td>${destination}</td><td>${status}</td></tr>`;
            });
            
            tableHtml += '</table>';
            // 将表格插入页面容器
            document.getElementById('shipmentTableContainer').innerHTML = tableHtml;
        } else {
            document.getElementById('shipmentTableContainer').innerHTML = 'Failed to load shipment data.';
        }
    };
    
    xhr.onerror = function() {
        document.getElementById('shipmentTableContainer').innerHTML = 'Error occurred while loading data.';
    };
    
    xhr.send();
};

这里的排序做了大小写不敏感处理，避免因为大小写差异导致排序混乱，比如"Apple"和"banana"能正确按字母顺序排列。

这是示例XML数据结构，你可以根据实际业务需求修改内容：

<?xml version="1.0" encoding="UTF-8"?>
<shipments>
    <shipment>
        <name>Global Logistics Inc.</name>
        <trackingNumber>TRK-7890</trackingNumber>
        <origin>Los Angeles</origin>
        <destination>Tokyo</destination>
        <status>In Transit</status>
    </shipment>
    <shipment>
        <name>Express Delivery Co.</name>
        <trackingNumber>TRK-1234</trackingNumber>
        <origin>New York</origin>
        <destination>London</destination>
        <status>Delivered</status>
    </shipment>
    <shipment>
        <name>Ocean Freight Ltd.</name>
        <trackingNumber>TRK-5678</trackingNumber>
        <origin>Shanghai</origin>
        <destination>Sydney</destination>
        <status>Processing</status>
    </shipment>
</shipments>

使用小提示 #

• 把三个文件放在同一个目录下
• 用本地服务器打开index.html（比如VS Code的Live Server插件），直接打开本地文件可能会触发AJAX跨域限制
• 页面加载完成后，表格会自动展示按name升序排序后的货运数据

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