原生的ajax 异步交互过程

最新推荐文章于 2022-04-01 19:51:37 发布

紫晓宁

最新推荐文章于 2022-04-01 19:51:37 发布

阅读量431

点赞数

分类专栏：前端web

本文链接：https://blog.csdn.net/zixiaoning/article/details/52337196

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

html表单

<body>
    <div id="showinfo">1</div>
   <form id="form">
    用户名:<input type="text" name="name" id="name">
    <br/>
    密 码: <input type="password" name="psd" id="psd">
    <input type="submit" value="提交" id="btn">
   </form>
</body>

js中ajax代码 (简单的信息验证)

<script type="text/javascript">
    window.onload = function () {//页面加载
        var btn = document.getElementById('btn');
        btn.onclick = function () {//按钮点击时,发生时间
            var name = document.getElementById('name').value;
            var psd = document.getElementById('psd').value;
            var xhr = null;
            if (window.XMLHttpRequest) {//普通浏览器可以识别XMLHttpRequest对象
                xhr = new XMLHttpRequest();
            }
            else {//没有xhlhttprequest对象的话,创建IE5,6自己的对象ActiveXObject
                xhr = new ActiveXObject("microsoft.XMLHTTP");
            }
            var url = './check.php?username=' + name + "&password=" + psd;
            xhr.open('get', url, true);//准备执行的内容
            xhr.onreadystatechange = function () {//,当send函数执行完成后,执行的回调函数
                if (xhr.readyState == 4) {//这件事已经完成
                    if (xhr.status == 200) {//这件事完成的情况
                        //alert(2);
                        var data = xhr.responseText;//从后台返回的数据
                        if (data == 1) {
                            document.getElementById('showinfo').innerHTML = '信息失败';
                        } else if (data == 2) {
                            document.getElementById('showinfo').innerHTML = '信息正确';

                        }
                    }
                }
            }
            xhr.send(null);
        }
    }
</script>

php页面后台数据的处理

<?php
$username = $_GET['username'];//通过get请求方式,接收前台的数据
$psd = $_GET['password'];
if($username == 'admin' && $psd == '123'){//admin和123这里是静态的数据
    echo 2;//返回的信息,ajax中xhr.responseText;返回的data是1 or 2
}
else{
    echo 1;
}
?>

紫晓宁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生的ajax 异步交互过程

html表单body> div id="showinfo">1div> form id="form"> 用户名:input type="text" name="name" id="name"> br/> 密码: input type="password" name="psd" id="psd"> input type="submit" val
复制链接

扫一扫