Основы программирования на JavaScript



              

Пример со списком контактов - часть 2


Файл 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';




Содержание  Назад  Вперед