如何根據班級獲取學員下拉框資料（AJAX 範例）

示範前端頁面透過原生 XMLHttpRequest 非同步請求班級資料，並動態產生下拉選單；選擇班級後再請求學員資料填入第二個下拉選單。

前端腳本邏輯

<script type="text/javascript">
window.onload = function () {
    var xhr = new XMLHttpRequest();
    xhr.open("get", "GetData.ashx?type=1", true);
    xhr.setRequestHeader("If-Modified-Since", "0");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var jsonArr = JSON.parse(xhr.responseText);
            loadSel("selClass", jsonArr, "id", "name");
        }
    };
    xhr.send(null);
};
function loadSel(selId, dataArr, valueField, textField) {
    var selObj = document.getElementById(selId);
    selObj.options.length = 0;
    for (var i = 0; i < dataArr.length; i++) {
        var item = dataArr[i];
        var opt = new Option(item[textField], item[valueField]);
        selObj.options.add(opt);
    }
}
// 班級下拉選單 change 事件再請求學員資料（略）
</script>

HTML 結構

<body>
<center id="centerCon">
班級：<select id="selClass"><option>哇哈哈哈</option></select>
學生：<select id="selStu"></select>
</center>
</body>

範例展示傳統 AJAX 非同步載入下拉選單資料的完整流程，包含快取控制、JSON 解析、DOM 動態操作，適合初學者理解前後端資料交互基礎。