79-ajax获取响应数据

最新推荐文章于 2024-07-14 03:33:08 发布

Lich Howger

最新推荐文章于 2024-07-14 03:33:08 发布

阅读量906

点赞数 1

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_33781658/article/details/84635198

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏



ajax获取响应数据

我们先写一点简单的异步请求代码

先来一个servlet

public class TestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("hello world");
        resp.getWriter().print("hello world");
    }
}

很简单,就是写一下而已



<html>
<head>
    <title>测试</title>

    <script type="text/javascript">
        //在文档加载完成后就会执行
        window.onload = function () {
            //得到btn元素
            var btn = document.getElementById("btn");

            //给btn的click事件注册监听
            //在btn被点击的时候执行
            btn.onclick = function () {

                //创建xmlHttpRequest对象
                var xmlHttp = createXMLHttpRequest()

                //打开与服务器的连接
                //指定 1.方法 2.url 3.是否异步
                xmlHttp.open("GET", "<c:url value='/test' />", true);

                //发送请求,get方法,给出null请求体
                xmlHttp.send(null)

                //给异步对象的onreadystatechange事件注册监听
                xmlHttp.onreadystatechange = function () {
                    //当xmlHttp的状态发生变化的时候,就会执行
                    //判断readyState为4状态,服务器响应状态码status为200
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                        //获取responseText文本格式的响应内容
                        var responseText = xmlHttp.responseText;

                        //获取h1元素对应的DOM对象
                        var h1 = document.getElementById("h1");
                        h1.innerHTML = responseText;
                    }
                };

            }
        }

        function createXMLHttpRequest() {
            return new XMLHttpRequest()
        }
    </script>
</head>
<body>

<button id="btn">button</button>
<h1 id="h1"></h1>

</body>
</html>