AJAX小案例（一）

最新推荐文章于 2022-12-09 17:05:52 发布

人终将被少年不得之物困扰一生

最新推荐文章于 2022-12-09 17:05:52 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_43889484/article/details/103912120

版权

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

案例演示1：

创建一个demo名为AjaxDemo

2.编写getUserList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户列表</title>
    <script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            }
            //监听请求状态变化，
            xmlhttp.onreadystatechange=function () {
                //判断是否请求成功，响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                    //利用响应文本修改页面内容
                    document.getElementById("users").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","/AjaxDemo/data/userlist.txt",true);
            //发送请求
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" onclick="loadUserList()">获取用户列表</button>


</body>
</html>

在这里插入图片描述

3.在web目录下创建一个data包，再创建一个txt,随便添加一些东西。
在这里插入图片描述

4.启动tomcat服务器，
输入：
在这里插入图片描述

点击获取用户列表就可以获得 txt 中的内容了

在这里插入图片描述

人终将被少年不得之物困扰一生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX小案例（一）

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。案例演示1：创建一个demo名为A...
复制链接

扫一扫