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

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. Подробнее об этом я расскажу в следующий раз.

Сегодня я представляю вашему вниманию скрипт Reflection.js, который позволяет добавлять эффект зеркального отражения к изображениям на web-странице. Эффект создаётся при помощи объекта Canvas на браузерах, которые его поддерживают, в Internet Explorer вместо Canvas использются фильтры Opacity (эффект прозрачности) и FlipV (зеркальное отображение). Конечный результат выглядит следующим образом:

<< читать дальше >>

Утечки памяти в браузерах – распространенное явление, и особенно подвержен этому напастью Internet Explorer. Для обнаружения утечек памяти в IE существует замечательная утилита sIEve, которая способна загружать страницу, производить мониторинг за выделение памяти, отображать свойства тэгов и др. Главное окно приложения показано на рисунке:

Главное окно sIEve

Для начала работы с приложением нужно ввести адрес тестируемой страницы в строку Address и нажать кнопку Go. После загрузки страницы, вы увидите в панели Memory usage изменения в выделении памяти. Если выделение памяти изменяется в большую сторону, то соответствующая строка выделяется красным цветом, в меньшую – зеленым. Самый простой тест – это последовательная перезагрузка страницы с контролем за выделением памяти. Чтобы начать тест, нужно нажать кнопку Auto-refresh – автообновление. sIEve начнет автоматически перезагружать страницу через короткие промежутки времени, при этом в панели Memory usage будет отображаться выделенная процессу память. Если выделение памяти постоянно расти, значит мы имеем дело с утечкой памяти. При нормальной же работе скрипта будет наблюдаться только небольшие флуктуации вокруг определенного уровня.

<< читать дальше >>

Очень часто для создания объекта XMLHTTPRequest используется схема с использованием структуры try … catch из-за того, что в разных браузерах этот объект создаётся по разному. В Internet Explorer объект XMLHTTPRequest создаётся при помощи ActiveX, в то время как другие браузеры используют собственный объект XMLHTTPRequest. Схема, о которой я говорю представена ниже:

function getXMLHTTPRequest() {
	try {
		req = new XMLHttpRequest();
	} catch(err1) {
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (err2) {
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (err3) {
				req = false;
			}
		}
	}
	return req;
}

<< читать дальше >>

Мы уже давно привыкли пользоваться функцией document.createElement() для создания элементов, которые необходимо добавить в DOM. С учетом добавления аттрибутов и переменных, код выглядит приблизительно следующим образом:

var elem = document.createElement("input");
elem.setAttribute("id","uname");
elem.className("my_class");
elem.setAttribute("type", "text");
elem.setAttribute("name", "username");
elem.setAttribute("value", "");
elem.setAttribute("size", "20");
elem.onkeypress = validate;
elem._my_var_ = 12345;

<< читать дальше >>