HTML5中用AJAX动态加载JSON文件

最新推荐文章于 2023-11-24 18:04:51 发布

zlpx1983

最新推荐文章于 2023-11-24 18:04:51 发布

阅读量796

点赞数

分类专栏： JavaScript HTML5 文章标签： Ajax JSON

HTML5 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

19 篇文章 0 订阅

订阅专栏

下面的例子展示了你如何动态加载和解析一个外部的JSON对象，使用了AJAX和HTML5的JSON.parse()方法。

<!DOCTYPE HTML>
<html>
<head>
    <title>Simple AJAX .JSON load example</title>
</head>
<body>
 
    <form>
        <input id="btn"
                type="button"
                value="ajax load"
                οnclick="btn_onClickHandler();" />
    </form>
 
    <div id="debug"></div>
 
    <script type="text/javascript">
        function btn_onClickHandler() {
            ajaxLoad("data.js", ajaxOnResult);
        }
 
        function ajaxLoad(uri, callback) {
            var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            request.onreadystatechange = callback;
            request.open("GET", uri);
            request.send(null);
        }
 
        function ajaxOnResult(evt) {
            if ((evt.currentTarget.readyState == 4) && (evt.currentTarget.status == 200 || evt.currentTarget.status == 0)) {
                var f = document.getElementById("debug");
                f.innerHTML = "<h1>HTTP status: "+ evt.currentTarget.status +"</h1>" +
                        "<p>This text should be replaced after JSON.parse() call.</p>";
 
                var json_data = JSON.parse(evt.currentTarget.responseText);
                f.innerHTML = '<a href="' + json_data.site + '" target="top">' + json_data.name + '</a> -- ' + json_data.properties.description;
            }
        }
    </script>
 
</body>
</html>

源码下载：

使用Ajax动态加载JSON文件.zip