Ajax基础学习

最新推荐文章于 2024-07-23 09:02:31 发布

喜欢快乐！

最新推荐文章于 2024-07-23 09:02:31 发布

阅读量125

点赞数

本文链接：https://blog.youkuaiyun.com/yingjiaxin/article/details/103232448

版权

新建一个JavaWeb项目，配置好相关设置。

在web创建一个data包，里面添加一个userlist文档，储存用户信息

在这里插入图片描述
编辑默认页面

新建一个getUserList.html，用JavaScript脚本语言获取用户列表

<script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest){
                //IE7+, FireFox, Chrome, Opera, Safari浏览器里执行代码
                xmlhttp = new XMLHttpRequest();
            }else {
                //IE5, IE6 浏览器里执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    </script>

getUserList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户列表</title>
    <script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest) {
                //IE7+, FireFox, Chrome, Opera, Safari浏览器里执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                //IE5, IE6 浏览器里执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //监听请求状态的变化，一旦有变化，执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                //判断请求是否成功，响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                    //利用响应文本修改页面元素内容
                    document.getElementById("users").innerHTML = xmlhttp.responseText;
                }
            }
            //新建HTTP请求，采用GET方式，请求采用异步方式
            xmlhttp.open("GET", "/AjaxDemo/data/userlist.txt", true);
            //发送HTTP请求,不传递参数
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" onclick="loadUserList()">获取用户列表</button>
</body>
</html>