• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3426 подписчиков
• наш твиттер
  426 фолловеров

Mootools для начинающих, урок №3

1 мая 2009, 14:30 Павел Марковнин JavaScript рейтинг 25

Привет!

Всех с праздником (кстати, что за праздник-то?) и, самое главное, лишним выходным ;-) Сегодня мы продолжим знакомство с фреймворком Mootools. Напомню, что мы уже успели рассмотреть работу с DOM, селекторы, привязку событий и что-то еще между делом.

В этот же раз мы рассмотрим то, ради чего большинство людей и используют JS-фреймворки — да, вы угадали, это AJAX.

Кратко про AJAX

Этот параграф для тех, кто мог до этого не знать, что же такое AJAX. Как говорит нам Википедия, это «асинхронный JavaScript и XML».  Асинхронность выражается в добавлении каких-то данных на страницу без ее перезагружки. Сама задача подгрузки контента реализуется джаваскриптом тремя способами:

• объект XMLHttpRequest;
• динамичное создание фреймов;
• динамичное создание тегов <script>.

Два последних способа, конечно, имеют свои плюс, но в большинстве случаев использование объекта намного удобнее и разумнее.

Реализация на Mootools

Все строится на основе объекта Request — он является «оболочкой» объекта XMLHttpRequest. У этого объекта довольно много опций, так что мы будем по ходу дела что-то из них рассматривать. У этого объекта так же есть события — чаще всего вы будете использовать onSuccess и onFailure.

В общем, давайте рассмтрим что-нибудь на примере. Скажем, у вас есть ссылка, нужно при клике на нее послать запрос на сервер по адресу, который указан в href ссылки. Это можно сделать так:

<a href="http://yandex.ru/" id="my-link">Яндекс</a>
 <script type="text/javascript">
 window.addEvent('domready', function() {
       $('my-link').addEvent('click', function(e) {
           e = new Event(e); e.preventDefault(); // блокируем стандартное действие при клике
           // создаем объект запроса
           var r = new Request({
              method: 'get', // GET запрос
              url: this.href // адрес запроса берем из адреса ссылки
           });
           r.send(); // отправляем запроса
       });
 });
 </script>

Это был самый простой пример. А теперь допустим, что в случае успешной отправки запроса, нам нужно показать юзеру ту информацию, которую вернул запрашиваемый скрипт, в противном случае — сказать, что что-то не так.

<a href="http://yandex.ru/" id="my-link">Яндекс</a> 
<script type="text/javascript"> 
window.addEvent('domready', function() {
    $('my-link').addEvent('click', function(e) {
        e = new Event(e); e.preventDefault(); // блокируем стандартное действие при клике
        // создаем объект запроса
        var r = new Request({
            method: 'get', // GET запрос
            url: this.href // адрес запроса берем из адреса ссылки
             onSuccess: function(responseText) { // это мы делаем, когда все ок
                  alert(responseText); // показываем текст ответа
             },
             onFailure: function() { // если все плохо
                  alert('К сожалению, сервер упал и ничего не работает :('); 
            }
        });
         r.send(); // отправляем запрос
    });
}); 
</script>

Вот, уже что-то полезное сделать сможем. Кстати сказать, как-то так у нас сделано голосование за статьи, но только реализация на jQuery.

Теперь предлагаю рассмотреть вариант с отправкой формы. В предыдущих примерах мы уже использовали функцию send() для отправки запроса. А для того, чтобы просто отослать форму без перезагрузки страницы достачно сделать вот так:

<form id="my-form" ... > ... </form> 
<script type="text/javascript"> 
... 
$('my-form').send(); // и форма ушла ;-) 
... 
</script>

Но таких простых случаев практически никогда не бывает, чаще приходиться как-то изменять данные формы перед отправкой.

<form id="my-form" ... > ... </form>
<script type="text/javascript">
var f = $('my-form');
f.set('send', {
    url: 'custom-url.php',
    onSuccess: function(responseText) {
        alert('Cервер отвечает: ' + responseText);    
    } 
});
</script>

Заметили, что все параметры, которые мы указывали для объекта Request, теперь указываем как параметры send();

Думаю, многие спросят, а как же сделать все эти клевые крутящиеся статусы загрузки? Все очень просто. У объекта Request есть события onRequest (запрос начался) и onComplete (кончился) — с помощь первого показываем загрузчик, с помощью второго скрываем.

Заключение

Ну что ж, сегодня мы посмотрели, как делать AJAX на Mootools. Хотелось бы заметить, что Mootools сам не умеет загружать файлы на сервер — то есть не пытайтесь с помощью приведенных выше техник отправить файл, ничего не выйдет. Самый лучший способ залить файл на сервер с помощью Mootools это плагин FancyUpload, про который Жека упоминал в статье про загрузчики файлов. Да, он использует флеш (как свяжующее звено клиента и сервера), но зато он поддерживает очереди, может показать кучу данных о процессе загрузки и, что самое главное, его можно до неузнаваемости изменить стилями.

Как всегда тешу себя мыслью, что статья вам чем-то помогла ;-) Вопросы, пожелания, уточнения — в комментарии.

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•