(Опыт успешной борьбы с ветряными мельницами.)

C завидной регулярностью в комментариях встречаются оборванные на полуслове сообщения с приписками о том, что «извините, само отправилось», "сорвалось", и продолжением мысли. Иногда говорят, что разгадали причину такого поведения сайта. Поэтому хочу сообщить, что я не одинок в своей догадке, и более того, около полугода назад я решил эту проблему с помощью юзерскрипта. С тех пор ложные отправки у меня прекратились, но я не мог быть уверен, что причина ложных отправок только в этом, поэтому опыт использования скрипта и догадки других пользователей должны были это подтвердить.

В начале

В данной статье речь пойдет о написании Ajax-приложения. Если говорить проще — то, о написании сайта – работающего без перезагрузок. Быстро, легко, доступно. В этой статье не будет рассматриваться код серверной стороны, будут только примеры, для лучшего понимания.
Меня давно интриговала тема написания сайта, в котором несколько компонентов (например, flash плееры) не перезагружаются с каждым переходом по ссылкам, а продолжают себе напевать песенки. И вот однажды, набравшись смелости — я начал думать насчет структуры такого вот приложения. Что в итоге получилось — читайте ниже.

Как это часто случается, технология Ajax Portal появилась случайно, как синтез двух технологий Enterprise Portal и Ajax при построении «движка» для корпоративного сайта. В результате появилось нечто новое, что может дать второе дыхание энтерпрайз порталам.

Каждый web-разработчик сталкивается с задачей изменения положения того элемента списка, который хранится в базе при выводе. Решается эта задача следующим образом: создается поле order(INT) в таблице, записи, которой мы выводим. Затем в бэкенде мы видим что-то вроде этого:

или этого:

Но для того, чтобы организовать первый вариант, нужно писать функцию(метод), который будет «раздвигать» записи. То есть: если у нас таблица выглядит следующим образом:

id	name	order
1	name1	1
2	name2	2
3	name3	3
4	name4	4

то для того, чтобы запись с id=4 переместить между 1 и 2, нам потребуется изменить order записей 2 и 3, таблица будет выглядеть следующим образом:

id	name	order
1	name1	1
2	name2	3
3	name3	4
4	name4	2

Это, довольно, нетривиальная задача.

Для организации варианта со второй картинки, требуется телодвижений поменьше, но это неудобно для пользователя. Если у нас в базе 30-40 записей, ему придется 30-40 раз тыкать мышкой на стрелочку вверх. Но ведь для этого есть справа текстовое поле для установки order вручную. Но этот способ не такой очевидный для пользователя. Хочется чего-то интуитивно-понятного и простого по коду.

Статья рассчитана не на профессиональных кодеров(у них есть 5-10 велосипедов для решения этой задачи с много меньшим количеством запросов к БД).

История

Приветствую всех хабражителей! Однажды, за чашечкой кофе, мне пришла в голову одна безумная мысль: реализовать Ajax через изображения. Да, именно через изображения. В то время, как все нормальные люди используют XMLHttpRequest, JSONP и прочие вкусности для создания кроссбраузерных запросов, я захотел чего-то большего. Дабы оправдать свой маразм, я даже придумал своеобразные плюсы: все данные передаются в закрытом виде и идут строго в ту точку, откуда они запрошены.

Если вы строите ajax-cайт, то рано или поздно, вы сталкиваетесь с проблемой «не работает кнопки назад-вперед в браузере». Потому что ajax — асинхронный, он не выполняет переход на другие страницы, а всего-лишь меняет некую часть содержимого на текущей.

Вторая проблема, с которой борются все разработчики — проект перед сдачей в продакшн просто изобилирует кучами javascript (ajax) кода. Весь этот код по своей сути — всего лишь запросы страниц с севера «без шаблона», т.e., чистое содержимое страницы.

В MSDN DevLabs выложили программу Doloto, предназначенную для оптимизации любых Ajax-приложений. В соответствии со своим названием, Doloto отсекает код до необходимого минимума, так что приложение быстрее загружается клиенту и быстрее начинает выполняться.

Программа анализирует исходники и выделяет тот фрагмент кода Javascript, который непосредственно необходим для инициализации программы. Профилирование функций осуществляется на клиентской машине через локальный прокси-сервер http://localhost:8888 во время исполнения Ajax-приложения в браузере. При этом все «ненужные» функции помечаются метками (таймстампы). Прямо на клиентской машине генерируется оптимизированный код Ajax-приложения, в котором «ненужные» функции заменяются маленькими заглушками. Этот код потом будет загружаться в фоновом режиме или по мере необходимости, уже после инициализации основного скрипта. Оптимизированный код сохраняется на жёстком диске клиентского компьютера. Таким образом, можно оптимизировать чужие приложения, даже не имея доступа к их серверам, см. Doloto FAQ.

Программку протестировали на популярных Ajax-интерфейсах и получили впечатляющий результат.

Введение

Асинхронный Javascript и XML (AJAX) ключевая технология нового поколения сайтов, причисляемых к WEB 2.0. AJAX позволяет обрабатывать данные без назойливой перезагрузки страниц. Данные обрабатываются с использованием объекта XMLHttpREquest, который позволяет клиентскому Javascript создавать HTTP подключения к удаленным серверам. AJAX используется во многих мешапах, которые интегрируют контент из нескольких разных ичточников.

Однако кросс-доменные соединения запрещены – такова политика браузеров. Если вы попробуете отправить запрос на другой домен, то получите ошибку безопасности. Вы конечно можете избежать этих ошибок, если будете посылать запросы только к своему домену, но что же это будет за Web-приложение, если оно никуда дальше Вашего сервера не может сунуться. Что если Вам все-таки нужно получать данные от других доменов?

Продолжаем цикл статей на тему построения сайтов (веб-приложений) ориентируясь на максимальное применение AJAX технологии. Зачастую, при работе сайтов и приложений использующих AHAH требуется вместе с подгружаемым HTML контентом догружать файлы скриптов, которые не использовались ранее на страницах сайта. Одним из моментов обработки догружаемого AJAX-ом контента является выделение из получаемого контента файлов скриптов, с последующим их применением к текущему документу (DOM). Благо, на данный момент практически все основные библиотеки умеют это делать. Однако, если копнуть глубже в реализацию процесса обработки догружаемых скриптов, то текущая ситуация совсем «не радужная». Не все хорошо известные библиотеки умеют это делать хорошо, а тем более оптимально. Давайте рассмотрим указанный процесс изнутри, разберем существующие проблемы и узнаем пути их решения.

Обсуждение предыдущей статьи было бурным. Самые ярые любители jQuery, Mootools кричали зачем мол нужен другой велосипед.
В данной статье мы рассмотрим использование техники Fly AJAX. Это одна из нескольких функциональных возможностей, которые не реализованы в ранее указанных больших (и мною уважаемых) фреймворках. Также, в данной статье, мы рассмотрим принципы правильного проектирования и построения сайтов для хорошей индексации с применением AJAX технологии.