Основы программирования на JavaScript | страница 53



определенно заслуживает рассмотрения.

В действительности уже есть все, что нужно для создания приложений 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. Построение списка контактов является в действительности вполне простым: создается таблица