ajax请求

最新推荐文章于 2022-08-01 10:29:37 发布

YangL666

最新推荐文章于 2022-08-01 10:29:37 发布

阅读量137

点赞数

分类专栏：个人日常分享知识点总结

本文链接：https://blog.csdn.net/YangL666/article/details/82290141

版权

知识点总结同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

个人日常分享

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./form.css">
    <title>Document</title>
</head>
<body>
    <form action="./register.php" method="post">     
        <span id="msg">aaa</span>  
        用户名：<input type="text" name="username" id="username">
        昵称：<input type="text" name="nickname" >
        密码： <input type="password" name="password" >   
        <input type="submit" value="注册">
    </form>
    <div class="showmsg"></div>
    <script>
        document.querySelector("#username").onblue = function () {
            //获取用户数据
            var name = this.value;
            //创建异步对象
            var xhr = new XMLHttpRequest();
            // 设置请求行,open(请求方式,请求url)
            // get 需要在url后面拼接参数(如果有参数)
            // post 请求不需要拼接参数
            xhr.open("post","validate.php");
            // 设置请求头setRequestHeader();
            // 1 get不需要设置
            // post需要设置请求头 content-type:application/x-www-form-urlencoded
            xhr.setRequestHeader("content-type","applicatuon/x-www-form-urlencoded");
            // 如果没有设置，参数无法正确的传递到服务器(本质上说，如果没有参数，也不一定需要设置，不会影响请求的发送)
            // 设置请求体send();
            xhr.send("username="+name);
            // 3让异步对象接受服务器的响应
            // 接受响应的连个条件
            // d当异步响应状态发生改变的时候,会触发一个事件:onreadystatechange
            if(xhr.status == 200&& xhr.readyState == 4) {
                document.querySelector(".showmsg").innerHTML = xhr.responseText;
            } 
        }

        document.querySelector("#username").onblur = function(){
            // 1.获取用户数据
            var name = this.value;
            // 2. 让异步对象发送post请求
            // 2.1 创建异步对象
            var xhr = new XMLHttpRequest();
            // 2.2 设置请求行 open(请求方式，请求url)
                // 1.get 需要在url后面拼接参数(如果有参数)
                // 2.post请求不需要拼接参数
            xhr.open("post","validate.php");
            // 2.3 设置请求头:setRequestHeader()
                // 1.get不需要设置
                // 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//.如果没有设置，参数无法正确的传递到服务器(本质上说，如果没有参数，也不一定需要设置，不会影响请求的发送)
            // 2.4 设置请求体 send()
                // 1.get的参数在url拼接了，所以不需要在这个函数中设置
                // 2.post的参数在这个函数中设置(如果有参数)
            xhr.send("username="+name);

            // 收服务器的响应数据
            // 一个成功的响应有两个条件：1.服务器成功响应了  2.异步对象的响应状态为4(数据解析完毕可以使用了)
            // 当异步对象的响应状态发生改变的时候，会触发一个事件：onreadystatechange
            xhr.onreadystatechange = function(){
                // 判断服务器是否响应      判断异步对象的响应状态
                if(xhr.status == 200 && xhr.readyState == 4){
                    document.querySelector(".showmsg").innerHTML = xhr.responseText;
                }
            }

        };
    </script>
</body>
</html>