Изучаем MooTools. Шаг 7 - AJAX
- Содержание
В настоящее время, с развитием Web'а, трудно представить сайт без технологии AJAX. MooTools сделал работу с AJAX еще более простой и приятной. Фреймворк позволяет получать данные в форматах HTML и JSON. Сперва рассмотрим базовый класс Request, его свойства и методы.
var myRequest = new Request([options]);
Опциями могут быть:
- url - адрес запроса.
- method - HTTP метод запроса, может быть 'post' или 'get', по умолчанию, 'post'.
- data - данные для Request:send по умолчанию, может быть использовано, если по запросу Request данные не возвращаются.
- link - поведение при многократных вызовах. По умолчанию используется 'ignore'.
- 'ignore' - все вызовы Request во время запуска запроса игнорируются.
- 'cancel' - текущий запрос будет отменен и выполнится новый запрос.
- 'chain' - следующий вызов начнется по завершению предыдущего.
- async - если установлено в false, браузер не будет реагировать на действия пользователя, пока запрос не выполнится. По умолчанию равно true.
- encoding - кодировка, устанавливается в заголовке запроса. По умолчанию 'utf-8'
- headers - объект, используется для установки заголовков запроса.
- isSuccess - функция, переопределяет стандартную функцию isSuccess.
- evalScripts - если установлено в true, переданные javascript скрипты будут выполнены. По умолачнию true.
- evalResponse - если установлено в true, полученные данные будут выполнены как единый запрос. По умолчанию false.
- emulation - если установлено в true, методы отличные от 'post' и 'get' добавляются в конец post-данных с именем '_method'. По умолчанию true.
- urlEncoded - если установлено в true, заголовок content-type header устанавливается в www-form-urlencoded + encoding. По умолчанию true.
События
onRequest() - выполняется, если запрос отправлен.
onComplete() - выполняется, если запрос завершен.
onCancel() - выполняется, если запрос отменен.
onSuccess(responseText, responseXML) - выполняется, если запрос завершен успешно.
- responseText - возвращаемый текст запроса.
- responseXML - возвращаемый текст ответа на запрос в виде XML, который затем может быть обработан посредством DOM.
onFailure() - выполняется, если запрос не был завершен.
onException(headerName, value) - выполняется, если установлен заголовок ошибки запроса
- headerName - имя заголовка.
- value - значение.
Методы и свойства
.setHeader()
Добавляет или изменяет заголовок запроса.
var myRequest = new Request({url: 'getData.php', method: 'get', headers: {'X-Request': 'JSON'}});
myRequest.setHeader('Last-Modified','Sat, 1 Jan 2005 05:00:00 GMT');
.getHeader()
Возвращает значение заголовка или null, если заголовок не установлен.
var myRequest = new Request(url, {method: 'get', headers: {'X-Request': 'JSON'}});
var headers = myRequest.getHeader('X-Request'); //возвращает 'JSON'.
.send()
Отправляет форму с HTML запросами. В качестве параметра может быть указан url, на который отправлен отпрос. Если оставить параметр пустым, url будет считан из атрибута action соответствующей формы.
<form id="myForm" action="submit.php"> <p> <input name="email" value="bob@bob.com"> <input name="zipCode" value="90210"> </p> </form>
$('myForm').send();
.cancel()
Отменяет текущий запрос.
var myRequest = new Request({url: 'mypage.html', method: 'get'}).send('some=data');
myRequest.cancel();
Свойство send
Устанавливает или возвращает запрос по умолчанию. Удобно при обработке форм.
myForm.set('send', {url: 'contact.php', method: 'get'});
myForm.send(); //отправляет данные формы
el.get('send', {method: 'get'});
el.send();
el.get('send'); //возвращает полученные данные
Класс Request расширяют Request.HTML и Request.JSON, которые содержат дополнительные методы для получения данных в соответствующих форматах.
Request.HTML
var myHTMLRequest = new Request.HTML([options]);
Опции Request.HTML
Опции такие же, как у класса Request
События Request.HTML
также наслудуются от базового класса, изменено событие onSuccess
onSuccess(responseTree, responseElements, responseHTML, responseJavaScript)
- responseTree - возвращаемый список элементов запроса.
- responseElements - массив со всеми элементами запроса.
- responseHTML - возвращаемый HTML-код запроса.
- responseJavaScript - возвращаемый JavaScript-код запроса.
Примеры
Простой GET запрос:
var myHTMLRequest = new Request.HTML().get('myPage.html');
POST запрос:
var myHTMLRequest = new Request.HTML({url:'myPage.html'}).post("user_id=25&save=true");
Запрос с GET-параметром:
//загружает "load/?user_id=25".
var myHTMLRequest = new Request.HTML({url:'load/'}).get({'user_id': 25});
Другой вариант POST запроса:
<form action="save/" method="post" id="user-form"> <p> Search: <input type="text" name="search" /> Search in description: <input type="checkbox" name="search_description" value="yes" /> <input type="submit" /> </p> </form>
//этот код должен быть в обработчике события submit формы.
var myHTMLRequest = new Request.HTML({url:'save/'}).post($('user-form'));
AJAX в действии
Если Вам нужно отправить запрос по ссылке, добавьте ей следующее событие onclick
item.onclick = function(e){
var container = $('preview'); // элемент container для полученных данных
var loader = $('loader'); // картинка AJAX-loader
new Request.HTML({
url: 'data.html',
onSuccess: function(html) { // запрос выполнен уcпешно
container.set('html', html);
loader.setStyle('display', 'none');
},
onFailure: function() { // ошибка запроса
container.set('html', 'The request failed.');
loader.setStyle('display', 'none');
},
onCancel: function() { // отмена запроса
container.set('html', 'The request calcelled.');
loader.setStyle('display', 'none');
}
}).send();
new Event(e).stop();
}
В следующем примере показана отправка POST данных формы. Таким образом я реализовал возможность просмотра комментариев перед отправкой.
HTML код:
<form action="/some_action" method="post" id="form"> <textarea name="full" cols="90" rows="12" id="article_field">< /textarea> <input type="submit" name="b_preview" value="Отправить" id="b_preview"/> <img src="img/ajax-loader.gif" id="loader" /> </form> <div id="preview"></div>
JavaScript код:
$('form').addEvent('submit', function(e) { // добавляем событие к форме
var container = $('preview'); // элемент container для полученных данных
var loader = $('loader'); // картинка AJAX-loader
new Event(e).stop(); // блокируем открытие страницы, указанной в action
loader.setStyle('display', 'inline');
container.empty(); // подготавливаем container для загрузки
container.setStyle('display', 'block');
this.set('send', { // обработка запроса
onSuccess: function(html) { // запрос выполнен уcпешно
container.set('html', html);
loader.setStyle('display', 'none');
},
onFailure: function() { // ошибка запроса
container.set('html', 'The request failed.');
loader.setStyle('display', 'none');
},
onCancel: function() { // отмена запросаы
container.set('html', 'The request calcelled.');
loader.setStyle('display', 'none');
}
}).send();
});
Request.JSON
var myJSONRemote = new Request.JSON([options]);
Опции Request.JSON
К опциям добавлена secure - если установлена в true, будет осуществлена проверка JSON объекта. По умолачнию true.
События Request.JSON
Также изменено событие onSuccess.
onSuccess(responseJSON, responseText)
- responseJSON - возвращаемый JSON-объект.
- responseText - возвращаемый текст запроса.
Пример
// отправляет GET запрос и выдает сообщения с полученными данными
var jsonRequest = new Request.JSON({
url: "/tellMeAge.php",
onComplete: function(person){
alert(person.age); //сообщение "25 years".
alert(person.height); //сообщение "170 cm".
alert(person.weight); //сообщение "120 kg".
}}).get({'firstName': 'John', 'lastName': 'Doe'});
Понравилась статья? Подпишись на RSS.
Советую почитать:
Изучаем MooTools. Шаг 1 - Введение
Изучаем MooTools. Шаг 2 - Селекторы
Изучаем MooTools. Шаг 3 - Массивы
Изучаем MooTools. Шаг 4 - События
Изучаем MooTools. Шаг 5 - Элементы DOM



Популярные статьи
Последние записи
Разделы


Комментарии
Прошёлся по документации, почитал (MooTools Essentials: The Official MooTools Reference for
JavaScripto and Ajax Development ), но непонял как это работает:
myForm.set('send', {url: 'contact.php', method: 'get'}); myForm.send(); //отправляет данные формы el.get('send', {method: 'get'}); el.send(); el.get('send'); //возвращает полученные данныепомогите разобраться?
ОтветитьЧто касается первой части, я писал об этом в примере. Мы устанавливаем метод 'send' c массивом параметров {url, method, onSuccess, ...} и отправляем запрос:
this.set('send', { // обработка запроса onSuccess: function(html) { // запрос выполнен уcпешно container.set('html', html); loader.setStyle('display', 'none'); }, onFailure: function() { // ошибка запроса container.set('html', 'The request failed.'); loader.setStyle('display', 'none'); }, onCancel: function() { // отмена запросаы container.set('html', 'The request calcelled.'); loader.setStyle('display', 'none'); } }).send();В обработчике события onSuccess мы загружаем полученный html в 'container'.
Напишите, что вам необходимо сделать.
Ответитьизвините, не уточнил свой вопрос, первую часть я отлично понял.
$('myForm').set('send', {url: 'contact.php', method: 'get'}); //устанавливаем свойству send, значения опций {url и method} $('myForm').send(); //отправляет данные формы //а далее что-то непонятное el.get('send', {method: 'get'}); el.send(); el.get('send'); //возвращает полученные данныеА вообще пытаюсь написать валидатор форм (с проверкой данных на стороне сервера, посредством ajax), выбрал MooTools для этих целей.
ОтветитьRay
Если пишете валидацию обратите внимание на этот пример.
Ответитьспасибо, отличная ссылка, и как я пропустил сайт Aaron'а Newton'а. Некоторые поля формы я хочу проверить на сервере
Ответить(через ajax, такие поля, например, как email т.е. зарегистрирован ли такой в базе или нет). Думаю что можно сделать через FormValidator из mootools. Примеры на сайте, похоже, используют несколько модернизированную "Clientcide Libraries", например, у неверных полей не выводятся предопределённые в библиотеке (class="required") сообщения об ошибке (Error: Please enter at least 10 characters (you entered 0 characters) ).