(c) Википедия
Всвязи с удобством этой концепции, решил написать несколько примеров по использованию.
Все примеры подробно комментированы.
Использоваться будет библиотека от dklab - http://dklab.ru/lib/JsHttpRequest/
В архив с библиотекой я добавил инструкцию с сайта - manual.html, в которой довольно подробно всё описано, так же там есть ещё примеры.
JsHttpRequest.zip- (218.31 Кб) Скачиваний: 1397
Для всех примеров считаем что папка 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">←пред</a>
<span id="count">1</span> из <span id="all"></span>
<a href="#" onclick="change('next')" id="act">след→</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($file, strlen($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], 0, strlen($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'], 0, strlen($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
