Шрифт:
В действительности уже есть все, что нужно для создания приложений AJAX, но мы рассмотрим достаточно простой пример. Мы собираемся написать небольшую таблицу данных (data grid), которая извлекает данные из трех различных файлов JSON. Для простоты эти файлы уже были сгенерированы. На практике эти файлы будут скорее всего генерироваться оперативно с помощью серверного сценария.
Файл 1
{contacts:[
{"firstname":"Steve" ,"lastname":"Smith", "phone":"555-1212"},
{"firstname":"Joe" ,"lastname":"Stevens", "phone":"555-0193"},
{"firstname":"Sam" ,"lastname":"Smith", "phone":"555-5120"},
{"firstname":"Dave" ,"lastname":"Stevens", "phone":"555-0521"},
{"firstname":"Suzy" ,"lastname":"Smith", "phone":"555-9410"},
{"firstname":"Jessica" ,"lastname":"Stevens", "phone":"555-8521"},
{"firstname":"James" ,"lastname":"Smith", "phone":"555-4781"},
{"firstname":"Jacob" ,"lastname":"Stevens", "phone":"555-9281"},
{"firstname":"Alex" ,"lastname":"Smith", "phone":"555-7261"},
{"firstname":"Tam" ,"lastname":"Stevens", "phone":"555-1820"}
]}
Файл 2
{contacts:[
{"firstname":"Nancy" ,"lastname":"Smith", "phone":"555-9583"},
{"firstname":"Elane" ,"lastname":"Stevens", "phone":"555-7281"},
{"firstname":"Shawn" ,"lastname":"Smith", "phone":"555-5782"},
{"firstname":"Jessie" ,"lastname":"Stevens", "phone":"555-7312"},
{"firstname":"Matt" ,"lastname":"Smith", "phone":"555-4928"},
{"firstname":"Jason" ,"lastname":"Stevens", "phone":"555-3917"},
{"firstname":"Daniel" ,"lastname":"Smith", "phone":"555-8711"},
{"firstname":"Shannon" ,"lastname":"Stevens", "phone":"555-0912"},
{"firstname":"Diana" ,"lastname":"Smith", "phone":"555-6172"},
{"firstname":"Mark" ,"lastname":"Stevens", "phone":"555-8831"}
]}
Файл 3
{contacts:[
{"firstname":"Laura" ,"lastname":"Stevens", "phone":"555-3915"},
{"firstname":"Jeff" ,"lastname":"Smith", "phone":"555-8614"},
{"firstname":"Frank" ,"lastname":"Stevens", "phone":"555-0213"},
{"firstname":"Elizabeth" ,"lastname":"Smith", "phone":"555-7531"},
{"firstname":"Jim" ,"lastname":"Stevens", "phone":"555-3951"}
]}
Эти файлы будут обеспечивать все данные для нашего списка контактов на AJAX. Построение списка контактов является в действительности вполне простым: создается таблица TABLE для хранения всех контактов и функция для очищения и повторного заполнения этой таблицы. Вот и все.
<table cellspacing="1" cellpadding="3" bgcolor="#000000" style="font-family:tahoma;font-size:10px;">
<tbody id="contactListTable">
<tr style="background-color:#CCF;">
<th>First Name</th>
<th>Last Name</th>
<th>Phone #</th>
</tr>
</tbody>
</table>
function loadContactListPage(n){
var oXML = getXMLHttpObj;
oXML.open('GET', '/img/10_json_file'+n+'.txt', true);
oXML.onreadystatechange = function{ doneLoading(oXML); }
oXML.send('');
}
function doneLoading(oXML){
if(oXML.readyState!=4) return;
var json = eval('('+oXML.responseText+')');
var table = document.getElementById('contactListTable');
for(var i=table.childNodes.length-1; i>0; i--){
table.removeChild(table.childNodes[i]);
}
for(var i=0; i<json.contacts.length; i++){
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
tr.style.backgroundColor = i%2?'#FFF':'#E6E6E6';
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td1.appendChild(document.createTextNode(json.contacts[i].firstname));
td2.appendChild(document.createTextNode(json.contacts[i].lastname));
td3.appendChild(document.createTextNode(json.contacts[i].phone));