Главная
Новости
Статьи
Скрипты
Плагины
Сервисы

ГлавнаяСтатьи:

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 в Ваших проектах.

Автор: Станислав Фролов.




1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 4,29 out of 5)
Loading...

7 комментариев на “AJAX или передача данных без перезагрузки”

  1. Александр

    я половину непонял! можете получше расказать плиз

  2. Сергей

    Александр, я думаю тебе стоит почитать инструкцию!

  3. Анатолий

    Здраствуйте люди….кому нужа помощь по написанию AJAX приложений пишите в icq 40-11-603

Оставить комментарий







Авторам:

Популярные статьи:

Web-просмотрщик картинок. Lightbox2 (14)
AJAX скрипт для определения Google Pagerank (13)
Карта кликов вашего сайта. ClickHeat (13)
Анимация загрузки: AjaxLoad (13)
Чекбокс с прозрачностью (10)