Ajaxを使用したJSON

AJAXは非同期JavaScriptおよびXMLであり、非同期Webアプリケーションを作成するために、相互に関連するWeb開発手法のグループとしてクライアント側で使用されます。 AJAXモデルによれば、Webアプリケーションは、既存のページの表示や動作を妨げることなく、非同期的にサーバーとの間でデータを送受信できます。

多くの開発者はJSONを使用して、クライアントとサーバー間でAJAX更新を渡します。ライブスポーツスコアを更新するWebサイトは、AJAXの例と考えることができます。これらのスコアをWebサイトで更新する必要がある場合、Webページが必要に応じてスコアを取得できるように、サーバーに保存する必要があります。ここで、JSON形式のデータを利用できます。

AJAXを使用して更新されたデータは、WebサーバーでJSON形式を使用して保存できます。 AJAXは、javascriptが必要に応じてこれらのJSONファイルを取得し、それらを解析し、次の操作のいずれかを実行できるように使用されます-

解析された値を変数に保存して、ウェブページに表示する前にさらに処理できるようにします。 *データがWebページのDOM要素に直接割り当てられるため、Webサイトに表示されます。

例

次のコードは、AJAXを使用したJSONを示しています。* ajax *ファイルとして保存します。ここでは、ロード関数loadJSON（）を非同期的に使用してJSONデータをアップロードします。

<html>
   <head>
      <meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type">

      <script type = "application/javascript">
         function loadJSON() {
            var data_file = "http://www.finddevguides.com/json/data.json";
            var http_request = new XMLHttpRequest();
            try{
              //Opera 8.0+, Firefox, Chrome, Safari
               http_request = new XMLHttpRequest();
            }catch (e) {
              //Internet Explorer Browsers
               try{
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");

               }catch (e) {

                  try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e) {
                    //Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }

               }
            }

            http_request.onreadystatechange = function() {

               if (http_request.readyState == 4  ) {
                 //Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(http_request.responseText);

                 //jsonObj variable now contains the data structure and can
                 //be accessed as jsonObj.name and 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>finddevguides.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>

以下に示すのは入力ファイル data.json で、 Update Detail ボタンをクリックすると非同期にアップロードされるJSON形式のデータを持っています。このファイルは* http：//www.finddevguides.com/json/*に保存されています

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

上記のHTMLコードは、次の画面を生成します。ここで、AJAXの動作を確認できます-

クリケッターの詳細

Name	Country
さちん	インド

更新の詳細

[*詳細の更新]ボタンをクリックすると、次のような結果が得られます。ブラウザがJavaScriptをサポートしていれば、link：/json/ajax [JSON with AJAX]を自分で試すことができます。

クリケッターの詳細

Name	Country
ブレット	オーストラリア

Json-ajax-example

目次

Ajaxを使用したJSON

例

クリケッターの詳細

クリケッターの詳細