演示原生态的js的Ajax提交方式之: get

最新推荐文章于 2022-11-17 21:46:54 发布

青眼酷白龙

最新推荐文章于 2022-11-17 21:46:54 发布

阅读量127

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36382679/article/details/105643328

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示原生态的js的Ajax提交方式之: get 了解</title>

    <!--这里写的是: 原生态的js代码-->
    <script>
        //页面加载
        window.onload = function () {
            //获取按钮元素
            var btn = document.getElementById("btn");
            //给按钮绑定一个单击事件.
            btn.onclick = function () {
                //js中的ajax的代码编写:
                //1. 获取要提交给后台Servlet的数据.
                var username = document.getElementById("uid").value
                //2. 创建ajax的核心对象: XMLHttpRequest
                var xhr = new XMLHttpRequest()
                //3. 给核心对象XMLHttpRequest添加一个onreadystatechange(监听事件), 并绑定一个函数.
                xhr.onreadystatechange = function () {
                    /*
                        readyState状态码的意思:
                            0: 请求未初始化
                            1: 服务器连接已建立
                            2: 请求已接收
                            3: 请求处理中
                            4: 请求已完成，且响应已就绪
                        响应状态码:
                            200: 响应成功
                            302: 重定向
                            304: 访问缓存
                            404: 请求的资源不存在
                            500: 服务器内部错误.
                     */
                    //4. 在函数中校验: 提交状态是否为4, 且响应状态码是否为 200, 如果是: 说明提交数据后, 接收响应数据成功.
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //走到这里, 说明成功接收响应数据, 打印即可.
                        //5. 输出接收到的: 后台响应过来的数据.
                        alert(xhr.responseText)
                    }
                }
                //6. 配置ajax的发送方式.
                //参数1: 提交数据的方式  参数2: 提交数据到哪里    参数3: true(表示异步), false(表示同步), 默认是true
                xhr.open("get", "/day04/Demo01Servlet?username=" + username, true)
                //7. 具体的发送动作.
                xhr.send()
            }
        }
    </script>

</head>
<body>
<input type="text" name="username" id="uid"/>
<input type="button" value="js的Ajax提交方式(get)" id="btn"/>

</body>
</html>

青眼酷白龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
演示原生态的js的Ajax提交方式之: get

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>演示原生态的js的Ajax提交方式之: get 了解</title>  <script&gt...
复制链接

扫一扫