第3讲：使用ajax技术实现异步登录功能（XMLHttpRequest）

// 假设已有的函数，用于验证用户名和密码是否正确
function authenticate(username, password) {
    // 这里应该是对用户名和密码的验证逻辑
    // 为了示例，我们简单处理，直接返回布尔值
    return username === 'user' && password === 'pass';
}
 
// 登录函数
function login() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
 
    // 验证用户名和密码
    var isAuthenticated = authenticate(username, password);
 
    if (isAuthenticated) {
        alert('登录成功！');
        // 登录成功后的操作，例如跳转页面或更新UI
    } else {
        alert('登录失败，用户名或密码错误！');
    }
}
 
// 初始化XMLHttpRequest对象
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // 支持withCredentials的浏览器
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest !== "undefined") {
        // 旧版IE
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // 不支持CORS的浏览器
        xhr = null;
    }
    return xhr;
}
 
// 使用CORS发送请求
function makeCorsRequest() {
    var request = createCORSRequest('GET', 'http://localhost:8080/login');
 
    if (request) {
        request.onload = function() {
            // 请求成功
            var responseText = request.responseText;
            console.log(responseText);
        };
 
        // 发送请求
        request.send();
    }
}

这个示例代码展示了如何使用XMLHttpRequest对象发送CORS请求，以及如何处理请求成功和失败的情况。注意，由于CORS是一个复杂的安全特性，它需要服务器端配置以允许跨域请求，并且在实际应用中，你还需要处理更多的安全问题，例如使用HTTPS来保证数据传输的安全性。