Aflax (аббревиатура от Asynchronous Flash и XML) - это библиотека, позволяющая разработчикам использовать JavaScript чтобы полностью использовать все возможности Adobe Flash - графику, видео и т.д. Она создана Полом Колтоном (Paul Colton), создателем Adobe JRun и основателем Aptana, Inc.

Используя Aflax, можно создавать медиа плееры, графику при помощи Flash не используя ActionScript и ничего не компилируя, а вместо этого пользоваться только лишь JavaScript. В отличии от шлюза Flash JavaScript, который был создан компанией Macromedia для Flash 7, Aflax использует ExternalInterface для общения с Flash что значительно увеличивает производительность.

Aflax demoAPI документация

В этом уроке я расскажу, как можно сделать процедуру входа в систему пользователей более удобной используя AJAX. Удобство состоит в том, что пользователю не нужно ждать перезагрузки страницы при отправке формы. Плюс, добавим некоторые “бубенчики” и “свистульки” используя эффекты jQuery.

Читать дальше »

jQuery File Tree - это AJAX браузер файлов написанный на jQuery. Он полностью конфигурируемый, легок в установке и настройке. Внешний вид изменяется простым редактированием CSS. jQuery File Tree работает во всех браузерах, поддерживаемых jQuery. Он также полностью протестирован в Internet Explorer 6 / 7, Firefox 2, Safari 3 и Opera 9.

Для установки плагина необходимо скачать дистрибутив и загрузить его на сервер. Затем нужно подключить скрипты jQuery.js, jqueryFileTree.js и таблицу стилей jqueryFileTree.css. После этого нужно вызвать функцию fileTree() с указанием контейнера, в котором будет дерево файлов, параметров плагина и функции обработчика:

$(document).ready( function() {
	$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
		alert(file);
	});
});

Здесь, #container_id это ID div-а, в котором будет дерево файлов, root - корневая директория для просмотра. Функция обработчик принимает один параметр - имя выбранного файла. В данном примере имя файла будет просто выводится в alert. По умолчанию, AJAX запрос отправляется на скрипт jqueryFileTree.php (входит в дистрибутив), но вы можете указать другой скрипт, добавив опцию script:

$(document).ready( function() {
	$('#container_id').fileTree({
		root: '/some/folder/',
		script: 'jqueryFileTree.asp',
	}, function(file) {
		alert(file);
	});
});

Скачать плагинСмотреть демо

Проверка данных форм это чрезвычайно важная процедура для повышения “юзабилити” при работе с формами. В первую очередь потому, что пользователь сразу же получает уведомление в том случае, если какие либо данные введены неверно. Сегодня я расскажу об очень полезном плагине для jQuery, который облегчает задачу проверки введенных данных до минимума. Это jQuery Validation Plugin. Вот некоторые его возможности:

1. Способен проверять значения email, URL, числа, цифры, номера кредитных карт, минимальное и максимальное значения и др.
2. Поддержка удаленной проверки используя AJAX.
3. Автоматическое отображение сообщений об ошибках.

Итак, попробуем скрипт в действии. Допустим, нам необходимо создать простую форму для логина пользователя, в которой есть 3 поля - имя пользователя, пароль и checkbox “запомнить”.

<form name="myForm" id="myForm" action="" method="post" style="margin:20px">
	<label for="username">Имя пользователя </label><br/>
	<input type="text" name="username" value="" /><br/>
	<label for="password">Пароль</label><br/>
	<input type="password" name="password" value="" /><br/><br/>
	<label for="remember">Запомнить меня:</label>
	<input type="checkbox" name="remember" /><br/><br/>
	<input type="submit" name="" value="Submit" />
</form>

Для начала нам понадобится подключить библиотеку jQuery и плагин в страницу:

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.delegate.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>

Теперь можно вызывать функцию jQuery.validate() которая инициализирует форму. В качестве атрибута в функцию нужно передать объект, содержащий правила (rules) и сообщения об ошибках (messages) для каждого проверяемого поля:

$().ready(function(){
	$("#myForm").validate({
		rules : {
			username : {required : true, minlength: 2},
			password : "required"
		},
		messages : {
			username : {
				required : "Введите ваше имя",
				minlength : "Введите не менее, чем 2 символа."
			},
			password : "Введите пароль"
		}
	});
});

Здесь все довольно таки просто. Селектор $(”#myForm”) получает указатель на форму, а функция validate() устанавливает правила для полей в соответствии с полученными данными. Объект rules содержит имя поля и список правил. Если правил несколько, то они должны быть объединены в отдельный объект. Так, для поля пароль просто указано правило “required”, т.е. обязательное поле, в то время как для поля username указан объект содержащий два правила - required и minlength (минимально допустимое количество символов). Структура объекта messages такая же, как и для rules, за исключением того, что вместо атрибутов правил указаны сообщения об ошибках.

Если при отправке формы обнаружены ошибки, то форма не отправляется, а высвечивается сообщение об ошибке в виде тэга <lable> с классом error. Также класс error присваивается элементу input, вызвавшему ошибку. Воспользуемся этим чтобы ярко выделить это поле:

label.error {
	color: red;
	font-style: italic;
}
input.error {
	border: 1px dotted #f00;
}

Таким образом, сообщения об ошибках будут выделены красным курсивом, а рамка поля, вызвавшего ошибку, будет выделена красной прерывистой линией.

Демо этого примера можно посмотреть здесь.

Читать дальше »

Ранее я написал о том, как асинхронно отправлять файлы на сервер используя простой скрипт. Теперь я покажу, как то же самое можно сделать при помощи библиотеки YUI, которая предоставляет гораздо более удобный интерфейс.

В 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 можно узнать из официальной документации библиотеки.

Не так давно, при разработке чата, я столкнулся с проблемой асинхронной отправки файлов на сервер. Мне нужно было добавить возможность добавлять аватару к профилю пользователя без перезагрузки страницы. После продолжительных поисков я наткнулся на очень хороший по моему мнению скрипт, осуществляющий отправку файла через скрытый 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. Подробнее об этом я расскажу в следующий раз.

Очень часто для создания объекта 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;
}

Читать дальше »

Одной из основных проблем при использовании AJAX является невозможность навигации при помощи кнопок BACK и FORWARD, а также функций history.back(), history.go() и др., потому что изменения в веб странице, которые осуществляются через AJAX никак не отображаются на объекте History. Кроме того, страницы, полученные с использованием AJAX, невозможно добавлять в закладки.

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

Читать дальше »