?

Log in

No account? Create an account

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