Идею я позаимствовал у Asvin Baloo и несколько переделал реализацию. Суть метода заключается в том, что стандартная функция alert переопределяется с использованием диалога SimpleDialog из состава YUI:

window.alert = function(text) {
	var dialog = new YAHOO.widget.SimpleDialog("simpledialog1",
			{ 	width: "300px",
				fixedcenter: true,
				visible: false,
				draggable: false,
				zIndex: 9999,
				icon: YAHOO.widget.SimpleDialog.ICON_INFO,
				close: true,
				modal: true,
				constraintoviewport: true,
				buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]
			});
	dialog.setBody(text);
	dialog.setHeader('Информация');
	dialog.render(document.body);
	dialog.show();
}

В результате такого переопределения, при вызове функции alert будет вызываться диалоговое окно, показанное выше, с заголовком, иконкой и кнопкой “закрыть”. Все это естественно настраивается. При создании окна указываем параметр modal равным true для того, чтобы диалог был модальным, как и стандартный alert.

Дабы далее расширить функциональность, можно помимо функции alert() создать функции success() и warning(), которые выводили бы сообщения об успехе или предупреждение. Реализация всех фунций показана в следующем блоке:

window.alert = function(text){
	popUpDialog(text);
};

window.success = function(text){
	popUpDialog(text, 2);
}

window.warning = function(text){
	popUpDialog(text, 1);
}

function popUpDialog(text, type){
	var sIcon = YAHOO.widget.SimpleDialog.ICON_BLOCK;
	var title = 'Ошибка';
	switch (type){
		case 1:
			sIcon = YAHOO.widget.SimpleDialog.ICON_WARN;
			title = 'Предупреждение';
			break;
		case 2:
			sIcon = YAHOO.widget.SimpleDialog.ICON_INFO;
			title = 'Информация';
	}
	var dialog = new YAHOO.widget.SimpleDialog("simpledialog1",
			{ 	width: "300px",
				fixedcenter: true,
				visible: false,
				draggable: false,
				zIndex: 9999,
				icon:sIcon,
				close: true,
				modal: true,
				constraintoviewport: true,
				buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]
			});
	dialog.setBody(text);
	dialog.setHeader(title);
	dialog.render(document.body);
	dialog.show();
}

Здесь, создание диалогового окна вынесено в отдельную функцию popUpDialog(), где первым параметром передается строка сообщения, а вторым его тип. В зависимости от типа окна, устанавливаются два параметра – иконка и текст заголовка, которые после используются для создания диалогового окна. Далее создаются три функции alert(), success() и warning(), которые просто вызывают popUpDialog() с нужными параметрами.

смотреть демоСкачать пример

В YUI, отправка асинхронных запросов на сервер осуществляет функция asyncRequest() модуля Connection Manager. Функции необходимо передать тип (GET или POST), URL запроса и объект callback, который будет обрабатывать полученные от сервера данные. Если нужно отправить на сервер данные формы, то необходимо указать объекту Connect вашу форму. Делается это при помощи функции setForm():

YAHOO.util.Connect.setForm(formObject, true);

Первый параметр – formObject – это указатель на форму. Однако, первым параметром может быть и ID формы. В этом случае Connection Manager сам получит указатель на форму при помощи getElementById. Второй параметр – это собственно то, что нам и нужно – это значение указывает на то, что нам необходимо отправлять файлы на сервер.

Далее нужно создать объект callback (если вам конечно нужно обрабатывать данные, которые возвращает сервер). Все члены объекта callback являются не обязательными, но желательно указать по крайней мере success и failure – функции, которые будут вызываться при успешной отправке (success) или ошибке (failure). Помимо этого, при отправке файлов, нужно также объявить функцию upload, которая будет вызываться при успешной отправке файла. Еще один очень важный параметр объекта callback это массив argument, в который нужно добавлять значения, необходимые для последующей обработки данных. Итак, пример:

var callback_obj = {
	argument : ['targetPre'],
	success: function(o) { alert('Файл успешно отправлен.'); },
	failure: function(o) { alert('Ошибка!!!'); },

	upload : function(response){
		var target = document.getElementById(response.argument[0]);
		target.innerHTML = response.responseText;
	}
}

В этом примере ответ от сервера (responseText) будет добавлен как содержимое в элемент с ID = targetPre (параметр, указанный в argument). После этого можно выполнять запрос:

var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.example.com', callback_obj);

Теперь пример простого web приложения, которое асинхронно отправляет файл на сервер и полученные от сервера данные помещает в элемент pre:

<html>
<head>
<script src="http://yui.yahooapis.com/2.5.0/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.0/build/event/event-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript">

function upload(){
	var formObject = document.getElementById('aForm'); 

	// аргумент true указывает на то, что нам нужно отправлять файлы
	YAHOO.util.Connect.setForm(formObject, true);
	// отправка формы
	var cObj = YAHOO.util.Connect.asyncRequest('POST', formObject.getAttribute('action'), callback_obj);
}

var callback_obj = {
	argument : ['targetPre'],
	success: function(o) { alert('Файл успешно отправлен.'); },
	failure: function(o) { alert('Ошибка!!!'); },

	upload : function(response){
		var target = document.getElementById(response.argument[0]);
		target.innerHTML = response.responseText;
	}
}
</script>
</head>
<body>
<form id="aForm" name="my_form" action="upload.php" onsubmit="upload(); return false;">
<input type="file" name="my_file" />
<input type="submit" name="submit_btn" value="Send" />
</form>
<pre id="targetPre"></pre>
</body>
</html>

Здесь указатель на форму получается при помощи getElementById(), аттрибут action которого используется как URL запроса. Функция upload() вызывается из хендлера onsubmit, а для того, чтобы форма не выполняла действие по умолчанию (чтобы не перезагружалась страница) возвращаем из onsubmit значение false.

Подробнее о модуле Connection Manager можно узнать из официальной документации библиотеки.

var AIM = {
	frame : function(c) {

		var n = 'f' + Math.floor(Math.random() * 99999);
		var d = document.createElement('DIV');
		d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
		document.body.appendChild(d);

		var i = document.getElementById(n);
		if (c && typeof(c.onComplete) == 'function') {
			i.onComplete = c.onComplete;
		}

		return n;
	},

	form : function(f, name) {
		f.setAttribute('target', name);
	},

	submit : function(f, c) {
		AIM.form(f, AIM.frame(c));
		if (c && typeof(c.onStart) == 'function') {
			return c.onStart();
		} else {
			return true;
		}
	},

	loaded : function(id) {
		var i = document.getElementById(id);
		if (i.contentDocument) {
			var d = i.contentDocument;
		} else if (i.contentWindow) {
			var d = i.contentWindow.document;
		} else {
			var d = window.frames[id].document;
		}
		if (d.location.href == "about:blank") {
			return;
		}

		if (typeof(i.onComplete) == 'function') {
			i.onComplete(d.body.innerHTML);
		}
	}
}

Функция submit() является основной в объекте AIM. Она создаёт скрытый iframe при помощи функции frame(), добавляет атрибут target для формы и при необходимости выполняет callback onStart при начале отправки формы. В целом, принцип действия скрипта основывается на применении атрибута target, который указывает, где будет отображаться новый документ. Поскольку здесь target указывает на скрытый iframe, то страница не будет перезагружаться при оправке формы, а ответ от сервера будет помещен как его содержимое.

Пример применения объекта AIM приведен в следующем листинге:

<form action="index.php" method="post" onsubmit="return AIM.submit(this, {'onStart' : null, 'onComplete' : completeCallback})">
....
</form>

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

Если вы предпочитаете использовать библиотеку YUI, то отправку файлов можно осуществлять при помощи connection manager. Подробнее об этом я расскажу в следующий раз.

Эти проблемы можно решить при помощи утилиты Browser History Manager, входящей в состав библиотеки YUI. Она позволяет создавать веб приложения с полностью функциональным объектом History, а также возможностью сохранять другие параметры состояния приложения, например, информацию о том, какие панели или кнопки на странице активны.

У этой утилиты есть и несколько ограничений. Основное – это невозможность использовать её в браузере Opera, из-за того что последний не обновляет свойство location.hash при использовании кнопок back/forward. Также, из-за того, что утилита записывает историю в фрагменты URL (часть, которая идет после знака #), есть ограничения на длину имени состояния. Например, для Internet Explorer этот лимит составляет 2083 символа (длина URL вместе с фрагментом).

Теперь о том как этим пользоваться.
Во первых, нужно подключить необходимые модули:

<script src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/event/event-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/history/history-min.js"></script>

Затем нужно добавить следующие две строки, сразу после тэга <body>:

<iframe id="yui-history-iframe" src="path_to_asset" style="position:absolute; top:0; left:0;width:1px; height:1px; visibility:hidden;"></iframe>
<input id="yui-history-field" type="hidden" />

Вместо path-to-asset в аттрибуте url нужно вставить существующий url, ссылающийся на тот же домен, на котором находится ваша страница. Лучше всего здесь использовать относительные пути. Стили в тэге iframe необходимы только для того, чтобы сделать его невидимым.

Следующий шаг – регистрация модуля.
Здесь, модуль это видимый объект на странице с которым пользователь будет взаимодействовать и состояния которого нужно будет сохранять в истории браузера. Содержимое модуля изменяется, и для того, чтобы сохранять состояние этих изменений, и затем переходить по этим состояниям при помощи кнопок back/forward, нужно этот модуль зарегистрировать. Делается это функцией YAHOO.util.History.register(), которая принимает 3 параметра : идетнификатор модуля (не пустая строка, уникально идентифицирующая этот модуль), начальное состояние модуля (т.е. состояние, соответствующее первой точке в истории), и функция обработчик, которая будет вызываться всякий раз, когда состояние модуля изменится.

Начальное состояние это состояние объекта при первом открытии страницы. Суть в том, что пользователь мог ранее посещать эту страницу и сохранить ссылку на определённое состояние модуля, к примеру URL может выглядеть так: www.example.com/index.php#page=tenth_page. В этом случае необходимо открыть страницу именно в том состоянии, на которое указывает идентификатор состояния модуля. Чтобы получить это состояние используйте функцию YAHOO.util.History.getBookmarkedState(), которая принимает один параметр – идинтификатор модуля:

var bookmarkedState = YAHOO.util.History.getBookmarkedState("module_name");

В том случае если пользователь ввел ссылку без каких либо идентифкаторов, нужно показать страницу по умолчанию, т.е. передать в функцию register() идентификатор начального состояния модуля.

var initialState = bookmarkedState || "defaultState";

Последним аргументом в функцию register() должен быть обработчик события onStateChange. Этот обработчик будет вызываться каждый раз при изменении состояния модуля (например, при нажатии пользователем кнопок back/forward).

function stateChangeHandler(state){
	// Обновляем интерфейс модуля в соответствии с параметром состояния - state
}

Теперь, получив все параметры, вызываем функцию YAHOO.util.History.register():

YAHOO.util.History.register("myModule", initialState, stateChangeHandler);

Использование метода onReady

Инициализация Browser History Manager происходит асинхронно, поэтому все его методы доступны только после полной инициализации менеджера. Для этого используется метод onReady(). Типичное применение для этого метода – это получение первоначального значения состояния и обновление интерфейса в соответствии с этим состоянием. Пример:

YAHOO.util.History.onReady(function () {
	var сurrentState = YAHOO.util.History.getCurrentState("myModule");
	// Обновление интерфейса модуля до состояния "сurrentState"

});

Теперь последняя составляющая инициализации History менеджера – вызов функции YAHOO.util.History.initialize():

try {
	YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
} catch (error){
	// обработка ошибки инициализации
}

где, “yui-history-field” и “yui-history-iframe” – это id обязательных элементов, созданных нами выше.

Теперь, когда модуль инициализирован, можно использовать его, т.е. изменять его состояния в соответствии с выполенными изменениями. Делается это при помощи функции YAHOO.util.History.navigate(), в которую нужно передать 2 параметра – имя модуля и новое название состояния:

YAHOO.util.History.navigate("myModule", "newState");

Создание приложения

Теперь от теории к практике. Напишем простой пример коммуникации с сервером посредством AJAX с использованием History Browser Manager. Наше приложение будет иметь меню с тремя ссылками на три разные страницы, содержимое этих страниц будет асинхронно подгружаться в div контейнер. После нескольких AJAX запросов можно будет возвращаться взад/вперед при помощи кнопок back/forward.

Шаг 1

Создаем основной HTML документ, который будет содержать все необходимые процедуры. Добавляем туда необходимые библиотеки и обязательные тэги <iframe> и <input>. Необходимо также добавить библиотеку connection.js для осуществления запросов AJAX. Далее создаём меню со ссылками и контейнер для отображения информации, полученной от сервера. После первого шага, получаем следующий HTML документ:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Демонстрация работы модуля Browser History Manager библиотеки YUI</title>
<style>
#header {
	text-align: center;
	background: #ccc;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}

#sidebar {
	width: 240px;
	float: left;
}

#sidebar li {
	list-style-type: none;
}

#container {
	width: 440px;
	height: 400px;
	padding: 8px;
	border: 1px solid #aaa;
	float: left;
	overflow: auto;
}
</style>

<!-- Зависимости -->
<script src="http://yui.yahooapis.com/2.4.1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/event/event-min.js"></script>

<!-- Для использования ajax запросов -->
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>

<!-- Browser History Manager -->
<script src="http://yui.yahooapis.com/2.4.1/build/history/history-min.js"></script>
</head>
<body>
<!-- следующие 2 строки обязательны для объекта history -->
<iframe id="yui-history-iframe" src="yuihist1.html" style="position:absolute; top:0; left:0;width:1px; height:1px; visibility:hidden;"></iframe>
<input id="yui-history-field" type="hidden">

<!-- заголовок -->
<h2 id="header">Демонстрация работы модуля Browser History Manager библиотеки YUI</h2>
<!-- ссылки -->
<ul id="sidebar">
	<li><a href="yuihist1.html" onclick="navigate(this);return false">Страница 1</a></li>
	<li><a href="yuihist2.html" onclick="navigate(this);return false">Страница 2</a></li>
	<li><a href="yuihist3.html" onclick="navigate(this);return false">Страница 3</a></li>
</ul>

<!-- контейнер для отображения полученных от сервера данных -->
<div id="container"></div>

</body>
</html>

Шаг 2 – инициализация.

Модулем в нашем приложении будет контейнер div. Именно изменения в этом объекте будут отслеживаться при помощи History менеджера. Назовем этот модуль именем “page”. Состояниями контейнера в нашем случае будут URL получаемых документов. Первым документом будет страница с именем yuihist1.html. Обработчиком события onStateChange будет функция ajaxCall(), которая будет выполнять запрос AJAX и, следовательно, изменять состояние нашего модуля. Обратите внимание на функцию onReady(), которая отображает первую страницу при инициализации приложения.

// Инициализация history
window.onload = function(){
	try {
		// определяем, какая страница должна быть открыта первой
		var bookmark = YAHOO.util.History.getBookmarkedState("page");
		var initialState = bookmark || "yuihist1.html";

		// каждый раз при изменении состояния объекта history будет вызываться обработчик ajaxCall
		YAHOO.util.History.register("page", initialState, ajaxCall);

		YAHOO.util.History.onReady(function () {
			var firstPage = YAHOO.util.History.getCurrentState("page");
			ajaxCall(firstPage);
		});

		YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
	} catch (e){
		// в случае ошибки инициализации, переопределяем функцию navigate,
		// чтобы не использовать функции history
		navigate = ajaxCall;

		// открываем первую страницу
		navigate('yuihist1.html');
	}
}

Шаг 3 – создание функций, выполняющих AJAX запрос посредством History менеджера.

Функцей, которая будет выполнять AJAX запрос, является упомянутая выше ajaxCall(). Другая функция – navigate() будет выполнять AJAX запрос посредством History менеджера. Ключевой здесь является последняя строка, вызывающая функцию navigate(). Устанавливая новое имя состояния модуля, она вызывает событие onStateChanged, которое в свою очередь вызывает обработчик – функцию ajaxCall(), которой передается текущее состояние модуля (в нашем случае URL).

// функции осуществляющие ajax запрос
var callback = {
	success : function(o){
		document.getElementById('container').innerHTML = o.responseText;
	},
	failure : function(o){
		alert(o.responseText);
	}
}

function ajaxCall(sURL){
	YAHOO.util.Connect.asyncRequest('GET', sURL, callback, null);
}

// функция, осуществляющая ajax запрос посредством объекта history
function navigate(elem){
	// определяем url
	var url = elem.getAttribute("href");

	// параметр url будет передаваться обработчику (в нашем случае это функция ajaxCall)
	YAHOO.util.History.navigate("page", url);
}

Посмотреть демо примера можно здесь