Быстрый способ начать использовать AJAX-эффекты

09 мая 2007

script.aculo.us Комплекс скриптов, позволяющий заполнять формы и изменять содержимое страниц, не обновляя их, стал символом концепции Web 2.0. Кто-то даже назвал AJAX “наконец заработавшим JavaScript”. Для тех, кто хочет начать использовать его на своих сайтах, я сейчас объясню как это сделать на простейшем примере. Это, конечно, не руководство, но направление и дальнейшие источники информации я покажу.
Итак, первое, что нужно сделать, это скачать script.aculo.us (146 Кб), и распаковать его. В дистрибутиве есть каталог с примерами – он потом может пригодиться. А js-файлы из каталогов lib и src можно положить в какой-нибудь отдельный каталог на вашем сайте для более удобного использования.
Попробуем использовать эти скрипты на простом примере – редактирование текста пользователем без перезагрузки страницы. Создадим пустую html-странцу. Пропишем в ней подключение необходимых скриптов из скачанного дистрибутива:

<script src=”/prototype.js” type=”text/javascript”></script>
<script src=”/scriptaculous.js” type=”text/javascript”></script>

Проверить работу AJAX уже можно, например, вставьте следующий код в страницу, откройте её и кликните мышкой по тектсту:

<div onclick=”new Effect.SwitchOff(this)”>
Исчезающий текст.
</div>

Если не работает – проверьте пути скриптов. Если работает, то продолжим – создадим сам изменяемый текстовый элемент:

<p id=”editme”>Этот будет изменяться</p>
<script type=”text/javascript”>
new Ajax.InPlaceEditor ( ‘editme’, ‘/return.php’, { callback: function (form, value) { return ‘myparam=’ + escape(value) }})
</script>

В этом коде мы сначала добавляем изменяемый текст с ID, по которому его определит скрипт, а потом вызываем метод Ajax.InPlaceEditor, передавая ему ID редактируемого текста (editme), адрес программы-обработчика, которая примет и сохранит изменения и определяем способ передачи этой программе данных (в данном случае – через POST-переменную myparam).
В качестве скрипта для сохранения информации можно использовать программу на любом доступном языке программирования – от ASP до PHP или Ruby. Её задача – получить параметры, сохранить, и обязательно вернуть, что бы изменённый текст сохранился на странице. Как сохранить данные можно узнать в руководстве по соответствующему языку программирования. В качестве примера я просто получу данные и верну их с помощью PHP.

<?php
Echo $_POST[‘myparam’];
?>

Скрипт готов, ему уже можно найти применение.
Ответы на частозадаваемые вопросы по script.aculo.us можно найте в его официальном FAQ.

Полное описание работы и использования всех методов можно найти в Scriptaculous wiki.






 

Ronder     .

Написано 13 мая 2008 года в 16:53


У меня когда меняшь текст в input поле и жмёшь кнопку ok вылетает ошибка: Обнаружена недопустимая кодировка при попытке декодирования URI и скрипт return.php ничего не передаётся :-(
В чём может быть дело?

 

Жилинcкий Владимир     .

Написано 13 мая 2008 года в 16:57


Скорее всего, действительно в кодировке. Советую в качестве программы для создания и правки файлов использовать Notepad++ (npp) под Windows или Gedit под Linux – там нет проблем блокнота и прочих дримвиверов.

 

Ronder     .

Написано 13 мая 2008 года в 18:29


Попробовал Notepad++ тоже самое :-(
Ошибка кодировки :-(

 

Жилинcкий Владимир     .

Написано 13 мая 2008 года в 18:35


Проверь во всех файлах кодировку npp и сравни. Да, в браузере при вводе в форму кодировка выставляется в ту, которая прописана в заголовках. так что там тоже нужно её прописать (в мета-теге).
Лучше всего сразу выставить везде UTF-8 w\o BOM и не мучаться.

 

Likino     .

Написано 1 июня 2008 года в 15:47


Интересно и по сути.

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

You must be logged in to post a comment.

© 2007-2010 Блог интернет-разработчика, автор — Zhilinsky.ru.
При использовании информации ссылка на источник обязательна.