Для тех, кто не в курсе. 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 в Ваших проектах.