↩ プログラミング言語 Web関連 json JSON データを取得するための Ajax

JSON データを取得するための Ajax

Ajax の正式名称は “Asynchronous JavaScript and XML” で、これは “Asynchronous JavaScript and XML” と訳されています. プログラマーはそれを “Ajax” と呼んでいます. Ajax を介して、サーバーとクライアントの間でデータを非同期に転送できます. Ajax では、データを転送するための形式として一般的に JSON が使用されます。

一般に、JavaScript を介して Ajax リクエストを送信し、応答情報を受け取ることができます。例を挙げて説明しましょう (Ajax の詳細な紹介については、「 JavaScript Ajax Request 」セクションを参照してください)。

 
<!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文法規則"
    ]
}

上記のコードは、サーバー環境で実行する必要があります. 実行後、Web ページのボタンをクリックすると、指定された JSON データが取得され、Web ページにデータが表示されます

「JSON データを取得するための Ajax」についてわかりやすく解説！絶対に観るべきベスト2動画

Jquery Datatable に JSON データを表示する
https://www.youtube-nocookie.com/watch?v=WGWruWXwGNQ&pp=ugMICgJqYRABGAHKBTFKU09OIOODh-ODvOOCv-OCkuWPluW-l-OBmeOCi-OBn-OCgeOBriBBamF4JmhsPUpB
Bài 8.D2: Minh họa tải và hiển thị dữ liệu JSON bằng jQuery Ajax
https://www.youtube-nocookie.com/watch?v=ZuCMQCUsO10&pp=ygUxSlNPTiDjg4fjg7zjgr_jgpLlj5blvpfjgZnjgovjgZ_jgoHjga4gQWpheCZobD1KQQ%3D%3D

最新記事一覧

関連記事一覧