В настоящее время, с развитием 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'});

Документация

Имя

Электронная почта

Сайт