本示例介绍如何使用AJAX实现异步用户名可用性检查功能，该功能可以在用户输入时实时验证用户名的有效性，而无需刷新整个页面。

原生JavaScript实现 (写法一)

以下代码展示了如何使用原生JavaScript的 `XMLHttpRequest` 对象来执行AJAX请求。

function checkUsernameAvailability(field) {
    if (field.value.length > 0) {
        var xhr;
        // 兼容不同浏览器创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        console.log("XMLHttpRequest object created:", xhr);

        // 构建请求URL，包含用户名和时间戳以防止缓存
        var requestUrl = "validateUsername.jsp?username=" + encodeURIComponent(field.value.trim()) + "&t=" + new Date().getTime();

        // 设置请求方法为GET，请求URL，并设置为异步
        xhr.open("GET", requestUrl, true);

        // 异步请求完成时的回调函数
        xhr.onreadystatechange = function() {
            handleResponse(xhr);
        };

        // 发送请求
        xhr.send(null);
    } else {
        // 如果输入为空，则清空提示信息
        document.getElementById("usernameFeedback").innerHTML = "";
    }
}

function handleResponse(xhr) {
    console.log("readyState:", xhr.readyState);
    // 请求已完成，响应已准备好
    if (xhr.readyState === 4) {
        // HTTP状态码为200，表示成功
        if (xhr.status === 200) {
            var responseText = xhr.responseText.trim();
            if (responseText === "OK") {
                // 用户名可用
                document.getElementById("usernameStatusIcon").className = "icon ticker";
                document.getElementById("usernameFeedback").innerHTML = "";
            } else {
                // 用户名不可用
                document.getElementById("usernameStatusIcon").className = ""; // 清除可能存在的类名
                document.getElementById("usernameFeedback").innerHTML = "<font color='red' style='font-size:15px; line-height: 3; vertical-align:middle'>" + responseText + "</font>";
            }
        } else {
            // 请求失败
            alert("请求失败，服务器返回状态码: " + xhr.status);
        }
    }
}

// 辅助函数，用于去除字符串两端的空白
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}
    

jQuery实现 (写法二)

以下代码展示了如何使用jQuery简化AJAX请求的编写。

$(document).ready(function() {
    $("#checkUsernameButton").on("click", function() {
        var usernameInput = $("#usernameField").val();

        if (usernameInput === "") {
            console.log("Username input is empty.");
            alert("请输入要检查的用户名！");
        } else {
            // 使用$.ajax发送异步请求
            $.ajax({
                url: "checkUsername?query=" + encodeURIComponent(usernameInput), // 假设后端接口为checkUsername
                method: "GET", // or "POST"
                dataType: "text", // or "json", "html" etc.
                success: function(response) {
                    console.log("Server response:", response);
                    // 根据服务器返回的结果更新UI
                    if (response === "available") {
                        $("#usernameStatusIcon").removeClass().addClass("icon available");
                        $("#usernameFeedback").text("");
                    } else if (response === "taken") {
                        $("#usernameStatusIcon").removeClass().addClass("icon unavailable");
                        $("#usernameFeedback").html("用户名已被占用。");
                    } else {
                        // 处理其他可能的响应
                        $("#usernameStatusIcon").removeClass();
                        $("#usernameFeedback").html("未知响应: " + response + "");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("AJAX request failed:", textStatus, errorThrown);
                    alert("请求服务器时发生错误: " + textStatus);
                }
            });
        }
    });
});
    

异步AJAX的优势

使用异步AJAX进行实时检查的主要好处包括：

• 无页面刷新：用户体验更流畅，避免了因页面重新加载而中断用户操作。
• 事件驱动：可以在用户输入、失去焦点等多种事件触发时自动进行检查，无需用户显式点击按钮或提交表单。
• 实时反馈：能够即时告知用户输入内容的有效性，如用户名是否可用、密码强度等。
• 减少服务器负担：通过异步请求，可以在后台处理数据，避免阻塞主线程，提高应用程序的响应速度。