简单易懂：Ajax入门实例详解（登录功能）

// 假设我们有一个登录表单和一个用于显示错误信息的div
<form id="loginForm">
    <input type="text" id="username" placeholder="用户名">
    <input type="password" id="password" placeholder="密码">
    <button type="submit">登录</button>
</form>
<div id="errorMessage"></div>
 
// JavaScript代码
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
 
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login', true); // 假设服务器端登录接口是 /login
 
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 登录成功，处理响应数据
            var response = JSON.parse(xhr.responseText);
            if (response.success) {
                // 登录成功后的操作，比如页面跳转
                window.location.href = '/home';
            } else {
                // 显示错误信息
                document.getElementById('errorMessage').innerText = response.message;
            }
        }
    };
 
    xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});

这段代码展示了如何使用Ajax实现登录功能。当用户提交表单时，我们阻止了表单的默认提交行为，并使用Ajax异步向服务器发送登录请求。服务器响应后，我们根据响应结果显示相应的错误信息或进行页面跳转。这是现代Web开发中一个非常常见的模式。