@project[0].easyAjax

автор: systemiv

index.html

<html>
<head>
	<script type="application/javascript" src="javascript.js"></script>
	<meta charset="utf8">
</head>
<body>
	<a href = "#app" id="button">App</a><br />
	<table id="table" border="1">
		<tr>
			<th>№</th>
			<th>Name</th>
			<th>Description</th>
			<th>Count</th>
			<th>Other</th>
		</tr>
	</table>
</body>
</html>

javascript.js

window.onload = function(){
	var button = document.getElementById('button');
	button.onclick = function(event){
		var request = new XMLHttpRequest();
		request.onreadystatechange = function(){
			if(request.readyState == 4){
				if(request.status == 200){
					var table = document.getElementById('table');
					var tr = document.createElement('tr');
					var result = JSON.parse(request.responseText);
					tr.innerHTML = '<td>' + result.num + '</td>';
					tr.innerHTML += '<td>' + result.name + '</td>';
					tr.innerHTML += '<td>' + result.desc + '</td>';
					tr.innerHTML += '<td>' + result.count + '</td>';
					tr.innerHTML += '<td>' + result.other + '</td>';
					table.appendChild(tr);
				}
			}
		}
		request.open('GET', 'phpscript.php');
		request.send(null);
		event.preventDefault();
	}
}

phpscript.php

<?php
	$json = array(
		'num' => '1',
		'name' => 'You Name',
		'desc' => 'You Descriptions',
		'count' => '235435',
		'other' => 'Other Information'
	);
	echo json_encode($json);
?>

Демо: Открыть в новой вкладке