2022.3.15学习日记

今天在进行JavaScript-Ajax对网页实时监测时，学习到了XMLHttpRequest类

首先上案例

注册界面

注册功能除了将数据接受用servlet储存进数据库外，还应当对使用者进行约束和要求。

如果只是简单的将一整篇满满的表格填满后，点击提交，用户数据的完整性和安全性就无法得到保障。比如说账号不能重复，密码必须有字母和数字，密码和确认密码必须相同，电话号码为11位数字等等。

所以JavaScript就是最好的“监视哨兵”。

其中最简单的就是每个标签下输入格式的限制了，因为HTML已经提供了pattern属性。

其次是密码和确认密码

function validata(){
    var pw1 = document.getElementById("pw1").value;
    var pw2 = document.getElementById("pw2").value;
    if(pw1 == pw2) {
    document.getElementById("tishi").innerHTML="两次密码相同";
    document.getElementById("submit").disabled = false;
    }
    else {
    document.getElementById("tishi").innerHTML="两次密码不相同";
    document.getElementById("submit").disabled = true;
    }
}

validata()的js方法对id为“tishi”的标签进行innerHTML输出，并限制提交按钮。(document.getElementById("").innerHTML="")

第三——也是今天的重点：使用Ajax

function checkUsername(){
    var username=document.getElementById("username").value;
    if(username==null||username==""){
        document.getElementById("yonghuming").innerHTML="用户名不能为空";
        document.getElementById("submit").disabled = false;
    }
    else{
        var xhr=new XMLHttpRequest();
        var url="CheckNameWithAjax?username="+username;
        xhr.open("post",url,true);
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                var resText=xhr.responseText;
                if(resText=="true"){
                    document.getElementById("CheckUsername").innerHTML="该用户名可用";
                }
                else{
                    document.getElementById("CheckUsername").innerHTML="该用户名已存在";
                }
            }
        }
    }
}

我们需要在用户编辑完用户名后直接给出格式问题，那么就需要在中添加属性——onbulr="checkUsername()" onbulr属性是用户将焦点移开此输入框后执行引号内的js方法。

XMLHttpRequest()类提供的方法有

open(method, url, async, username, password)

method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。

url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。

async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。

username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

send(body)

如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不适必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。

简单的知识点均来自XML DOM - XMLHttpRequest 对象 (w3school.com.cn)

2022春季学期

2022.3.15学习日记

注册界面

相关

标签