для хранения всех контактов и функция для очищения и повторного заполнения этой таблицы. Вот и все.
First Name |
Last Name |
Phone # |
|---|
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
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
Как можно видеть из примера выше, это все достаточно просто. Большая часть кода
нужна в действительности просто для создания новых строк в таблице.
AJAX может быть удивительно полезным инструментом. Его можно использовать для проверки форм перед их отправкой, для извлечения данных, как в этом примере, или для чего-то еще, что можно будет придумать. Однако в нормальной ситуации он не должен быть основным элементом Web-сайта. Обычно надо быть уверенным, что сайт будет доступен, даже если JavaScript будет отключен, но всегда существуют некоторые исключения для этого правила.
Следующая лекция будет посвящена обработке ошибок в
