Ajax的简单实例

最新推荐文章于 2023-11-21 13:31:26 发布

不想学习的一天

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量1k

点赞数

分类专栏：笔记实训文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43849107/article/details/107928591

版权

笔记同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

实训

10 篇文章 0 订阅

订阅专栏

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

通过一个简单的例子了解Ajax

在index.html页面中获取test.html页面的内容。

test.html页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    test.html页面的内容
    <!-- 作为测试使用 -->
</body>
</html>

接下来式index.html页面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    我是index.html的内容
    <button>获取test</button>
    <div style="width: 100px;height: 100px;border: 1px solid red">
    
    </div>
<script>
    window.onload=function(){
        var button = document.querySelector("button");
        //按钮触发事件
        button.onclick = function () {
            
            var ajax = new XMLHttpRequest();//异步请求
            ajax.onreadystatechange = function(){
                if(ajax.readyState==4){
                    if(ajax.status==200){
                        //只有当ajax.readyState==4 和 ajax.status==200时
                        //说明数据已经安全返回
                        console.log(ajax.response);
                        document.querySelector("div").innerHTML = ajax.response；
                        //用div获取返回的内容
                    }
                }
            }
            ajax.open("get","ajax1.html");
            ajax.send();
        }
    }

</script>
</body>
</html>

刚开始时index页面的运行结果如下图：
初始页面
点击“获取test”按钮之后的结果如下图：

点击按钮后的结果

Ajax.readyState的状态码

状态码	代表的意思
1	已经告知ajax相应的地址和传递方式
2	信息已经发送
3	请求的服务器存在
4	数据已经拿到

ajax.readyState==4，是否可以证明获取的数据可以正常返回？
不能证明获取的数据可以正常返回。ajax.readyState==4 时，只能说明数据已经被获取，只有当 ajax.readState==4 和 ajax.status==200 时，获取的数据才能正常返回

不想学习的一天

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax的简单实例

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。通过一个简单的例子了解Ajax在index.html页面中获取test.html页面的内容。test.html页面代码如下:<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫

专栏目录