↩ zhcn 编程语言 Web相关 HTML 非公開: Ajax 检索 JSON 数据

Ajax 检索 JSON 数据

Ajax的正式名称是“Asynchronous JavaScript and XML”，译为“异步JavaScript和XML”，程序员可以将其称为“Ajax”，Ajax通常使用JSON作为传输数据的格式。

一般来说，您可以通过 JavaScript 发送 Ajax 请求并接收响应信息。让我用一个例子来解释一下（有关 Ajax 的详细介绍，请参阅JavaScript Ajax 请求部分）。

 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>AJAXとJSON</title>
    <script type="application/javascript">
        function load() {
            var url = "./data.json"; // JSONデータのリンクを取得
            var request;

            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); // Chrome、Mozillaなどのブラウザに適用されるAjaxリクエストを送信する
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // IEブラウザに適用されるAjaxリクエストを送信する
            }
            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    var jsonObj = JSON.parse(request.responseText); // JSONデータを解析する
                    document.getElementById("title").innerHTML     = jsonObj.title;
                    document.getElementById("author").innerHTML    = jsonObj.author;
                    document.getElementById("url").innerHTML       = jsonObj.url;
                    document.getElementById("catalogue").innerHTML = jsonObj.catalogue;
                }
            }
            request.open("GET", url, true);
            request.send();
        }
    </script>
</head>
<body>
    タイトル： <span id="title"></span><br />
    著者： <span id="author"></span><br />
    URL： <span id="url"></span><br />
    カタログ： <span id="catalogue"></span><br />
    <button type="button" onclick="load()">JSONデータを読み込む</button>
</body>
</html>

上述代码中使用的date.json文件内容如下：

 
{
    "title": "JSONチュートリアル",
    "author": "IT基礎",
    "url": "https://it-kiso.com/",
    "catalogue": [
        "JSONとは",
        "JSONPとは",
        "JSON文法規則"
    ]
}

上述代码必须在服务器环境中执行，执行后，当您点击网页上的按钮时，就会检索指定的JSON数据，并将数据显示在网页上。

HTML

Ajax的正式名称是“Asynchronous JavaScript and XML”，译为“异步JavaScript和XML”，程序员可以将其称为“Ajax”，Ajax通常使用JSON作为传输数据的格式。

一般来说，您可以通过 JavaScript 发送 Ajax 请求并接收响应信息。让我用一个例子来解释一下（有关 Ajax 的详细介绍，请参阅JavaScript Ajax 请求部分）。

 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>AJAXとJSON</title>
    <script type="application/javascript">
        function load() {
            var url = "./data.json"; // JSONデータのリンクを取得
            var request;

            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest(); // Chrome、Mozillaなどのブラウザに適用されるAjaxリクエストを送信する
            } else if (window.ActiveXObject) {
                request = new ActiveXObject("Microsoft.XMLHTTP"); // IEブラウザに適用されるAjaxリクエストを送信する
            }
            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    var jsonObj = JSON.parse(request.responseText); // JSONデータを解析する
                    document.getElementById("title").innerHTML     = jsonObj.title;
                    document.getElementById("author").innerHTML    = jsonObj.author;
                    document.getElementById("url").innerHTML       = jsonObj.url;
                    document.getElementById("catalogue").innerHTML = jsonObj.catalogue;
                }
            }
            request.open("GET", url, true);
            request.send();
        }
    </script>
</head>
<body>
    タイトル： <span id="title"></span><br />
    著者： <span id="author"></span><br />
    URL： <span id="url"></span><br />
    カタログ： <span id="catalogue"></span><br />
    <button type="button" onclick="load()">JSONデータを読み込む</button>
</body>
</html>

上述代码中使用的date.json文件内容如下：

 
{
    "title": "JSONチュートリアル",
    "author": "IT基礎",
    "url": "https://it-kiso.com/",
    "catalogue": [
        "JSONとは",
        "JSONPとは",
        "JSON文法規則"
    ]
}

上述代码必须在服务器环境中执行，执行后，当您点击网页上的按钮时，就会检索指定的JSON数据，并将数据显示在网页上。

HTML