• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

AJAX JSON 实例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

AJAX JSON 实例


 我们可以通过AJAX代码获取JSON数据。AJAX提供了异步获取响应的工具。它不会重新加载页面并节省带宽。

 让我们看一个使用AJAX代码获取JSON数据的简单示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
    var data_file = "https://atts.ogeek.cn/articles/user.json";
    var http_request = new XMLHttpRequest();
    try{
        // Opera 8.0+, Firefox, Chrome, Safari
        http_request = new XMLHttpRequest();
    }catch (e){
        // IE 浏览器处理
        try{
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try{
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                // 错误处理
                alert("Your browser broke!");
                return false;
            }
        }
    }
    http_request.onreadystatechange = function(){
        if (http_request.readyState == 4 )
        {
            // 使用 JSON.parse 解析 JSON 数据
            var jsonObj = JSON.parse(http_request.responseText);
            // jsonObj 变量现在包含数组结构,可以通过 jsonObj.name 和 jsonObj.country 的方式访问
            document.getElementById("Name").innerHTML = jsonObj.name;
            document.getElementById("Country").innerHTML = jsonObj.country;
        }
    }
    http_request.open("GET", data_file, true);
    http_request.send();
}
</script>
<title>tutorialspoint.com JSON</title>
</head>
<body>
<h1>Cricketer Details</h1>
<table class="src">
<tr><th>Name</th><th>Country</th></tr>
<tr><td><div id="Name">Sachin</div></td>
<td><div id="Country">India</div></td></tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON()">Update Details </button>
</div>
</body>
</html>
由于CROS的存在,跨域请求处理会被浏览器屏蔽掉,所以ajax请求只能在相同域名下进行请求(比如本站的网页请求本站的Ajax),以上代码在在线运行情况下是可以运行的,但在本地情况下不能运行,望知悉。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用AJAX存在的问题发布时间:2022-01-29
下一篇:
AJAX面试问题发布时间:2022-01-29
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap