По просьбам читателей приведу самый примитивный пример авторизации с помощью AJAX. Почему примитивный? Потому что, если у вас нет навыков написания хорошего, защищенного скрипта авторизации на php+mysql, то этот пример не для вас. Зацикливаться на самой авторизации я не буду, ведь все мы знаем, что пользователей нужно хранить в базе данных с их зашифрованными паролями и IP адресами последнего входа…? У меня всё гораздо проще - users.txt файл в корне с синтаксисом: “пользователь = пароль” в несколько строк.

А шифрование и прочие навороты оставляю за вами :)
(далее…)

Очень интересное решение отражения изображением с использованием библиотек Prototype и Scriptaculous. Преимущества:

• Никакого Flash
• Никакого CSS
• Cross-browser
• Пред-загрузка изображения перед эффектом

Как подключить:

<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js?load=builder" type="text/javascript"></script>
<script src="javascript/reflection.js" type="text/javascript"></script>

Рисуем картинку:

<div id="holder">
<img src="image.jpg"/>
</div>

И применяем эффект:

<script type="text/javascript">
  new Reflect3D('holder');
</script>

Библиотеку можно скачать здесь: Prototype Reflection.

Скачать Prototype
Скачать Scriptaculous

(далее…)

Люди часто бродят по вашему сайту по одному и тому же маршруту. Когда мы знаем примерный маршрут посетителя - мы можем оптимизировать нашу страницу таким образом, чтобы пользователь меньше всего времени проводил в ожидании загрузки следующей страницы. Это можно сделать с помощью пред-загрузки (preloading) ссылок. Ниже приведен небольшой скрипт на библиотеки prototype, который пройдет по всем ссылкам вашей страницы, и если обнаружит значение “load” в свойстве rel - подгружает ссылку в скрытом фрейме (iframe).

1
2
3
4
5
6
7
8
9
10

document.observe('dom:loaded', function() {
$$('a').each(function(e) {
		if(e.getAttribute('rel') == 'load') {
			p_sHref = e.getAttribute('href');
			if(/^#/.match(p_sHref) ||  p_sHref == '' || !p_sHref) return;
			l_oIframe = new Element('iframe', {src:p_sHref} ).hide();
			document.body.appendChild(l_oIframe);
		}
	});
});

То есть, чтобы заранее подгрузить определенную ссылку, используем свойство rel:

<a href = "http://blog.kovshenin.com/bio" rel="load">Текст ссылки</a>

Хотелось бы услышить ваше мнение ;)

(далее…)

Среди форматов обмена данными, AJAX программисты часто выделяют JSON (JavaScript Object Notation, “джейсн”), как альтернатива языку XML, а именно потому, что XML больше язык разметки, чем носитель данных. JSON в свою очередь, легкий, человеко-читабельный, текстовый формат для хранения и передачи простых структурированных данных, а так же более комплексных объектов (массивов). В этом уроке мы рассмотрим простой пример формирования данных в JSON средствами PHP, а так же их получение и представление, с помощью JavaScript. Кто еще не понял, это продолжение серии уроков “AJAX PHP поиск” (XML, Prototype).
(далее…)

В первой части урока мы рассмотрели организацию поиска по базе данных MySQL средствами AJAX, PHP и XML. Теперь я хочу показать этот же пример, только с использованием библиотеки prototype. Глобальных изменений не произошло, внешне работает абсолютно одинаково. В конце урока попытаемся подвести небольшую сравнительную характеристику двух этих методов.
(далее…)

Как создавать простые AJAX запросы к серверному скрипту (PHP) вы уже научились, методами простого XML, а так же с использованием библиотеки prototype. Рассмотрим более комплексный пример - как организовать поиск по базе данных MySQL средствами AJAX и PHP.
(далее…)

По просьбам читателей - что такое prototype? Библиотека (фреймворк) prototype позволяет вам легко, быстро и безопасно совершать AJAX запросы и не только. Библиотека расширяет методы DOM (Data Object Model), упрощая их использование. А самое главное то, что авторы библиотеки уже позаботились о браузеро-независимости (cross-browser), и нам достается всё самое сладкое!
(далее…)

Все уже научились создавать xmlHttp объекты, посылать запросы стороннему файлу, получать, обрабатывать и выводить XML данные. Кто не в теме, прошу сюда. Теперь, на базе этого, мы с вами рассмотрим конкретный пример – всемирно известный ShoutBox!
(далее…)

Что такое AJAX, думаю, все уже знают и имеют небольшое представление о том, как он работает. Но всё же много людей до сих пор представления не имеют о том, каким боком собственно XML, так как большинство ресурсов расписывают работу только со свойством responseText, не говоря уже о сторонних библиотеках (prototype, sAjax и прочее).
(далее…)