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を自分で試すことができます。
クリケット選手の詳細
名前 | 国 |
---|---|
ブレット
|
オーストラリア
|