在 AJAX 中使用 JSON

优质

小牛编辑

125浏览

2023-12-01

AJAX 是异步 JavaScript 和 XML，它在客户端用作一组相互关联的Web开发技术，以便创建异步Web应用程序。根据AJAX模型，Web应用程序可以异步地从服务器发送和检索数据，而不会干扰显示和现有页面的行为。

许多开发人员使用JSON在客户端和服务器之间传递AJAX更新。更新直播体育比分的网站可以被视为AJAX的一个例子。如果必须在网站上更新这些分数，则必须将它们存储在服务器上，以便网页可以在需要时检索分数。这是我们可以使用JSON格式数据的地方。

使用AJAX更新的任何数据都可以使用Web服务器上的JSON格式进行存储。使用AJAX以便javascript可以在必要时检索这些JSON文件，解析它们并执行以下操作之一

将解析后的值存储在变量中，以便在网页上显示之前进行进一步处理。
它直接将数据分配给网页中的DOM元素，以便它们显示在网站上。

例

以下代码显示了带有AJAX的JSON。将其另存为ajax.htm文件。这里加载函数loadJSON（）以异步方式用于上传JSON数据。

<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="application/javascript">
function loadJSON()
{
    var data_file = "http://www.tutorialspoint.com/json/data.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>
</body>
</html>

下面就是包含 JSON 格式数据的输入文件 data.json，当我们点击 Update Detail 按钮时会以异步的方式上传它。

{"name": "brett", "country": "Australia"}