Автор: Фролов Станислав
Источник:
http://www.webfashion.ws/
Для тех, кто не в курсе. AJAX - идея, предложенная одним человеком в 2005
году. Суть ее сводится к следующему: осуществлять передачу данных (т.е. общение
клиента с сервером) без фактической перезагрузки 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-кодировать.
function LoadScript(addr,query,str){
//составление строки запроса
for(k=0;k<str.length;k++){
str2="";
//URL-кодируем (что такое chr смотрим во вложенном файле)
for(j=0;j<str[k].length;j++)str2+='%'+chr[str[k].charAt(j)];
//добавляем к концу запроса "переменная=значение"
addr+=query[k]+"="+str2;
}
/*
_ajax - идентификатор div-блока, кто забыл.
Немного пляшем с бубном:
Писать в HTML только <script></script> нельзя - IE ругается,
поэтому добавляем любую строчку, например "MSIE...".
Также нельзя одной строкой написать "</script>",
разбиваем на две строки.
*/
_ajax.innerHTML="MSIE...<script></"+"script>";
/*
даем JavaScript 10 мсек на осознание того, что _ajax изменен
и назначаем атрибут src.
*/
setTimeout(function(){
scr=_ajax.getElementsByTagName("script")[0];
scr.language="javascript";
if(scr.setAttribute)scr.setAttribute("src",addr);else scr.src=addr;
},10);
}
Теперь, чтобы выполнить запрос index.php?action=view&id=49, нужно
вызвать функцию LoadScript() следующим образом:
LoadScript("index.php",Array("?action","&id"),Array("view","49"));
Для выполнения скрипта без параметров следует передать функции
LoadScript() его адрес и два пустых массива.
Вы спросите, как выдать некий результат из php-скрипта? В документе, из
которого запускаем LoadScript(), создаем блок
<div id="_hz"></div>
А в php-скрипте пишем
echo<<<a
_hz.innerHTML="работает!!!";
a;
И теперь остается еще один маленький вопросик. Дело в том, что все
скрипты, вызывающиеся как <script src="address"></script>
кэшируются браузером. Чтобы этого избежать, каждый php-скрипт начинаем с четырех
строк:
Header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
Header("Cache-Control: no-cache, must-revalidate");
Header("Pragma: no-cache");
Header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
На этом разрешите попрощаться и пожелать успешной реализации AJAX в
Ваших проектах.
|
