Краткое введение в prototype

Автор: Константин

2 Авг

По просьбам читателей - что такое prototype? Библиотека (фреймворк) prototype позволяет вам легко, быстро и безопасно совершать AJAX запросы и не только. Библиотека расширяет методы DOM (Data Object Model), упрощая их использование. А самое главное то, что авторы библиотеки уже позаботились о браузеро-независимости (cross-browser), и нам достается всё самое сладкое!

Для примера исследования нескольких элементарных методов prototype, возьмем наипростейшую типичную AJAX задачу - переключение разделов без перезагрузки страницы.

Пример: http://logicerror.pp.ru/upload/prototype_intro

Начнем издалека - создадим три странички в текстовом формате, между которыми мы будем переключать.

Контент

Не суть важно, что мы будем выводить, но для примера показываю первую страницу (file1.txt)

<img src="images/accept.png" align="right">
<h1>Первая страница</h1>
Наверное матёрым программистам на Ruby on Rails это не понадобится, но новичкам будет очень интересно. Недавно появился новый стартап Heroku.com, который позволяет писать код и хостить Rails сайты. Самое интересное, что писать код можно прямо в браузере. И не только писать код. В браузере можно запускать консоль, устанавливать плагины и gems, запускать migrations и тд. А если не хочешь работать в браузере - установи Git и работай локально (на Windows настроить сложно, но на Маке или Linux без проблем).
 
Heroku использует для хостинга Amazon EC2. Это означает, что если твой сайт станет популярным и ему понадобится больше ресурсов - одним кликом можно добавить несколько серверов Amazon в свой кластер.
<br><br>
<a href="#" onClick="changeMain(2); return">далее</a>

Обычный HTML код, с картинкой, заголовком и ссылкой. Обратите внимание на ссылку - она вызывает функцию changeMain с параметром 2. Эту функцию мы рассмотрим позднее - она у нас будет переключать на вторую (т.е. следующую) страницу.

Создайте еще два таких файла с другим контентом под названием file2.txt и file3.txt. Если вы пишите по русски, то сохраняйте файлы в кодировке UTF-8.

Выдача контента

Выдавать контент мы будем php скриптом в зависимости от того, что пришло нам в качестве параметров метода GET.

<?php
  $i = @$_GET["page"];
  switch($i)
  {
    case "1": echo file_get_contents("file1.txt"); break;
    case "2": echo file_get_contents("file2.txt"); break;
    case "3": echo file_get_contents("file3.txt"); break;
    default: echo "Страница не найдена";
  }
?>

Здесь всё просто. Читаем GET параметр page, и в зависимости от него, выдаем ранее созданные нами текстовые файлы. “Собака” перед запросом на параметр (@$_GET["page"]) подавляет вывод ошибки в случае отсутствия параметра, а переменной i в таком случае присвоится 0, следовательно вывод будет - “Страница не найдена”. Функция file_get_contents() выводит файл целиком.

Сохраним скрипт под именем getpage.php, а вызывать мы будем его таким образом: getpage.php?page=1, getpage.php?page=2, getpage.php?page=3.

Javascript

Для начала рекомендую скачать библиотеку prototype: http://prototypejs.org/download.

<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function changeMain(v) {
  $('main').hide();
  $('loading').show();
  new Ajax.Updater('main', 'getpage.php', 
    { method: 'get', 
      parameters: { page: v }, 
      onComplete: function () { 
        $('loading').hide();
        $('main').show();
      } 
    }
  );
}
</script>
</head>
<body onLoad="changeMain(1);">
<div id="container">
<a href="#" onclick="changeMain(1); return false;">первая</a>
<a href="#" onclick="changeMain(2); return false;">вторая</a>
<a href="#" onclick="changeMain(3); return false;">третья</a>
<div id="main"></div>
<div id="loading" style="display: none"><img src="images/ajax_load.gif" align="left"> загрузка...</div>
</div>
</body>
</html>

Первым делом подключаем библиотеку prototype. Следом пишем нашу функцию для запроса и выдачи контента. В качестве параметра v мы будем принимать номер требуемой страницы. Тут вроде всё понятно должно быть… Далее, мы прячем наш главный div и показываем “загрузку”. Тут может возникнуть вопрос.. Откуда все эти функции?

Функция $() - один из нескольких методов расширения DOM. Выполняет она в точности то же самое что и document.getElementById(). А функции hide() и show() так же являются функциями библиотеки prototype - они выполняют в точности то же самое, что и .style.display = ‘none’; и .style.display = ‘block’; То есть эти две строки можно было написать так:

document.getElementById('main').style.display = 'none';
document.getElementById('loading').style.display = 'block';

Существуют и другие интересные prototype функции, как $$(), $F(), $A() и прочее, но в данном случае, они нам не пригодятся.

Вернемся к нашему коду и рассмотрим сам AJAX запрос:

  new Ajax.Updater('main', 'getpage.php', 
    { method: 'get', 
      parameters: { page: v }, 
      onComplete: function () { 
        $('loading').hide();
        $('main').show();
      } 
    }
  );

Таким образом в prototype формируется AJAX запрос на обновление (Updater). В двух словах, запрос Updater помещает в выбранный нами объект (в нашем случае main) полученные в результате запроса данные.

Первый аргумент функции Updater - id объекта куда мы будем помещать полученные данные (main). Второй - ресурс, куда мы будем обращаться. Третий аргумент - набор параметров запроса. Сюда входят: method, parameters, onSuccess, onFailure, и другие. Мы будем пользоваться первыми тремя параметрами. method - метод запроса, по умолчанию POST, но в нашем случае нет необходимости, поэтому GET. parameters - передаваемые ресурсу параметры. Формируются в виде { param1: value1, param2: value2 } - т.е. { page: v }, где v - номер требуемой страницы (getpage.php?page=1, помните?). Третий параметр, onComplete - привязка “слушателя” на событие Complete (готово). В данном случае мы привязываем новую функцию, которая будет прятать div загрузки и показывать главный.

Ну вот собственно и всё. Далее в событии onLoad (при загрузке) объекта body, мы вызываем функцию changeMain(1), чтобы при открытии главной страници, нам показали первую “подстраницу”. Далее div container - просто div-держатель, который можно как-либо оформить. Три ссылки, каждая соответственно меняет подстраницу (не забудьте про return false!). Далее идет наш главный div, куда будет помещаться контент, и скрытый div загрузки, который будем показывать пока идёт загрузка.

images/ajax_load.gif - модная картиночка загрузки в стиле ajax - их можно сгенерировать здесь: www.ajaxload.info.

Что дальше?

Вы научились переключать между контентом не перезагружая всю страницу. Далее советую побаловаться с оформлением. Попробуйте в стиле “табов” или может быть плавующее меню - включите вооброжение! ;) Переключать контент ссылками в самом контенте вы тоже уже умеете - дерзайте!