使用Ajax异步加载请求JSON数据

最新推荐文章于 2022-03-20 16:18:51 发布

清水拌墨茶

最新推荐文章于 2022-03-20 16:18:51 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax异步操作 javascript 文章标签： ajax json 异步

本文链接：https://blog.youkuaiyun.com/zm_nizhi/article/details/74157876

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

ajax异步操作

1 篇文章

订阅专栏

这篇博客详细介绍了如何通过Ajax技术实现异步加载JSON数据。内容包括HTML页面设置、JSON数据源（demo.json）、JavaScript辅助函数如addLoadEvent.js、getHttpObject.js和getNewContent.js的实现，以及最终的运行结果展示。通过这些步骤，读者可以学习到如何在不刷新页面的情况下获取并更新服务器数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="addLoadEvent.js"></script>
        <script src="getHttpObject.js"></script>
        <script src="getNewContent.js"></script>
    </head>
    <body>
    </body>
</html>

demo.json

[
  {
    "name":"Lee",
    "age":28,
    "height":188
  },
  {
    "name":"Sun",
    "age":30,
    "height":190
  }
]

addLoadEvent.js

function addLoadEvent(fun){
    var oldLoad = window.onload;
    if(typeof  oldLoad != "function"){
        window.onload = fun;
    }else{
        window.onload = function(){
            oldLoad();
            fun();
        }
    }
}

getHttpObject.js

/*建立XMLHttpRequest对象的兼容方法*/
function getHttpObject(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    }else if(window.ActiveXObject){
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

getNewContent.js

function getNewContent(){
    /*建立一个新的getHttpObject对象*/
    var XHR = getHttpObject();
    if(XHR){
    XHR.onreadystatechange = function(){
    if(XHR.readyState == 4 && XHR.status == 200){
        var txt = JSON.parse(XHR.responseText);
        var result = [];
        /*动态添加DOM*/
        var body = document.getElementsByTagName("body")[0];
        var content = document.createElement("p");
        body.appendChild(content);
        /*遍历输出*/
        for(var i=0;i<txt.length;i++){
            result["name"] = txt[i].name;
            result["age"] = txt[i].age;
            result["height"] = txt[i].height;
            content.innerHTML += "姓名："+result["name"]+"&nbsp;&nbsp;年龄：" + result["age"] +"&nbsp;&nbsp;身高："+ result["height"]+"<br/>";
            }
        }
    };
    /*异步请求触发后，脚本会继续执行，不会等待它响应*/
    XHR.open('Get','demo.json?id='+Math.random(),true);
    XHR.send(null);
    }
}
addLoadEvent(getNewContent);

运行结果

这里写图片描述