纯javascript 实现 Ajax 验证用户名是否被占用

最新推荐文章于 2021-04-15 14:55:40 发布

原创最新推荐文章于 2021-04-15 14:55:40 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ajax #xmlhttprequest #callback #function

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用AJAX实现的实时用户名验证系统。该系统通过JavaScript发起异步请求，检查用户名是否已被注册，并根据服务器响应更新页面提示信息。文章详细展示了如何创建XMLHttpRequest对象并设置其属性，以及如何处理服务器返回的数据。

var xmlHttpRequest;
function createXMLHttpRequest() {
    var xmlHttp;
    if (window.ActiveXobject) {
        xmlHttp = new ActiveXobject("MSXML2.XMLHTTP.3.0");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

function validateUserName() {
    var username = document.getElementById("tbUserName").value;
    var data = "username=" + escape(username);

    xmlHttpRequest = createXMLHttpRequest();
    xmlHttpRequest.onreadystatechange = callback;

    xmlHttpRequest.open("Post", "AjaxPages/CheckUserIsRegister.aspx?num=" + Math.random(), true);

    //使用post时需
    xmlHttpRequest.setRequestHeader("Content-Length", urlData.length);
    xmlHttpRequest.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");

    xmlHttpRequest.send(data);
}

function callback() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var result = xmlHttpRequest.responseText;
            if (result == "0") {
                document.getElementById("spCheck").innerHTML = "恭喜你，该用户名可以注册";
            }
            else if (result == "1") {
                document.getElementById("spCheck").innerHTML = "对不起，该用户名已使用";
            }
            else {
                document.getElementById("spCheck").innerHTML = result;
            }
        }
    }
}