Изучаем MooTools. Шаг 7 - AJAX

• Содержание

var myRequest = new Request([options]);

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');

var myRequest = new Request(url, {method: 'get', headers: {'X-Request': 'JSON'}});
var headers = myRequest.getHeader('X-Request'); //возвращает 'JSON'.

<form id="myForm" action="submit.php">
	<p>
		<input name="email" value="bob@bob.com">
		<input name="zipCode" value="90210">
	</p>
</form>

$('myForm').send();

var myRequest = new Request({url: 'mypage.html', method: 'get'}).send('some=data');
myRequest.cancel();

myForm.set('send', {url: 'contact.php', method: 'get'});
myForm.send(); //отправляет данные формы

el.get('send', {method: 'get'});
el.send();
el.get('send'); //возвращает полученные данные

var myHTMLRequest = new Request.HTML([options]);

var myHTMLRequest = new Request.HTML().get('myPage.html');

var myHTMLRequest = new Request.HTML({url:'myPage.html'}).post("user_id=25&save=true");

//загружает "load/?user_id=25".
var myHTMLRequest = new Request.HTML({url:'load/'}).get({'user_id': 25});

<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'));

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();
}

<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>

$('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();
});

var myJSONRemote = new Request.JSON([options]);

// отправляет 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. Ключевое слово this
Построение дерева в Mootools
MooTools 1.2.3 - Релиз
MooTools. Переход от 1.11 к 1.2
Изучаем MooTools. Шаг 5 - Элементы DOM

Теги: mootools ajax, ajax mootools, each oncomplite mootools, изучаем ajax, form mootools, new request.json

MooTools. Переход от 1.11 к 1.2 MooTools 1.2.3 - Релиз

Комментарии

• 	Ray написал 27 апреля 2009 года Прошёлся по документации, почитал (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'); //возвращает полученные данные помогите разобраться? Ответить

• 	Александр написал 27 апреля 2009 года Что касается первой части, я писал об этом в примере. Мы устанавливаем метод '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'. Напишите, что вам необходимо сделать. Ответить

• 	Ray написал 27 апреля 2009 года извините, не уточнил свой вопрос, первую часть я отлично понял. $('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 для этих целей. Ответить

• 	Александр написал 28 апреля 2009 года Ray Если пишете валидацию обратите внимание на этот пример. Ответить

• 	Ray написал 29 апреля 2009 года спасибо, отличная ссылка, и как я пропустил сайт Aaron'а Newton'а. Некоторые поля формы я хочу проверить на сервере (через ajax, такие поля, например, как email т.е. зарегистрирован ли такой в базе или нет). Думаю что можно сделать через FormValidator из mootools. Примеры на сайте, похоже, используют несколько модернизированную "Clientcide Libraries", например, у неверных полей не выводятся предопределённые в библиотеке (class="required") сообщения об ошибке (Error: Please enter at least 10 characters (you entered 0 characters) ). Ответить

• 	geolog написал 18 августа 2010 года Я столкнулся проблемой,  когда залил пример с сайта mootools.net Form.Send на хостинг обнаружил что IE8 выдаёт ошибку: "Строка: 313 Ошибка: Не удалось завершить действие.  Ошибка c00ce56e." Остальные браузеры работают нормально. Заливал на nichost. Попробовал залить на masterhost - там всё работает нормально. Т.Е. получается это зависит от настроек хостинга, но вот каких настроек? Кто чем может помогите? вот ссылка на masterhost: http://kiora.ru/1/index.html вот ссылка на nichost: http://gazeta-mm.ru/1/index.html Ответить

• 	Александр написал 18 августа 2010 года Проверить не могу..Попробуйте заменить e.stop(); на e && e.stop(); Ну и версию Mootools обновите на последнюю (1.2.4) Ответить

• 	geolog написал 19 августа 2010 года Попробовал ваши рекомендации не помогло. Поискал в яндексе по коду ошибки и наткнулся на статью http://denvor.ru/blog/ajax_ie_c00ce56e.htm в ней то и нашёл решение проблемы. B самом начале серверного скрипта Ajax принудительно указать кодировку: header('Content-type: text/html; charset=utf-8'); Спасибо за помощь. Ответить

• 	Александр написал 19 августа 2010 года Ясно, хорошо что нашли ошибку. Давно уже перешел исключительно на utf-8, иначе много проблем на перекодировку. Кстати, наличие события рекомендую проверять всегда, когда оно перехватывается (e && e.stop()) Ответить

• 	ErgallM написал 11 сентября 2010 года А как тепеть отправить формы по обычному через .submit(); у меня у формы, просто напросто пропало такое событие( что делать? Ответить

• 	Александр написал 12 сентября 2010 года Выложил еще примеры, надеюсь вы там найдете ответ на вопрос. Ответить

• 	another_i написал 20 декабря 2010 года Добрый день. Хотелось бы узнать, как осуществить Request.JSON к внешнему сервису c помощью mootools. Более предметный пример: существует сервис возвращающий значение высоты над уровнем моря по широте (lat) и долготе (lng), передаваемым в запросе: http://ws.geonames.org/srtm3JSON?lat=50.01&lng=10.2 var req = new Request.JSON({ method: 'post', //get тоже пробовал url: 'http://ws.geonames.org/srtm3JSON', onComplete: function(json, html){alert(html)} }).send('lat='+latitude+'&lng;='+longitude); // в переменных latitude и longitude соответствующие значения широты и долготы. Функция alert внутри onComplete выполняется, но возвращает null. Сам же запрос не был замечен в firebug'е, например (почему кстати? он просто не выполнился? или это особенность кроссдоменных запросов?). Есть ли вариант решить данную задачу на mootools 1.2.4? Без <iframe>? Как другим способом можно ее решить? Спасибо. Ответить

• 	another_i написал 20 декабря 2010 года Разобрался. Для кроссдоменных запросов используется JSONP из mootools more. Данные передаются через опцию data, а не через send, как я привык. В итоге для поставленной задачи решением является: var req = new Request.JSONP({ url: 'http://ws.geonames.org/srtm3JSON', data: { lat: latitude, lng: longitude }, onComplete: function(json){altitude = json.srtm3} }).send(); Ответить

• 	bar написал 19 марта 2012 года А возможно ли менять заголовки страницы титл  дескрипшин и урл данными функциями много искал, ничего не нашол Ответить

• 	Александр написал 20 марта 2012 года $$('meta[name="keywords"]').set('content', 'foo') В хроме работает, но зачем?? Ответить