Previous Entry Share Next Entry
Ленивый AJAX или как придать блеска старым сайтам
Cola with Ice
sanmai
Представьте себе, что есть старый сайт, открытый лет эдак пять-семь назад, когда AJAX был ещё далек от популярности среди разработчиков. Теперь, спустя года, вы хотите придать свежести и удобства старому сайту, без сколько-нибудь существенной его переделки и с минимальными затратами времени и сил. Как это сделать?

В этом вам легко поможет jQuery.

Немного теории

Спросим себя, зачем обычно нужен AJAX?
Обычно применение AJAX оправдывается потребностью:
1. Обновлять страницу или её части без полной перезагрузки.
2. Ускорить работу сайта, передавая только новую информацию.
3. Спецэффектов для обратной связи и других применений.

Таким образом, для получения пользы от внедрения AJAX достаточно выполнения только одного из пунктов. В нашем случае, с учетом требования минимизации затрат, проще всего будет реализовать пункт один и, по возможности, пункт три. (Пункт два потребует от нас глубоко влезать в нутро сайта, что противоречит требованиям.)

Идея

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

С помощью jQuery мы можем перехватить отправку каждой такой формы на сервер, отправить её асинхронно и вставить обновленную форму из ответа сервера с результатами в исходную страницу.

Реализация

Для этого нам нужно:

1. Добавить во все формы уникальный атрибут id, если его нет. Этому id достаточно быть уникальным в пределах страницы и он должен оставаться тем же запрос от запроса. (Вполне подойдет порядковый номер формы или, например, хеш от скрытого параметра вроде номера товара.)

2. Добавить во все формы CSS-класс ajax. Пример получающегося тега:
<form method="..." id="search_ajax" class="ajax" action="...">

3. Убедиться, что результат отправки формы выводится внутри тега <form> с тем же id, что и страницей раньше. Если нужно, добавить такой тег с соответствующим id.

4. Нужно чтобы на странице результата был тег <div>, иначе не получится.

5. Подключить jQuery любым удобным способом и добавить следующий код внутри тега <script>:
$(function () {
	$("form.ajax[id]").each(function () {
		$(this).submit(function () {
			//$(this).find("input[type='submit']").attr("disabled", true);
			$.ajax({
				type: $(this).attr('method') || 'POST',
				url: $(this).attr('action') || window.location.pathname,
				data: $(this).serialize(),
				context: $(this),
				success: function (data) {
					$(this).html(
							$(data).find("#" + $(this).attr("id")).html()
					);
				}
			});
			return false;	 
		});
	});
});

6. Проверить, что всё работает как нужно, и повторить для других форм. Всё!

Не правда ли просто?
Tags: , ,

  • 1
Разработка сайтов, это Ваша работа или увлечение?

Есть варианты проще. К примеру - использовать плагин jQuery.form

А вообще украшать сайт с помощью аякса - это достаточно сомнительный путь.

эк тебя с фотографий-то перешибло на аякс)

  • 1
?

Log in

No account? Create an account