Ajax *

Модуль — это независимый плагин, который может работать без основного скрипта. История данного Кармавьюера начинается с 23 марта 2010 — автор Atilla написал скрипт показа кармы по наведению мыши на имя пользователя. К этому времени существовали другие 2-3 реализации показа кармы и одна — даже с изменением без захода на страницу. Скачать кармавьюер.
HabrAjax

Обновление. Как известно, раньше потоки статей и вопросов-ответов существовали раздельно, а теперь авторизованные пользователи могут использовать вкладку «Всё» для просмотра смеси заголовков тех и других потоков. С юзерскриптом HabrAjax новой версии 0.85, от 25 апреля возможно смотреть не только заголовки, но и содержание без перезагрузки страниц. Достаточно кликнуть по заголовку или по кнопке ответов. Просмотрев статью, вопрос или комментарии к ним, по широкой кнопке «Свернуть» сворачиваем просмотренное.

Необходимые переделки затронули и ZenComment — юзерстили для Хабра.

Реинкарнация кнопки «Читать все хабы» с возможностью вернуться к чтению избранных хабов (блогов); работает при авторизации; настройки выбора переносимы через JSON.

Эту кнопку «сломали» и пообещали, что «насовсем», разработчики сайта 14 марта 2012 года. Но свято место пусто не бывает, и появился её ослабленный клиентский «дух».

Скрипт сохраняет все ваши настройки блогов в одной большой JSON-строке, которая запоминается в хранилище браузера (не потеряется при сбое питания) и которая может быть вытащена для экспорта (кнопка «Импорт-экспорт») в другие браузеры и компьютеры (ею же можно воспользоваться, чтобы «посмотреть глазами других»). По кнопке-переключателю «Все/Свои» делается лёгкий выбор между всеми блогами или своими избранными. Фактически, это замена прежнему режиму «Читать все», убранному с сайта. Другие имеющиеся решения требуют чем-то пожертвовать: выбрать «всё» вручную (это означает — потерять свои избранные блоги), читать habrahabr.ru/posts/collective и habrahabr.ru/posts/collective/new (будут пропускаться блоги компаний) — обсуждение в QA.

Перейти на страницу скрипта. Сразу скачать скрипт habrAllHub.

Разработка юзерскрипта HabrAjax преодолела свои очередные проблемы с кроссбраузерной поддержкой новых функций и создала плеяду статей (7 штук, ещё не опубликованных) по разным вопросам, связанным в основном с юзерскриптами и их кроссдоменным доступом. Все эти статьи нетривиальны, в интернете их темы освещаются частично, а некоторые не освещаются даже в описаниях багов браузеров (или автору неизвестны иноязычные решения). Статьи придётся выкладывать в произвольном порядке, потому что нет оснований как-либо их упорядочивать — каждая связана с другой лишь по тематике. Сейчас я приведу анонсы статей, без ссылок, чтобы сложить представление, о чём пойдёт речь в дальнейшем. Реализация — в HabrAjax, но там довольно много прикладного кода, не слишком хороший пример для демонстрации. Поэтому для каждой статьи будут коды с более адаптированными примерами, насколько возможно.

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

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

Во время анализа стилей сайта в своё время было обнаружено, что в стилях и скриптах предусмотрено то, что должно быть по правилам юзабилити — показ режима ожидания ответа от сервера — но оно никак не проявляется визуально. Работает это только на страницах с новой вёрсткой — почти на всех, исключая некоторые специально оформленные (в старой вёрстке, принятой до октября 2011) страницы блогов компаний. Так давайте же использовать то, что сделано!

Поэтому при создании юзерстилей ZenComment был задействован стиль ожидания. Он появляется после того как пользователь нажал на отправку оценки и исчезает в момент прихода успешного ответа от сервера. Выглядит он не очень впечатляюще, нет крутящихся стрелок, потому что создавать особые эффекты — уже нет места в файле, который должен быть ограничен 65 КБ на все стили по правилам хостинга. Признак проявляется просто в виде бледно-жёлтого фона кнопки оценивания. Если, например, связь с сервером потерялась, фон кнопки ответа так и останется жёлтым. Без юзерстилей в этом случае ничего не происходит визуально.

В начале

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

*Пер.: Мысль этого топика тривиальная и должна быть известна каждому: используйте асинхронные запросы. Но статистика — штука суровая, и, видимо, это знают не все. А последствия, на самом деле, имеют место во всех браузерах.*

8.4% всех зависаний страниц в IE9 за прошедший месяц являются следствием того, что XMLHttpRequest объекты блокируют поток UI синхронным запросом. Это огромное число! С помощью нескольких доступных изменений в коде эти зависания можно легко избежать — и разработчики могут обеспечить своим пользователям намного лучшие впечатления от работы с их сайтами. Мы рассмотрим, что происходит при зависании, что вы можете с этим сделать, и мы также попробуем сделать небольшую демонстрацию, чтобы воочую посмотреть, что происходит, когда синхронный запрос подвешивает браузер.

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

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

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

Мой вольный перевод вчерашнего анонса гугла о том, как сделать так, чтобы аякс индексировался.

Команда гугла спешит представить вам новый подход который позволит индексировать сайты, сделанные с помощью AJAX. Выработанный стандарт поможет как вебмастерам так и пользователям, сделав содержимое интерактивных AJAX сайтов доступным для индексации любой поисковой системе, согласившейся принять участие в этом проекте. Мы полагаем, что если интерактивный контент станет доступным для индексации, то это только улучшит содержание Интернета.

AJAX сайты достаточно популярны среди пользователей, но поисковые системы, как правило, не могут получить доступ к контенту такого сайта. Согласно нашему последнему исследованию, около 70% всех сайтов, которые мы проверили, используют ту или иную форму JavaScript. Конечно, большинство JavaScript это не AJAX, но тем не менее, было бы хорошо, если бы поисковые машины могли индексировать AJAX. В таком случае, разработчики могли бы делать свои сайты более интересными и снабжать их большим количеством «фишечек», а поисковые системы, в свою очередь, индексировали такие сайты и отображали их в результатах поиска.

В 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 технологии.

В модной борьбе за семантическую чистоту кода мы должны отказаться от практики применения следующего кода:

<a onclick="doSomething()" href="#">Click!</a>

В одной статье предлагается вместо этого следующий код на jQuery:

<a href="backuplink.html" class="doSomething">Click!</a>

$('a.doSomething').click(function(){ ... }

Да, в спецификации HTML5 написано: «The href attribute on a hyperlink element must have a value that is a valid URL. This URL is the destination resource of the hyperlink». Но получается, что при использовании ссылки для запуска какой-нибудь AJAX загрузки части страницы, тег ссылки вместо того, для чего он предполагался, запускает функцию. А предлагаемом варианте ещё и ссылка не несуществующий файл указана.

Мораль: для запуска AJAX действий использовать КНОПКИ а не ссылки.

Спасибо за внимание.

По многочисленным просьбам начинающих (и не только) AJAX разработчиков, решил выделить часть своего времени для описания некоторых хитростей и приемов, которыми пользуюсь при построении сложных, динамических веб-приложений. Статья представляет из себя смесь теоретических выкладок и практических примеров.

Наибольшие трудности при построении сайтов c применением AJAX возникают при реализации механизма AHAH (Asynchronous HTML and HTTP). Особенно выполнение на лету подгружаемых Javascript-ов. Также есть куча дополнительного «гемороя» при разработке AJAX сайтов и веб-приложений. Вы можете ознакомится с детальным описанием некоторых существующих проблем. Из-за указанных сложностей, многие разработчики отказываются от более насыщенного внедрения AJAX.

Однако, мало кто знает, что перечисленные проблемы можно решить.

Для построения дерева DOM браузеру при загрузке страницы требуется время. Это нужно учитывать при подгрузке контента на страницу с помощью Ajax.

Эти девять правил несложны, никаких кусков кода — только общие советы начинающим Ajax-разработчикам. Крайне вольный перевод 9 AJAX Tips & Tricks.

Довольно простой код для использования Ajax.PeriodicalUpdater предлагается в описании API на официальном сайте prototype

new Ajax.PeriodicalUpdater('items', '/items', {
  method: 'get', frequency: 3, decay: 2
});

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

Искал решение долго и упорно, но в рунете ничего внятного не нашел (возможно, искал не так долго и упорно, как того требовалось бы). А вот покопавшись по забугорским сайтам наткнулся на такую статью: blog.innerewut.de/2007/9/22/ie-doesn-t-let-us-rest

И тогда проблему решил следующим способом: