Опубликован: 19.10.2006 | Доступ: свободный | Студентов: 9573 / 1967 | Оценка: 4.14 / 3.85 | Длительность: 08:05:00
Лекция 10:

Основы приложений AJAX

< Лекция 9 || Лекция 10: 123 || Лекция 11 >

Пример со списком контактов

В действительности уже есть все, что нужно для создания приложений 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));
  }
}

Демонстрационный пример

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 будет отключен, но всегда существуют некоторые исключения для этого правила.

"Следующая лекция" будет посвящена обработке ошибок в JavaScript.

< Лекция 9 || Лекция 10: 123 || Лекция 11 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Рустам Рахимов
Рустам Рахимов

Пол часа искал в интеренете, как что работает. Такое чувство что автор пишет для людей которые уже знают js, или просто хвастается своими знаниями. Конструкция формы непонятна. И можно было бы в кратце написать, что такое событие которое используют. Сорершенно не понятно как работает форма, и как брать из нее значение. 

function Complete() {

    var x = "Имя: " + document.tutform.firstname.value;

alert(x);

} - Так брать значение из формы tutform, firstname-получаем значение из имени. 

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.