|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: свободно
Лекция 10:
Основы приложений AJAX
Пример со списком контактов
В действительности уже есть все, что нужно для создания приложений 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.
Елена Сапегова
Рустам Рахимов
|
Пол часа искал в интеренете, как что работает. Такое чувство что автор пишет для людей которые уже знают js, или просто хвастается своими знаниями. Конструкция формы непонятна. И можно было бы в кратце написать, что такое событие которое используют. Сорершенно не понятно как работает форма, и как брать из нее значение. function Complete() { var x = "Имя: " + document.tutform.firstname.value; alert(x); } - Так брать значение из формы tutform, firstname-получаем значение из имени. <INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.
|