{'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));
}
}
Демонстрационный пример
First Name Last Name Phone #
Steve Smith 555-1212
Joe Stevens 555-0193
Sam Smith 555-5120
Dave Stevens 555-0521
Suzy Smith 555-9410
Jessica Stevens 555-8521
James Smith 555-4781
Jacob Stevens 555-9281
Alex Smith 555-7261
Tam Stevens 555-1820
Page 1 | Page 2 | Page 3
Как можно видеть из примера выше, это все достаточно просто. Большая часть кода нужна в
