AJAX в примерах

Разработка своих веб-приложений и страничек

AJAX в примерах

Сообщение zk » 18 дек 2007, 23:41

AJAX (от англ. Asynchronous JavaScript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения могут быть сделаны более быстрыми и удобными.
(c) Википедия

Всвязи с удобством этой концепции, решил написать несколько примеров по использованию.
Все примеры подробно комментированы.

Использоваться будет библиотека от dklab - http://dklab.ru/lib/JsHttpRequest/
В архив с библиотекой я добавил инструкцию с сайта - manual.html, в которой довольно подробно всё описано, так же там есть ещё примеры.
JsHttpRequest.zip
(218.31 Кб) Скачиваний: 1331


Для всех примеров считаем что папка lib из архива и все рабочие файлы находится в корневой директории вашего хоста.

Пример 1.
Фотогалерея.
Демо: http://demo.vfose.ru/gal.html

Это простейший скрипт галереи который берет изображения и комментарии из папки и позволяет смотреть их на страничке без перезагрузки.

html часть галереи gal.html:
Код: Выделить всёРазвернуть
<script src="/lib/JsHttpRequest/JsHttpRequest.js"></script>
<script language="JavaScript">
    function change(value) { //Функция для смены картинок
        JsHttpRequest.query( //Упрощённая функция AJAX запроса
            '/gal.php', //Путь к скрипту обработчику
            {
               //Текстовые значения посылаемые скрипту обработчику
               'count': document.getElementById("count").innerHTML, //Счётчик который мы берём из страницы
               'act': value //Направление листания которое передаётся в параметре функции change()
            },
            //Функция вызываемая при получении данных скриптом
            function(result, errors) {

                if (result) { //Если данные получены
                    document.getElementById("count").innerHTML = result["count"]; //Выводим новое значение счётчка
                    document.getElementById("all").innerHTML = result["all"];     //Выводим общее количество картинок
                    document.getElementById("img").src  = result["img"];    //Выводим изображение
                    if (result["comment"] != null) { //Если возвращён не пустой комментарий
                        document.getElementById("comment").innerHTML = result["comment"]; //Выводим его
                        }
                        else {  //Иначе
                                document.getElementById("comment").innerHTML = 'Нет комментария'; //Нет комментария =)
                                }
                }
            },
            true  // Выключено или нет кеширование, для нашего срикпта лучше выключить
        );
    }
</script>

<center>

<a href="#" onclick="change('prev')" id="act">&larr;пред</a>
<span id="count">1</span> из <span id="all"></span>
<a href="#" onclick="change('next')" id="act">след&rarr;</a>

<br /><br />

<div id="comment"></div>

<br />

<img src="" id="img">

<script language="JavaScript">change();</script>

</center>


PHP обработчик gal.php:
Код: Выделить всёРазвернуть
<?php
require_once "./lib/JsHttpRequest/JsHttpRequest.php"//Подключаем библиотеку
$JsHttpRequest =& new JsHttpRequest("windows-1251");  //Инициализируем и указываем кодировку

// Получаем переданные параметры
$act $_REQUEST['act']; //Направление листания
$i $_REQUEST['count']; //Текущий номер картинки


if ($act == 'next') { //Если следующая картинка, увеличиваем номер картинки
            
$i++;
        }
if (
$act == 'prev') { //Если предыдущая - уменьшаем
        
$i--;
        }

$dir "./gal/";  //Относительный путь к директории с картинками и комментариями

$dh opendir($dir); //Открываем директорию
        
while (($file readdir($dh)) !== false) { //Читаем директорию
                
if (filetype($dir $file) != 'dir' && substr($filestrlen($file)-3) != 'txt') { //Если прочтённый файл не директория и не txt
                                
$images[++$j] = $file//Записываем его в массив и заодно считаем картинки
          
}
                }

if (
$i $j) { $i=1; }  //Если следующий номер картинки больше количества картинок - сбрасываем его на 1й
if ($i == 0) { $i=$j; } //Если предыдущий равен 0, сбрасываем его на последний

$f_comm $dir.substr($images[$i], 0strlen($images[$i])-3).'txt'//Определяем имя файла с коментарием
if ( file_exists($f_comm) ) { //Если файл существует
                
$comm file_get_contents($f_comm); //Считываем его содержимое в переменную
                
}

$img "/gal/$images[$i]";

//Возврат
$GLOBALS['_RESULT'] = array(
      
"img"   => $img,
      
"count" => $i,
          
"all" => $j,
          
"comment" => $comm
    
);

?>


Изображения галереи должны находится в папке gal
Комментарий к изображению, это файл с названием как изображение, только с расширением txt

Пример 2.
Загрузка файлов.
Демо: http://demo.vfose.ru/upl.html

В этом примере я покажу как загружать файлы на сервер с помощью этой библиотеки. Кроме того реализован простейший указатель загрузки файла.

Наверное вы уже догадались, что в концепции AJAX гораздо сложнее сделать клиентскую часть, т.к. она требует хорошего знания JavaScript для построения интерфейса. Серверная же часть, отличается простотой и сводится к обычной обработке данных.

Данный пример можно объеденить с примером 1, именно для этого комментарии сделаны с поддержкой 3х буквенных расширений файлов, и получится одностраничная галерея, но я приведу его отдельно.

html часть upl.html:
Код: Выделить всёРазвернуть
<script src="/lib/JsHttpRequest/JsHttpRequest.js"></script>
<script language="JavaScript">
    function upl() { //Функция для закачки файлов
        document.getElementById("btn_id").disabled = true; //Выключаем кнопку на время загрузки
        document.getElementById("progr_bar").style.visibility = 'visible'; //Включаем прогресс

        JsHttpRequest.query( //Упрощённая функция AJAX запроса
            '/upl.php', //Путь к скрипту обработчику
            {
               //Значения посылаемые скрипту обработчику
               'upl_file': document.getElementById("f_upl"), //Собственно файл
               'comm': document.getElementById("comm").value //Комментарий который мы берём из формы
            },
            //Функция вызываемая при получении данных скриптом
            function(result, errors) {

                if (result) { //Если данные получены

                    document.getElementById("progr_bar").style.visibility = 'hidden'; //Выключаем прогресс
                    document.getElementById("res").innerHTML = result["all"];     //Выводим общий результат операции
                    document.getElementById("comm").value = '';                  //Очищаем комментарий
                    document.getElementById("f_upl").value = '';                  //Очищаем файл в форме
                    document.getElementById("btn_id").disabled = false;           //Включаем кнопку

                }
            },
            true  // Выключено или нет кеширование, для нашего срикпта лучше выключить
        );
    }
</script>

<center>

<form method="post" enctype="multipart/form-data" onsubmit="return false" id="f_form">
    Файл: <input type="file" name="upl_file" id="f_upl" onclick="document.getElementById('res').innerHTML = ''">
    Текст комментария: <input type="text" id="comm" value="">
    <button id="btn_id" name="btn_id" onclick="upl()">Закачать</button>
</form>
<div id="progr_bar" style="visibility: hidden"><img src="progress.gif" border="0"> Закачка файла...</div>
<span id="res"></span>


</center>


PHP обработчик upl.php
Код: Выделить всёРазвернуть
<?php
require_once "./lib/JsHttpRequest/JsHttpRequest.php"//Подключаем библиотеку
$JsHttpRequest =& new JsHttpRequest("windows-1251");  //Иниацилизируем и указываем кодировку

// Получаем переданные параметры
$comm $_REQUEST['comm']; //Комментарий к файлу
$upl_file = @$_FILES['upl_file']; //Файл

$uploaddir './upl/';  //Папка для хранения закаченных файлов
$mfilesize '3000000'//Максимальный размер файла в байтах


if (@$upl_file['tmp_name']) {   //Если файл закачался
        
if ($upl_file[size] < $mfilesize) { //Если размер файла меньше максимального
          
$uploadfile $uploaddir basename($upl_file['name']);  //Определяем полный путь для файла
          
move_uploaded_file($upl_file['tmp_name'], $uploadfile);  //Перемещаем в папку
          
if ($comm != '') { //Если есть каммент
            
$f_comm substr($upl_file['name'], 0strlen($images[$i])-3).'txt'//Определяем имя файла каммента
            
fwrite(fopen$uploaddir.$f_comm'wb'), $comm); //Создаём файл коммента =))) Аналог file_put_contents =))
                   
}
          
$res "Загружен $upl_file[name] размером $upl_file[size] байт"//Заполняем сообщение
          
} else {  //Файл больше максимального размера
                  
$res "Ошибка. Размер файла не должен превышать $mfilesize байт."//Формируем сообщение об ошибке
                  
}
    } else {  
//Файл не закачался
             
$res 'Ошибка загрузки файла.';  //Формируем сообщение об ошибке
            
}


//Возвращаем значение статуса
$GLOBALS['_RESULT'] = array(
      
"all"   => $res
    
);

?>




Продолжение следует...

(с) zk
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

Re: AJAX в примерах

Сообщение zk » 22 дек 2007, 04:24

Добавлен ещё один пример.

Если есть вопросы или предложения - задавайте.

И кстати ищется хороший справочник по JavaScript.
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

Re: AJAX в примерах

Сообщение PUNKER » 24 дек 2007, 13:23

Очень похоже на js c Html! :D :geek:
PUNKER
Участник
 
Сообщения: 30
Зарегистрирован: 30 сен 2007, 17:46
Домен: punker.vfose.ru

Re: AJAX в примерах

Сообщение DPX-Infinity » 24 дек 2007, 14:45

PUNKER писал(а):Очень похоже на js c Html! :D :geek:

вообщето это и есть джаваскрипт+html, если что :)
Изображение
Переходите на Jabber! За ним будущее!
Желаю вам опенсорса!
Аватара пользователя
DPX-Infinity
Активный участник
 
Сообщения: 723
Зарегистрирован: 02 сен 2007, 20:45
Откуда: Саратов

Re: AJAX в примерах

Сообщение biz » 25 дек 2007, 01:44

Что нужно изменить(добавить) в код, чтобы ограничить загрузку файлов только изображениями (jpg, gif и т.д.) и по размеру (50*350 к примеру) ???
Аватара пользователя
biz

 
Сообщения: 4
Зарегистрирован: 16 ноя 2007, 19:56

Re: AJAX в примерах

Сообщение zk » 25 дек 2007, 01:55

Что нужно изменить(добавить) в код...

Для ограничения типа - проверяй последние 3 символа в имени файла, а для проверки размеров картинок используй библиотеку GD - http://php.hsdn.org/gd

З.Ы. Прошу всех в этой теме задавать вопросы только связанные с AJAX! Для обсуждения PHP можно создать другие темы или использовать существующие!
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

Re: AJAX в примерах

Сообщение nE0sIghT » 26 дек 2007, 12:37

При реализации чего-либо с Аяксом еще больше уделяйте внимания безопасности.
К примеру второй пример позволяет закачивать .php файлы - легко можно закачать php шелл. Для предотвращения этого можно использовать проверку по расширениям файлов (strpos и substr в помощь)
Не используйте глобальных переменных, любые переменные, которые будете использовать в коде сначала ИНИЦИАЛИЗИРУЙТЕ начальным значением, используйте isset, intval, addslashes

zk писал(а):И кстати ищется хороший справочник по JavaScript.

Вот тоже искал хороший справочник - из того, что нашел остановился на этом
ИзображениеИзображение
Аватара пользователя
nE0sIghT
Начинающий участник
 
Сообщения: 14
Зарегистрирован: 25 сен 2007, 16:10
Откуда: Млечный путь,7-ой рукав,YD AC-451,3-я планета,восточное полу
Домен: miranda-im.vfose.ru

Re: AJAX в примерах

Сообщение zk » 26 дек 2007, 22:14

2nE0sIghT,
Это всего лишь пример использования концепции AJAX, и эти скрипты, конечно же, перед использованием нужно доработать под конкретную задачу.
За замечания и справочник - спасибо.

З.Ы. Очень понравились вариации на тему "Как бы я назвал папку аплоад" :D
zk
Администратор
 
Сообщения: 1971
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

Re: AJAX в примерах

Сообщение nE0sIghT » 27 дек 2007, 16:16

Справочник временно выложу здесь

zk писал(а):З.Ы. Очень понравились вариации на тему "Как бы я назвал папку аплоад" :D

Профессиональная привычка ;-)
ИзображениеИзображение
Аватара пользователя
nE0sIghT
Начинающий участник
 
Сообщения: 14
Зарегистрирован: 25 сен 2007, 16:10
Откуда: Млечный путь,7-ой рукав,YD AC-451,3-я планета,восточное полу
Домен: miranda-im.vfose.ru

Re: AJAX в примерах

Сообщение P.D. » 27 янв 2008, 01:00

nE0sIghT писал(а):Не используйте глобальных переменных

По-хорошему, регистрацию глобальных переменных php вообще надо отключать в настройках мода php. Это, конечно, если веб-сервер ваш :)

По поводу книг, часто пользуюсь сам http://www.w3schools.com/, там много и вводных статей по html, css, php, javascript, html dom, xml, ajax и т.п. Оффлайновой версии, правда, нету.
P.D.

 
Сообщения: 1
Зарегистрирован: 27 янв 2008, 00:55

След.

Вернуться в PHP, HTML, CSS...

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 30