Для тех, кто не в курсе. AJAX - идея, предложенная одним человеком в 2005 году. Суть ее сводится к следующему: осуществлять передачу данных (т.е. общение клиента с сервером) без фактической перезагрузки web-страницы. Есть несколько реализаций этой идеи, данная статья раскажет о моей. При этом я не утверждаю, что ее не было до меня. Если была - я о ней не знал (на момент написания сего).
Для начала предлагаю определить, какие плюсы мы получаем, делая AJAX-скрипты.
1. Мы экономим трафик как посетителя, так и свой собственный (у нас ведь платный хостинг и за МБ мы платим :) ).
2. Мы экономим время посетителя.
3. Мы облегчаем жизнь серверу - ему не приходится передавать каждый раз кучу "лишнего" HTML-кода.
4. В глазах посетителя мы превращаем свой сайт в системную программу. Он жмет на кнопку и практически тут же видит результат.
Из личной практики:
К примеру, раньше на WebFashion пользователь, чтобы выйти (очистить cookies), жал на "выход", ждал перезагрузки и, убедившись, что для системы он Гость, уходил с сайта. Теперь, он жмет "выход" и через мгновение видит изменение своего статуса (меняется верхнее навигационное меню).
Я думаю, уже не осталось сомнений, что AJAX имеет право на существование на Вашем сайте. Остается только вопрос, как же реализовать идею на практике. Сразу скажу, есть несколько больших и громоздких скриптов, мне они не понравились и я решил написать свой собственный скрипт.
Итак, как же динамически осуществить запрос к серверу и главное получить от него вразуметельный ответ? Я надеюсь, все знают о существовании тэга . Если не знаете, дальше можно не читать. Так вот, у него есть замечательный атрибут src. Значение этого атрибута - адрес к JavaScript-файлу, спросите Вы? Не совсем. Это адрес к файлу, который содержит JavaScript-код. Чувствуете разницу? Т.е. этим файлом может быть php-файл с php-кодом, который после обработки сервером выведет некий JavaScript, попутно сохраняя что-то в файлы, создавая cookies, изменяя БД и пр. Фактически программа, создающая новую программу.
Перед ознакомлением со следующим абзацем еще раз прочитайте предыдущий, осознайте о чем идет речь, покурите и возвращайтесь.
Итак, Вы вернулись, значит мы можем продолжить. На повестке дня еще несколько вопросов, но обо всем по порядку. Нам нужно динамически создавать в документе. Отведем для него специальный блок:
Стоит заметить, что нам понадобится передавать параметры php-скрипту, а функции URL-кодирования в JavaScript нет. Значит нужно создать нечто вроде таблицы кодирования (выводится элементарным php-скриптом и немного правится руками):
Дабы не забивать метр статьи, вкладываю файл.
Теперь напишем функцию, которая будет динамически создавать . Функция принимает три параметра: адрес php-файла, массив имен передающихся переменных и массив значений этих переменных. Каждое значение мы будем URL-кодировать.
function LoadScript(addr,query,str){
//составление строки запроса
for(k=0;k<str.length;k++){
str2="";
//URL-кодируем (что такое chr смотрим во вложенном файле)
for(j=0;jstr2;
}
/*
_ajax - идентификатор div-блока, кто забыл.
Немного пляшем с бубном:
Писать в HTML только нельзя - IE ругается,
поэтому добавляем любую строчку, например "MSIE...".
Также нельзя одной строкой написать "",
разбиваем на две строки.
*/
_ajax.innerHTML="MSIE...";
/*
даем 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(), создаем блок.
А в php-скрипте пишем
echo<<<a
_hz.innerHTML="работает!!!";
a;
И теперь остается еще один маленький вопросик. Дело в том, что все скрипты, вызывающиеся как кэшируются браузером. Чтобы этого избежать, каждый 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 в Ваших проектах.
Станислав Фролов