Лабораторная работа: Технология AJAX
if(data. length == 0) return;
// в массиве arr - строки полученной таблицы
var arr = data. split('n');
// для каждой строки
for(var i in arr) {
// в массиве val - поля полученной таблицы
val = arr [i]. split('t');
// добавляем новый объект OPTION к нашему SELECT
select. options [select. options. length] =
newOption(val [1], val [0], false, false);
}
}
Готово. Теперь для любой веб-формы приложения мы можем реализовать подобный выбор значения из многомиллионного списка, который для пользователя будет выглядеть как считанные нажатия клавиш. В локальной сети выбор происходит практически мгновенно. В случае нестабильного или низкоскоростного соединения с сервером, необходимо также оповещать пользователя о том, что загрузка данных с сервера еще не завершена. Полезно предусмотреть и средства для реакции на обрыв соединения.
Суть ее сводится к следующему: осуществлять передачу данных (т.е. общение клиента с сервером) без фактической перезагрузки web-страницы. Есть несколько реализаций этой идеи, данная статья раскажет о моей. При этом я не утверждаю, что ее не было до меня. Если была - я о ней не знал (на момент написания сего).
Для начала предлагаю определить, какие плюсы мы получаем, делая AJAX-скрипты.
1. Мы экономим траффик как посетителя, так и свой собственный (у нас ведь платный хостинг и за МБ мы платим:)).
2. Мы экономим время посетителя.
3. Мы облегчаем жизнь серверу - ему не приходится передавать каждый раз кучу "лишнего" HTML-кода.
4. В глазах посетителя мы превращаем свой сайт в системную программу. Он жмет на кнопку и практически тут же видит результат.
Из личной практики:
К примеру, раньше на WebFashion пользователь, чтобы выйти (очистить cookies), жал на "выход", ждал перезагрузки и, убедившись, что для системы он Гость, уходил с сайта. Теперь, он жмет "выход" и через мгновение видит изменение своего статуса (меняется верхнее навигационное меню).
Я думаю, уже не осталось сомнений, что AJAX имеет право на существование на Вашем сайте. Остается только вопрос, как же реализовать идею на практике. Сразу скажу, есть несколько больших и громоздких скриптов, мне они не понравились и я решил написать свой собственный скрипт.
Итак, как же динамически осуществить запрос к серверу и главное получить от него вразуметельный ответ? Я надеюсь, все знают о существовании тэга <script>. Если не знаете, дальше можно не читать. Так вот, у него есть замечательный атрибут src. Значение этого атрибута - адрес к JavaScript-файлу, спросите Вы? Не совсем. Это адрес к файлу, который содержит JavaScript-код. Чувствуете разницу? Т. е. этим файлом может быть php-файл с php-кодом, который после обработки сервером выведет некий JavaScript, попутно сохраняя что-то в файлы, создавая cookies, изменяя БД и пр. Фактически программа, создающая новую программу.
Перед ознакомлением со следующим абзацем еще раз прочитайте предыдущий, осознайте о чем идет речь, покурите и возвращайтесь.
Итак, Вы вернулись, значит мы можем продолжить. На повестке дня еще несколько вопросов, но обо всем по порядку. Нам нужно динамически создавать <script> в документе. Отведем для него специальный блок:
<div id="_ajax" style="position: absolute; left: 0; top: 0; visibility: hidden"></div>
Стоит заметить, что нам понадобится передавать параметры php-скрипту, а функции URL-кодирования в JavaScript нет. Значит нужно создать нечто вроде таблицы кодирования (выводится элементарным php-скриптом и немного правится руками):
Дабы не забивать метр статьи, вкладываю файл.
Теперь напишем функцию, которая будет динамически создавать <script>. Функция принимает три параметра: адрес php-файла, массив имен передающихся переменных и массив значений этих переменных. Каждое значение мы будем URL-кодировать.