В целом об AJAX написано много. Море фреймворков, библиотек, учебников, уроков вокруг облегчающих работу с этой технологией. Но всегда хочется сделать еще проще, еще удобнее и иногда быстрее чем у других и возможно погоня за оригинальностью. Не скажу, что всё это про мой пост, просто пришла идея и захотелось реализовать.

Потому и набросал этот код чисто для иллюстрации посетившей идеи. Сильно не ругать, с JQuery я не так давно, потому как-то так, но для примера вполне хватит, главное понять идею, а дальше уже можно и другие фишки задавать.

В целом — идея.
Меня постоянно убивало, что нужно писать много кода, куда и что запрашивать AJAX и при этом делать несколько версий. В момент работы с Prototype был написан один большой объект, где просто назначались действия, какую ссылку запросить, куда засунуть, какое сообщение показать. Но время движется и хочется не таскать для простых казалось таскать столь громадные махины как Prototype, я перешел на JQuery. Конечно и вторая причина перехода, это обилие плагинов сыграло роль.
JQuery код упрощает, хотя и меняет логику привычную с Prototype.
Но код всё же опять пухнет, смешивается в кучу JavaScript и HTML, вставки кругом, поддержка работы без JavaScript (например для поисковиков) — всё это заставляет мешать и мешать код. Мне это не нравится.

В какой-то момент меня посещает идея, что все ссылки которые будут например работать в двух версиях, как переход например на страницу 1.html и как вторая версия это загрузка этой самой 1.html страницы в поле #content, можно легко пометить классом, уникальным id и для удобства назначения запроса AJAX мы можем втюхать его в атрибут rel:

<a href="1.html" id="link1" class="ajax" rel="1-ajax.php">Наша ссылка</a>

То есть мы просто при загрузке нашей страницы вставим свой обработчик нажатия на каждую такую ссылку и можем с легкостью доставать адреса запросов и творить с ними удобные штуки.

Встал второй вопрос, история. Как все понимают AJAX никак не отражается на нашей адресной строке и истории браузера — они вообще не изменяются! Но как уже вошло в практику мы можем использовать якора (anchor). Да эти самые простые штучки #link1 будут нашими путеводителями, подумал я! Как раз по якорю как id элемента мы начнем определять есть ли ссылка и указан у неё ли rel с адресом запроса. Можно пойти конечно дальше, если захотите например засовывать в rel некий json текст с указаниями например div#id куда будет результат попадать или эффекты какие, но это уже расширение.

Ну в целом, вот пример, смотрите mrak7.com/ex/dax/
Сразу можете открыть код и сравнить например ссылку 1 и 2 в реализации :) Обе работают, кнопка браузера работает так же :) Проверял разумеется пока только в FireFox 3.6 и Chrome 4, остальные не знаю, пока для примера идеи считаю не важно.

На всякий случай копирую код сюда:

	(function($) {
		function DAX(){
			// наш мега объект
			this.anchor = '';
			this.initialize();
		};

		$.extend(
			DAX.prototype, {
				// типа конструктор
				initialize: function() {
					// проходим по всем ссылкам с классом AJAX и ставим наш обработчик
					$("a.ajax").bind("click", function(e){
						// обработчик, достаем у ссылки его id и засовываем в uri якорем
						// чтобы "временной" обработчик потом схавал его и увидел изменения
						var id = $(this).attr('id');
						document.location.hash = '#'+id;
						return false;
				    });
					// запустим наш временной обработчик с интервалом
					setInterval(this.check, 100);
				},

				// наш триггер по времени
				check: function() {
					// достанем якорь из uri
					var hash = document.location.hash;
					hash = hash.replace(/^#/, '');

					// изменился ли он, не пустой и не ноль?
					if( (hash != $.DAX.anchor) && (hash!='') && (hash!=null) ){
						// если так, то попробуем поискать rel у возможной ссылки
						var url = $('#'+hash).attr('rel');
						if( url ){
							/*
							если есть rel с адресом, то попробуем запросить его
							и т.п. тут уже от разработчика
							*/
							$.ajax({
								type: 'POST',
								url: url,
								success: function(text){
									$('#content').html(text);
									$.DAX.anchor = hash;
								}
							});
						}
					}

				}
		});

		$(document).ready(function() { $.DAX = new DAX();  }); // Создаем наш объект, синглетон

	})(jQuery);

И разумеется ссылка на скачивание всего кода .rar 1.5 Kb

P.S. Метод у объекта DAX можно даже убрать или сократить, без bind'а так сказать