browseMin.html

<!DOCTYPE html>
<html><head>
	<title>Browse Example</title>
	<meta charset="UTF-8">
	<!-- CSS styles for HTML content -->
	<style> html, body { width:100%; height: 100%; margin: 0; } </style>
	<!-- NOTE: this example doesn't contain any error handling! -->
	<script language="javascript">
		function doBrowse() {
			var request = new XMLHttpRequest();
			// handleJson.php is the server-side script that communicates with WebJson and delivers the answer
			request.open("POST", "handleJson.php", true);
			request.setRequestHeader("Content-Type", "application/json");
			request.addEventListener('load', function(event) {
				// this code is executed after an answer arrives
				// TODO: error handling is missing
				var j = JSON.parse(request.responseText);
				var data = j['data']
				// evaluate result
				var result = '<table><tr><th>Name</th><th>Type</th><th>Comment</th></tr>';
				for (var x in data) {
					result = result + '<tr><td>' + x + '</td><td>';
					if (data[x]['type'] != 'unknown') { // don't show the 'unknown' type
						result = result + data[x]['type'];
					}
					result = result + '</td><td>';
					if ('comment' in data[x]) {
						result = result + data[x]['comment'];
					}
					result = result + '</td></tr>';
				}
				result = result + '</table>';
				document.getElementById("result").class = '';
				document.getElementById("result").innerHTML = result;
			});
			var val = document.getElementById("Path").value;
			// this is the request
			request.send('{"opcode":"browse", "seq":0, "name":"' + val + '"}');
			return false;
		}
	</script>
</head><body>
	<form action="#" onsubmit="return doBrowse()">
		<table><tr>
			<td><label for="Path">Browse path</label></td>
			<td><input type="text" name="Path" id="Path"></td>
		</tr><tr>
			<td></td>
			<td><input type="submit" value="Start"></td>
		</tr><tr>
			<td>Result:</td>
			<td id="result"></td>
		</tr></table>
	</form>
</body></html>