AJAX или передача данных без перезагрузки

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




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка