Ajaxを使用したJSON

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

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

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

解析された値は、Webページに表示する前に、さらに処理するために変数に格納します。
WebページのDOM要素にデータを直接割り当てて、Webサイトに表示されるようにします。

例

次のコードは、AJAXを使用したJSONを示しています。名前を付けて保存ajax.htmファイル。ここでは、ロード関数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.tutorialspoint.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>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>

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

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

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

クリケット選手の詳細

名前	国
サチン	インド

あなたがクリックすると Update Detailボタンをクリックすると、次のような結果が得られるはずです。ブラウザがJavascriptをサポートしていれば、AJAXでJSONを自分で試すことができます。

クリケット選手の詳細

名前	国
ブレット	オーストラリア