Браузерные игры, реалтайм, финансы, стартапы
0,0
рейтинг
8 апреля 2008 в 19:00

Разработка → Прямые ссылки на AJAX веб-сайтах – наша технология Fullajax Direct Link.

Ajax*
Приветствую всех читателей. Популярность AJAX такая, что это, по сути, уже стандарт де-факто для многих проектов. Хотя, как и все технологии (особенно, новые и/или модные), она часто применяется (чего уж грех таить) и там, где без нее не обойтись, и там, где вполне можно, а зачастую и нужно. Впрочем, сегодня речь пойдет о другом.

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

Но все же – допустим, у нас есть простенький, но претенциозный веб-сайт визитка, где по переходам меню AJAX подгружает и выводит контент, а мы хотим дать знакомому по ICQ ссылку на контактную страницу (или любую другую, не суть важно).

Есть два подхода решения проблемы ссылок.


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

Второй подход – это использовать якоря для генерации ссылок в адресной строке браузера. Данный подход более предпочтительней и более распространен, так как позволяет использовать стандартный подход для добавления в закладки ссылок на страницы, а также при желании позволяет реализовать на AJAX историю навигации по сайту.
При использовании второго подхода ссылки на динамически сгенерированные будут иметь подобный вид: site.ru/#:news, site.ru/#:download или site.ru/#content/blogcategory/4/7

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

Для понимания сути проблемы рассмотрим немного более детально механизм перехода по AJAX ссылкам. Как известно, якоря (#:news, #:download, #content/blogcategory/4/7/) не передаются на сервер. Для загрузки пользователю соответственного ссылке контента мы вынуждены изначально загружать контент корневой страницы (http://site.ru/), потом определить AJAX якорь (#:news), и только теперь имеем возможность догрузить соответствующий якорю контент. Как видно из алгоритма работы, мы имеем первую излишнюю загрузку корневого контента, который по сути нам вообще не нужен. Визуально это сопровождается неприятным миганием страницы. Примеры работы указанной реализации увидеть вот здесь:

http://maxaman-soft.ru/#content/blogcategory/4/7/
http://www.pricelist.uz/ru/goods/catalog/#ru/goods/catalog/category/ofisnaya_tehnika/

Есть несколько вариантов решения данной проблемы. Один из них основан на временном сокрытии контента и последующим показом его только после дозагрузки соответствующего якорю контента. Данный подход все же имеет недостаток излишней загрузки контента. К сожалению, примеров такой реализации я не нашел.

Второй подход, который мне известен, это реализация первой страницы пустышки – и загрузка контента только после определения AJAX якоря. Примеры реализации можно увидать вот здесь:
http://www.datamash.us/#:chips:goto:gs12
http://fullajax.ru/examples/index.html#:[addscript]

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

Кстати, здесь и кроется, на мое мнение, вторая проблема AJAX – все же он более подходит для реализации именно приложений, а контент и навигация в открытом доступе – это немного неправильно. В приложениях проблемы ссылок вообще не возникает (представить себе ссылку на свое открытое письмо в GMail-е я не могу, и такой надобности тем более), а вот разработчики обычных «контентных» сайтов часто слишком углубляются в красивости, не исследуя юзабилити своих проектов.

Вашему вниманию предлагается третий вариант решения проблемы «холостой загрузки контента». Ниже рассматриваемый подход называется fullajax direct link. Разработчиком этой технологии является Руслан Синицкий, который и выступает главным соавтором этого материала. Способ оригинален в своей реализации и призван существенно упростить или даже полностью решить все перечисленные выше проблемы.

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

При переходе пользователем по AJAX ссылке site.ru/#:news, изначально он попадает в корень нашего сайта site.ru. В первую очередь загружается наш маленький javascript, который определяет наличие реферера. Если реферер отсутсвует (пользователь ввел адрес в новое окно) или реферер с внешнего сайта (пользователь попал на наш сайт кликнув по ссылке на другом сайте), тогда мы сразу определяем AJAX якорь (#:news) и определяем соответственную ему страницу (к примеру, /content/news). Далее тут же делаем редирект на страницу /content/news, и, как только начали загружать данную страницу, в самом начале делаем обратный редирект на site.ru:#news. Мы попадаем опять в корень сайта, но уже имеем внутренний реферер. В этот момент включается серверный алгоритм, который при совпадении условий – запрос корня сайта и наличие внутреннего реферера – загружает вместо контента коренной страницы контент страницы, которая указана в реферере. Схема алгоритма представлена на рисунке ниже:



Все редиректы делаются с помощью javascript-а, что позволяет при его отключении работать с сайтом как обычно.

Все было бы замечательно, если бы не некоторые особенности работы браузера InternetExplorer. Он напрочь отказывается сохранять реферер при редиректе с помощью JS! Но нашелся интересный выход из этой ситуации. Вашему вниманию представляется вариант решения данной проблемы (ведь сохранение реферера может пригодится и в других случаях). Оказывается, IE позволяет программно кликать по ссылкам! При этом браузер нормально редиректится и сохраняет реферер. В добавок, проблема с реферером есть и у Оперы. Правда при JS-редиректе реферер Опера сохраняет, но если после редиректа нажать обновить, Опера теряет реферер. Благо, Опера также позволяет программно кликать на ссылках.

И так привожу пример рабочего клиентского скрипта который реально используется на сайте разработчика данного подхода (http://fullajax.ru):

// Таблица или функция соответствия  «AJAX якорей» реальным ссылкам *****
var links = {
        '/content/view/36' : 'main',
        '/content/blogcategory/27/74' : 'news',
        '/content/view/43/75' : 'technology',
        '/content/view/41/76' : 'portfolio',
        '/content/view/38/79' : 'connection',
        '/content/view/42/80' : 'license',
        '/content/view/45/83' : 'contacts',
        '/content/view/39/77' : 'developers',
        '/content/view/40/78' : 'links',
        '/content/view/65/84' : 'download'
    }
//проверка запроса не коренной страницы
    if (location.pathname && location.pathname != '/') {
        var l;
        for (var i in links){
            if (location.pathname.substring(0,i.length)==i) {
                l = links[i] + location.pathname.replace(i,'');
                break;
            }
        }
        l = '/'+(l?'#:'+l:''); //преобразование в AJAX ссылку с якорем
// конец функции соответсвия ****
        var ua = navigator.userAgent.toLowerCase();
//реализация редиректа с сохранением реферера для ИЕ и Оперы
        if (ua.indexOf('opera') > -1 || ua.indexOf('msie') > -1) {
//для ИЕ нужно чтобы ссылка была внутри документа
            if (ua.indexOf('msie') > -1) {
                document.write('<a href="'+l+'" id="redirect" style="display:none"> </a>')
                document.getElementById('redirect').click();                
            } else {
//для Оперы можно просто создать обьект-ссылку и кликнуть по ней
                var a = document.createElement('a');
                a.setAttribute('href', l);
                a.click();
            }            
        } else {
//редирект для нормальных браузеров
            location.replace(l);
        }
    } else {        
//запрос коренной страницы
// определяем реферер, и если он есть определяем внутрений он или нет
        var ref = document.referrer;
        if (!ref || ref.indexOf(location.hostname) == -1 || (ref.substring(ref.length-'fullajax.ru/'.length,ref.length)=='fullajax.ru/')){
            var ind = location.href.indexOf('#:');
            if (ind != -1){
//определяем AJAX якорь-ссылку
                var l = location.href.substring(ind+2);
                for (var i in links){
//определяем соответсвующую AJAX якорю реальную ссылку и редиректим на нее
                    if (l.substring(0,links[i].length)==links[i]) location.replace(i+l.replace(links[i],''));
                }
            }
        }
    }





Вот такие вот пироги :). К данному клиентскому скрипту прилагается серверный скрипт, который при наличии внутреннего реферера грузит вместо главной страницы, страницу которая указана в реферере. Привожу написанный на PHP рабочий пример реализации мамбота для CMS Joomla:

<?php
/*
* fullajax systembot
* (c) 2008 boston & si-rus
* В рамках проекта Fullajax для Joomla!
* http://www.fullajax.ru | http://www.joostina.ru
**/
defined( '_VALID_MOS' ) or die( 'Прямой вызов файла запрещён.' );

$_MAMBOTS->registerFunction( 'onStart', 'fullajaxStart' );


function fullajaxStart(){
	global $mosConfig_live_site,$mosConfig_absolute_path,$mosConfig_sef;
	if(isset($_SERVER['HTTP_REFERER'])){
		$_lo = strpos($_SERVER['HTTP_REFERER'],$mosConfig_live_site);
		if($_lo===false){ // реферер внешний - делаем всё как обычно
			null;
		}else{
			//echo 'внутренний<br />';
			$_ref = str_replace(array('http://','www.'),'',$_SERVER['HTTP_REFERER'] ); // реферер
			//echo '<br />';
			$_url = str_replace(array('http://','www.'),'',$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ); // текущий урл - адрес
			//echo '<br />';
			$_root = str_replace(array('http://','www.'),'',$mosConfig_live_site ).'/'; // урл корня сайта

			if($_url==$_root and $_url!=$_ref) { // запрос корня с внутренним реферером
				// грузим реферер
				require($mosConfig_absolute_path.'/templates/index/unsef.php');
			}else{
				null;
			}
		}
	}
}

?>





Ну вот в принципе и все.

Данный алгоритм также имеет недостаток (таков закон сохранения энергии) – в итоге на 2 коннекта больше к серверу (2 редиректа), но это может быть мизерно малой долей по отношению к «холостой загрузки контента».

Преимущество рассмотренного подхода – сохраняется индексируемость главной страницы как у обычного сайта, нет загрузки ненужного контента («холостой запрос»), нет мигания страницы. Необходимость внедрения рассмотренного алгоритма зависит от конкретной ситуации. Возможно вам это пригодится. Пользуйтесь на здоровье!

Работу алгоритма в реальности можно увидеть на сайте http://fullajax.ru.

P.S. Автор материала: Руслан Синицкий (sirus, http://fullajax.ru), редактирование и соавторство – Александр Лозовюк (aleks_raiden, http://abrdev.com).
Александр Лозовюк @aleks_raiden
карма
2,0
рейтинг 0,0
Браузерные игры, реалтайм, финансы, стартапы
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (143)

  • 0
    вот такой вот придумал алгоритм, непростой в реализации, но работоспособный на 100%
    • 0
      Очень интересно, даже начал подумывать о том, чтобы сделать такое на своем сайте.
      Но только-что обнаружил очень странный глюк — скопировал с адресной строки http://fullajax.ru/#:links, открыл в новой вкладке — браузер уже минут 20 постоянно редиректит с http://fullajax.ru/content/view/40/78 на http://fullajax.ru/#:links и обратно. Забавно :)
      Opera 9.26
      Сборка 8835
      Windows XP SP2
      • 0
        СПАСИБО! вот реально на 100% полезный комент!
        я вот в Опере 9.22 и все ок, щас буду качать обновление
        • 0
          Да не за что :) Всегда рад помочь
          • 0
            поставил Оперу 9.27, все работает замечательно!, странно что у вас не работает ... было бы хорошо найти причину
            • 0
              Ну вы спрашивайте, если что. При постоянных попытках перезагрузки в окне браузера то чистая страница чередуется с надписью "передача остановлена"
            • 0
              А только что открыл заглавную страницу, не подгружается CSS почему-то, опять же, только в Опере. FF2/FF3/IE7/Safari все ок
              • 0
                ну видать проблема тогда в самой опере, настройки там всякие... поиследуйте, у меня и у моих друзей работает в Опере, а что пишет "передача остановлена" - это правильно, так и должно быть
                • 0
                  Поисследовал! В настройках оперы есть чекбокс "Включить указание источника перехода", когда эта опция неактивна, браузер просто не посылает http_referer я так понимаю. В этом и проблемма.
                  Желаю удачной доработки скрипта!
                  • 0
                    точно, спасибо, доработаем!
                  • 0
                    Еще раз спасибо за найденное вами слабое место. Алгоритм доработан, с учетом отсекания http_referer чем либо (браузером или прокси). Теперь в случае когда http_referer не пропускается, в работу вступает еще один известный алгоритм реализации прямых АЯКС ссылок - дозапрос контента после загрузки стартовой страницы.
                    В доработке алгоритма помогла недавняя статья про альтернативный способ хранения сессионных данных в переменной window.name http://www.thomasfrank.se/sessionvars.ht….
                    Можете проверить работу нашего алгоритма на сайте http://fullajax.ru предварительно сняв галочку в настройках Оперы с чекбокса "Включить указание источника перехода" (Интрументы->Настройки->Дополнительно->Сеть->Включить указание источника перехода)
                    • 0
                      Сейчас протестирую еще раз ))))
            • 0
              Выглядить вот так:

              По ссылкам ходит нормально, зацыкливается, только если я ввожу в адресную строку на новой вкладке URL вида http://fullajax.ru/#:links
              • 0
                странно, странно, даже и незнаю в чем грабля может быть, я не большой знаток оперы
                • 0
                  Действительно странно, сейчас уже сайт нормально отображается — прошлый раз — обновлял много раз, очищал кэш — без толку. Магия :)
    • 0
      раз уж пошло про баги. открыв страницу download по прямой ссылке в IE-8 (эмуляция 7 версии), адрес при переходе со страницы на страницу не менялся. Этот баг не каждый раз получается.
      • 0
        IE-8 не тестировал, разве он уже в релизе?
        • 0
          нет, бета только
          • 0
            ну вот пусть они еще пошаманят над ним немного
        • 0
          нуу, это непростительно для профессионала - всегда нужно тестировать и смотреть на самые первые возможные доступные альфы и пре-альфы или сборки с сорцов. иначе - догонять кем-то запущенный поезд.
          • 0
            знаю, но реально не времени :), постраюсь исправится, но я думаю ИЕ8 долго догонять не придется, я думаю больше потерь будет щас мыкатся под него еще сырого, вот под Сафари бету я сразу начал тестить, както больше доверия вызывало, а вот ИЕ просто пугает, опять новый браузер выйдет
  • 0
    Вообщето не "Якорь", а индефиктор фрагмента ;) Вообщем полезно, я таким способом реализовал AJAX галлерею.
    • +2
      anchor = якорь
      • –3
        причом здесь anchor?!
        • +5
          да я всегда слышал что #blabla - это якорь, да и в книгах так зачастую пишут, а вообщем какая разница, главное суть чтобы понятна была, нравится индефиктор фрагмента - значит идент-р фр-та ;)
          • –13
            Прошу прощения, но он так всю жизнь назывался и нужен в урле для того чтобы указать фрагмет на странице. Кстате о книгах... с недавних пор специальную литературу читаю в оригинале и вам советую.
            • 0
              Так он же как раз в русс. яз. переводе и назывался "якорем", исходя из логики метафоры — "зацепиться якорем" за озвученный вами "фрагмент страницы"... разве не так?
              • 0
                http://tools.ietf.org/html/rfc3986#section-3
              • +2
                нормальным переводом называетса перевод который можно переводить туда обратно и не терять смысл. Здесь же получаетса:

                fragment identifer -> якорь -> anchor

                Чувствуеш разницу?
                • 0
                  а сокращенно будет «ФИ» %) да еще и в ЮэРэЛ-е >:)
  • +5
    вот один из немногих примеров статьи, ради которых я читаю хабр.
    спасибо.
    • 0
      спасибо! это лучшая похвала для нас, как авторов!
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    А поисковым роботам что делать?
    • +5
      Вот-вот. Никогда не понимал людей, которые стремятся сделать *весь* сайт без перезагрузок страниц вообще.
      • +1
        Я тоже считаю что ajax надо использовать с головой. Особенно с выводом основного контента.
        Его так не любят поисковики...
        Я понимаю, использование ajax, в добавлении коммента или добавлении страницы в закладки, голосованиях... но в выводе контента для сайта - извините нет, только для интерфейсов амин. части.
        Ну не любят поисковики вывод контента ajax, а также и флеш туда же...
        Идея статьи хороша! Но только чисто теоретически, реальное же применение очень сейчас сомнительно. Да и я думаю большие компании не очень заинтересованы в таком подходе... сами знаете почему... реклама, я думаю поэтому и ajax только "раскурутили" недавно, хотя практически его можно было использованть ооочень давно.
        • +1
          для флеш/ajax сайтов уже сто лет применяется технология cloaking (её еще используют чёрные SEO-шники)

          это когда детектится поисковой кроулер и ему подпихивается machine-readable контент

          в гугле за это банят только если это используется как чёрное SEO
        • 0
          в данном случае достаточно всего лишь сделать noscript-версию сайта
        • 0
          смотрите на реализацию на моем сайте http://fullajax.ru, поисковики его хавают на ура, и АЯКС там везде, и это только один из примеров, в данном случае используется техника Fly AJAX (преобразование в AJAX «налету», или если по другому называть AJAX-фильтр - ссылки и формы по указанным критериям автоматически превращаются в AJAX)
          вариантов решения проблемы индексации есть несколько, но это не входит в рамки данной статьи... выше указанные товарищем alex_blank способы тоже можно использовать удачно... универсального лекарства в мире не существует ни от чего, поэтому выбор того или иного подхода зависит от каждого конкретного случая
    • 0
      а они видят то что увидите и вы если отключите жабаскрипт, роботы все равно якоря отсекают, они увидят главную страницу (естественно никаких редиректов) - и оттуда начнут свою работу
      • 0
        но у вас же все ссылки http://site-name/#:anchor
        • 0
          гляньте примеры автора и сам скрипт, ссылки вполне обычные ;)
    • +1
      вот основной плюс этой технологии - что поисковикам все отлично показывается, в отличие от других вариантов!
      • 0
        да, может оно и работает с роботами, т.к. вроде ссылки нормальные. в коде.
  • +1
    Идея хорошая, реализация тоже, а вот применение, на мой взгляд, не самое лучшее.
  • +11
    мда... маразм крепчал...
    ну засунь ты в пустышку ссылку на карту сайта и обрети спокойствие.

    когда же горе-прогеры перестанут, наконец, грузить контент страниц аяксом и начнут грузить аяксом только сопутствующие контенту блоки, оставив тем самым в покое поисковики, закладки, якоря и прочие сущности?

    не надо создавать себе и пользователям геморроя!
    • +1
      никогда не перестанут, ибо в этом есть определенный смысл, вы сильно заблуждаетесь в том что АЯКС предназначен только для загрузки только сопутствующих контенту блоков, АЯКС - это инструмент - похож на нож - а как им пользоваться каждый реашет сам в зависимости от поставленных задач, так вот в ваша позиция - получается что НОЖ РЕЖЕТ ТОЛЬКО КОЛБАСУ; мое мнение что ножом можно и сопилки вырезать. Все дело в том в чьих руках этот нож - им ведь и зарезать когото можно...
      • +4
        ага. а еще если мозгов мало, можно палец себе отрезать.
        • 0
          выстрелить в ногу, как говорили наши "отцы" (:
      • +2
        Хм.. А с какой целью применена технология AJAX на сайте http://fullajax.ru ? В данном случае вы нож просто в руках вертите, показывая что он у вас есть. Так, имхо конечно, но идея применения именно тут - непонятна.
        • 0
          да верно, хорошо сказано, тут просто идет жанглирование ножом :), а там больше и не надо, это просто МИНИ-демонстрация возможностей
          • 0
            Вы же пример должны хороший подавать, как правильно использовать вашу технологию.
            А что мы видим? Жонглирование ножом... ;)
            • 0
              может мне спец-но ради примера еще развернуть у себя супер-сложное веб-приложение :)
              • –1
                да, было бы неплохо. в доказательство того, что и "супер-сложное веб-приложение" можно сделать по этой технологии и это не вызывает тошноты.
                • 0
                  а почему я должен кому-то что-то доказывать :D, знающие люди и так понимают
                  • –1
                    знающие люди, как раз, понимают, что получается в итоге херня. осталось, чтобы и ты это понял.
                    • 0
                      аргументируйте, или просто так, потрепаться?
                    • 0
                      ты чего хамишь? ты сам ручками чтото своими делал? или только хамить умеешь? если руки у когото кривые - это не значит что они у всех такие
    • +1
      Случаи, когда контент должен подгружаться динамически, не так редки.
      Взять хотя бы gmail, google maps.
      • 0
        1. Я думаю, ссылки на ваши письма в вашем ящике с вашим логином и паролем нечасто раздаёте =) Да и в избранное не за чем добалять.
        2. Google Maps по сути реализованы первым способом (описанном в статье) и он является оптимальным в данном случае.
        • 0
          URL в строке броузера постоянно меняется в Google Maps. Обратите внимание.
          • 0
            У меня не получилось добиться смены URL ни при поиске адреса, ни при использовании самой карты.
            Всё время один и тот-же: http://maps.google.ru/maps?hl=en&tab=wl
        • 0
          1. Согласен, ссылки на свои письма раздавать приходится нечасто. Но можно нафантазировать приложение, назовем его gwiki, похожее на gmail и позволяющее обращаться к тексту коллективно. Тогда вопрос о линках будет актуален.
          2. Думаю, автор и сам имел в виду в первую очередь google maps. Насчет оптимальности не соглашусь - пользователь вполне может не задумываясь добавить страницу в закладки и неприятно разочароваться, когда вместо нужного места на карте откроется заглавная страница.
  • –1
    авторам можно было немного поискать по Хабру и понять, что тема неоднократно поднималась
    http://www.habrahabr.ru/blog/webdev/2336…
    http://www.habrahabr.ru/blog/webdev/2346…

    если интересует реализация под Joomla, то некоторое решение приведено на sunnybear.ru (замечу, без редиректов\)
    • +2
      мы предложили вариант которого еще никто никогда не предлагал, и прошу заметить такие вот слова в конце статьи: Необходимость внедрения рассмотренного алгоритма зависит от конкретной ситуации.
      по поводу http://sunnybear.ru/ - да, там без редректов, и без истории и без АЯКС ссылок :), смотрел в ФФ
  • +3
    Здесь Здоровье Здание
  • +7
    Если дошло до того, что вам нужно послать другу страницу с результатами работы AJAX-скрипта, значит вы неверно применяете эту технологию. Из-за этого всегда ругали фреймы, и что теперь? Теперь архитектура сети нарушается с помощью новых технологий и без фреймов. Чума.
    • 0
      что значит неверно применяете эту технологию :), кто определяет рамки ее применения? ее надо просто использовать выгодно и удобно для юзера;
      вы хотите сказать что тут http://wikimapia.org/#lat=24.99975&lon=1… неправильно и не удобно?
  • 0
    А я использую очень простой вариант у себя в проекте - так как система понимает как ссылки на ajax содержимое, так и на обычное, то я при включенном режиме "Ajax mode" добавляю для каждой ссылки дополнительный параметр с перечислением всех нужных для ajax переменных. Потом вначале каждой загрузки(неважно, обычной или ajax небольшой скрипт на jQuery пробегается по всем ссылкам и задает тем из них, которые аяксовые, обработчики событий с вызовом функции Ajax загрузчика).

    Вот, собственно, и она:
    function init_ajax_links()
    {

    $('a').each(function(i){
    var p = $(this).attr('params');
    if(p != undefined)
    {
    var list = p.split(';');
    for(var e = 0;e < list.length; e++)
    {
    var tmp = list[e].split(':');
    if(tmp[0] == 'id'){var id = tmp[1];}
    if(tmp[0] == 'type'){var type = tmp[1];}
    ....

    }

    var url = '/modules/' + mod + '/ajax?page=' + id + '&t=' + type;
    if(pg)
    {
    url += '&pn=' + pg;
    }
    $(this).click(function(){

    ajaxLoad(url, pos);
    return false;

    });
    }

    })

    $(document).ready(function(){

    $(document).ajaxComplete(function(evt, request, settings){
    init_ajax_links();
    });

    init_ajax_links();

    });
  • +1
    пока не грянул суперхабр, где, наверное, будет нормальное форматирование кода, советую кидать код на другие сайты
    например, http://text20.ru, кстати, дизайн для него делал посмотреть профиль misha_kvakin (если я не путаю =) )
    • 0
      первое, что бросилось в глаза на http://text20.ru/, это неправильное обрезание юникодовых названий
      • 0
        пишите багрепорты =) я не имею никакого отношения к этому сервису
  • НЛО прилетело и опубликовало эту надпись здесь
  • +3
    Что то вы намудрили.

    Уже давно есть SwfAddress который очень успешно решает все эти вопросы.

    Пример с SEO
    Пример с Ajax

    А для полного счастья есть jQuery и jQuery.History/Remote или jQuery.Sifr
  • 0
    Хм. Натолкнули меня на идею, которая круче авторской намного :) Не нужно никаких JS и работы на 10 минут. Спасибо :)
    • 0
      Поделитесь пожалуйста, если конечно не секрет. Как говорится, нет предела совершенству...
  • +1
    Полный бред =)
    Во-первых, заставляете человека ждать, пока вы там все подгрузите. Во-вторых, вместо одного коннекта к серверу имеем кучу.
    • 0
      полный бред - писать не разобравшись в чем то, что это бред :) мы как раз и решем проблему того как вы написали - "пока вы там все подгрузите", скрипт-редирект должен быть самым первым прям в теле страницы, и он обрывает загрузку, так что ничего лишнего не грузится
      • 0
        в том все и дело. сначала я гружу индекс, жду, затем индекс обрывает соединение и редиректит в другое место, опять жду. Зачем все эти проблемы?
        Да и потом, вы просто гений, раз смогли уместить скрипт редиректа с одной страницы на другую в огромную статью.
        • 0
          вы с мобилки? да с мобилки надо подождать немного, наверно не больше если бы я сначала отдал весь контент стартовой а потом догрузил необходимый
          • 0
            дольше, если бы вы сразу отдали мне нужный контент.
  • 0
    на всяк, если не было: http://community.livejournal.com/webdist…
  • –2
    В Asp.Net 3.0 уже такое есть) И встроенное)
    • 0
      даа?? а есть где пример посмотреть?
      • 0
        Я на конфе видел. На днях разработчика осень 2007. Назывался контрол что-то вроде "AjaxHistory"...
  • +2
    Очень интересно, надо будет разобрать поподробнее, но не думаю что это будет иметь широкое практическое применение, избыточность технологии налицо да и как некоторые здесь упомянули по страницам основным можно и так перейти без аякса, и уж тем более не таким количеством операций для этого необходимых. Я ознакомился с примерами и они как-то не воодушевили, но на идеи определённые натолкнули, вот за идеи вам спасибо, я думаю что поработаю над этим вопрос и может быть тоже здесь отпишусь по этому поводу когда кармы хватит. Хотя сейчас есть много других тем о которых можно написать, но видно не на этом сайте :(
    • 0
      я уверен! что широкого практического применения не будет, эта статья так сказать это описание возможности, может это действительно когото подтолкнет еще чему-то, к какойто новой идеи, может кому пригодится в чемто, наша статья это не в коем разе не призыв - всем юзать наш метод, это просто описание возможности, такого "финта ушами" еще никто не предлагал :)
      • 0
        Кстати интересно, у меня уже есть некоторое количество плюсов за посты, но карма по прежнему ноль :) Видно не судьба мне свои статьи на этом сайте опубликовать.
        • 0
          могу посоветовать опубликовать с помощью когото, мне помог aleks-raiden - за что ему большой респект
          • 0
            Ну разве что так :)
        • 0
          Дерзайте ;)
        • –1
          Плюсанул карму
          • 0
            Благодарствую! Уже готовлю тему.
  • 0
    Мы у себя в студии в первый раз применили, увидев это решение на сайте apple.com.
  • 0
    думается мне, что решающим фактором популярности идеи будут именно эти 2 лишних запроса к БД.
    кстати, как справятся с этими лишними запросами кэширующие компоненты Joomla?
    ещё кстати: указанный код сделан для русского клона Joomla - Joostina (разработка Бостона). Этот клон в частности оптимирует кол-во запросов к БД. С чего бы вдруг ради аякса такая расточительность, как намеренно лишние запросы?
    • 0
      указанный код работает как мамбот для Joomla, ну и для Joostina тоже скорее всего работает, серверная часть в реализации автора проекта http://joostina.ru
  • 0
    честно говоря уже год это использую...
    линки формирую якорем. перез загрузкой странциы JS распарсивает якоря и релоадит страницу с нормальными GET-ами, которые в свою очередь обрабатываются модреврайтом.
    все как в сказке и уж сто лет назад :)
    • 0
      ну вот, мы не одиноки :), это радует
  • 0
    А вот давайте подумаем, что лучше - AJAX получение данных или классическая схема с перезагрузкой страницы?

    Допустим на стандартном сайте какой-нибудь компании, к примеру, проще, быстрее и дешевле применить классическую схему с релоадом страниц и настроенным кешированием.

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

    А теперь вопрос: где в реальной жизни применим fullajax и насколько оправдано его применение?
    • 0
      вообщето вопрос не по теме статьи :), но я вам отвечу - максимальное применение AJAX удачно используется в современных веб-ПРИЛОЖЕНИЯХ, таких в инете вагоны; вас интересует где применяется именно fullajax? http://www.Datamash.us - USA, ПриватБанк - Украина - внутренний портал, знаю что скоро должен скоро выйти большой портал города Нижний-Новгород, прочее..., люди которые используют fullajax - уже многократно говорили спасибо
  • 0
    не вариант. В более сложных аяксовых приложениях проблема возникает, когда на странице куча блоков, каждому из которых сопутствует свой кусок жаваскрипт кода. Для нормального показа сильно-аяксных страниц на сервере как минимум нужен жаваскриптовский движок.
    • 0
      непонятно, раскройте суть вопроса, слишком общее высказывание
      • 0
        Суть в том, что если станицы генерит более 5к строк жаваскрипного кода, то перенос всего дела(или его части) на общее обозрение(для поисковиков) невозможен без генерации страниц на сервере. Чтобы не переписывать клиентский жаваскрипт необходимо или выполнить его на сервере и отдать конечному клиенту готовый результат, или научить поисковичи интерпретировать жаваскрипт или переписать клиентское приложение на серверный лад на другом языке.

        Естественно последний вариант черезчур трудоемок.

        Я на данный момент не знаю ни одного удобного метода некоторые страницы в полностью жаваскриптном сайте сделать доступными для поисковиков. (на всех страницах присутствует более одного уровня вложенности объектов).

        как-то так.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      некоторые и жабаскрипт отключают, а некоторые и вообще не знают что такое интернет и что теперь? вам нужны такие юзеры, вы должны позаботится о том чтобы им было комфортно, делайте свой сайт соответвтенно своей аудитории, мы же вам не мешаем :)
      • 0
        А я вот согласен с zzzzz по поводу рефереров - иногда их режет прокси, иногда "умный" фаервол, иногда телепорт, даунлоадеры могут подставлять туда запрашиваемый же урл (обход защиты), банерорезки его меняют/удаляют (admuncher, proxomitron) и т.п. В общем, бывает.
        • 0
          да я тоже согласен, бывает, можно этот момент записать как недостаток метода
  • 0
    Быть может я что-то не учел (найдите плиз недостатки кто сможет), но почему бы не делать так: все ссылки в html всегда кошерные (т.е. без #хэша). И только в onload страницы скрипт проходит по всем <a> меняя им href на "/#/"+href (утрирую).
    Получается, что:
    1. поисковики и другие JS=off всегда будут натыкаться только на кошерный урл (ну и полный HTML по нему)
    2. только те у кого JS=on увидят продвинутые (с #хэшем) урлы.
    3. при заходе на / отдается всего два html тэга: <script> (который парсит #хэш и догружает его аяксом) и <noscript> (который делает meta-редирект на кошерный урл полного HTML главной страницы). Больше на / никакого HTML не должно быть, т.к. никому он и не нужен - см. пункт 1.
    4. Если пользователь с JS=on кинет/опубликует свою некошерную ссылку для кого-то с JS=off... у последнего загрузится корень сайта :( но я смотрю что в топике с этим вообще плохо.
    Итого, всё то же, но без двойных редиректов и воркэраунда для IE?
  • 0
    ну в твоем варианте в коце концов ссылки будут такого типа _http://www.pricelist.uz/ru/goods/catalog…
    длинновато немного,
    и даже иногда может быть вот так
    _http://www.pricelist.uz/ru/goods/catalog…
    ну а вообще тоже как один из возможных вариантов
    • 0
      Нет, неправда :) Я указал более-менее точный алгоритм замены href - новый href будет начинаться на слэш (т.е текущий урл препендиться не будет).

      ЗЫ. Эх недодумал я даже немного. Лушче чтобы аяксовые урлы начинались на /go#/ тогда на / будет рядовой html как всегда, и /go будет редиректить туда если JS=off. Тогда это можно навесить на вообще любой сайт. Ну да это уже твики.
  • 0
    Идея и в правду хороша и актуальна, но как было сказано использование фулаякса целесообразно только в веб-ПРИЛОЖЕНИЯХ, а раз так, то зачем уникальные ссылки в приложении? И второе: Использование fullajax.ru намного быстрее и удобнее при отключенном Javascrip'e (проверенно в опере), да и с хистори тяжелее ( при возврате посылается новый запрос серверу, а при статике все отлично берется из кэша).
    • 0
      конечно быстрее, наверно негрузятся JS скрипты: основной, аналитика, рекалама, счетчик, скрипт закладок - вон их сколько, рубим ЖС и наслаждаемся работой сайта, у вас есть выбор:хочеш так - хочеш этак, я так понимаю это ведь хорошо?

      то зачем уникальные ссылки в приложении - да могут они понадобится, вот вам пример http://www.datamash.us/#:chips:goto:gs12 (тут реализован не тот механизм который описан в этой статье, но все же),
      мне в Гмайле нехватает к примеру прямых ссылок, что помогло бы открыть второе письмо в новом окне, а так приходится больше движений делать
      все зависит от вашей фантазии - хотите берите - не хотите проходите мимо, а хотите чтото свое предложите
      • 0
        неверный посыл - в Гмаиле вам нужна функциональность, а не ссылки.
        • +1
          ну так такая функциональность решается как раз с помощью ссылок, кликнул средней мышкой по ссылке - тебе таб новый и открылся
      • 0
        "у вас есть выбор:хочеш так - хочеш этак"
        Только вот в чем неудобство, для каждого сайта в отдельного сайта отелючать яваскрипт неудобно. Может меня устраивает всплывающее меню, но очень напрягает время на водторные результаты того, что у меня уже есть в хистори.

        А по поводу гмаила зря вы так. Письма прекрасно открываются в новом окне (shoft+click). К стати там есть прамая ссылка на цепочку писем
        (недооцениваете вы гмаил).
  • 0
    Немного позанудствую.

    Для примеров ссылок надо использовать сайт http://example.com/.
  • +1
    передавать параметры запроса в реферере!?
    ...ну просто очень нездоровая идея!
  • 0
    http://ajaxpatterns.org/Unique_URLs
  • 0
    Некоторые провайдеры режут реферреров. Некоторые сетевые администраторы настраивают в сетях шлюзы/огнестенки так (не всегда специально), чтобы реферреры резались. Итого имеем проблему: метод для некоторых пользователей принципиально не работает.

    И да. Используйте патенотованные велосипеды:

    History/Remote - jQuery plugin solution for hijaxing links and enabling history <- тут всё есть ^_^
  • 0
    full-ajax сайты имхо бред, спорит со всей идеалогие гипертекста, что в админке хорошо на клиент просто треш.
    • 0
      предел вашей фантазии админка
      • +1
        просто думать и пользователе нужно всегда, а не гнаться за фишками ради галочки.
        вы попробуйте нажать на ссылку в меню с шифтом? ну и где моя 2я закладка?
  • 0
    Я чегото не понял видимо... а зачем вообще какието JS для генерации и вытаскивания якорей? передать то что чтото нужно обновить можно элемнетарно через теже гетпеременные если не устраивает якорь.
    Затем все очень просто:
    [html]
    [body]
    ....
    [/body]
    [/html]

    гдето внутри есть наши участки, кторые грузятся аяксом, кто запрещает на стороне сервера разобрать нужные переменные и добавить в конец страницы либо в инициализатор onload JS с вызовом подгрузки нужного контента?
    Или я не правильно задачу понял?
    • 0
      видать немного вы не вкурсе работы АЯКС истории и ссылок
  • 0
    Согласен с комментаторами, считающими, что широкое использование данной технологии неоправдано. Да, есть вещи типа wikimapia.org - там идентификатор фрагмента используется действительно используется для определения фрагмента, только не страницы, а карты. Это нормально и в случае навигации по списку, разбитому на страницы (страница списка - это тоже как бы фрагмент). Логика при этом не страдает. Но грузить всю страницу через AJAX - это неоправданное усложнение кода и архитектуры (и, как следствие, снижение надёжности), лишняя нагрузка на сервер и на клиентскую машину. Не нужно бояться перезагрузить страницу в браузере.
    • 0
      да этого не нужно боятся, АЯКС не панацея, и нет пропаганды - все на АЯКС, все надо делать с головой, делать надо то что нужно, а не только то что модно; в тоже время мир не однаобразен и в нем столько разных случаев, так что комуто вполне нужна и генерация всего контента с помощью АЯКС
      вот один из возможных вариантов http://extjs.com/deploy/dev/examples/des… - куда вполне можно добавить много АЯКСа, и будет вери гуд
  • 0
    Госспади, "придумали алгоритм". Авторам было неплохо иногда выходить за пределы рунета. Это уже оччччень давно(больше года) было. Виват!
    • 0
      ссылку то можно, дабы мы устыдились? а то так, как то оно звучит...
    • 0
      внатуре, голые слова, ссылки в студию! (я уверен на 99% - мы первые кто предложил такой подход)
  • 0
    ну вот, прошло пару дней и нарисовалось еще более интересное применение описанного алгоритма, так сказать его продолжение, в синтезе с Dojo Storage (или каким нибудь другим хранилищем) получится очень удачное решение и загрузка страниц (в данном случае стартовой) будет работать быстрее даже чем с отключенным жабаскриптом
    P.S.: дом строят из камней, так что давайте еще побольше закидаем нас камнями
  • 0
    Да, но гордо называть этот маленький JS-cкриптик мега-пупер Технологией — слишком громко.
    К тому же ничего нового в этом нет — уже придумано и сделано на западе.

    С другой стороны, респект авторам за структуризацию и популяризацию ))
    • 0
      а можно про "ничего нового в этом нет — уже придумано и сделано на западе." - подкрепить ссылками? а то здесь уже много кто говорит, но вот реально предоставить что-то не смог пока никто. А поверить, что что-то смогли впервые придумать и целостно реализовать у нас - неужели сложно?
    • 0
      1) дело не в только в жс скриптике, а в самом алгоритме
      2) опять пустые слова про запад :), нету за бугром такого
      я уверен если бы эту статью опубликовали гдето за бугром на английском языке, то народ бы подругому относился, как то не ценим мы свои мозги
      • 0
        Я не понимаю, вы вправду на полном серьезе думаете что передавать параметры в реферере очень оригинальная идея?
        Это просто очень смелый шаг на который не многие решаться ;)
        • 0
          да, я думаю что идея оригинальная, и еще раз повторюсь - эта идея не панацея, она имеет как достоинства так и недостатки, целесообразность ее использования каждый должен решать сам, я уверен что во многих ситуациях использовать ее нет необходимости, но знать о существовании такого подхода не помешает никому, вам лишние знания за горбом не носить, как минимум, вам может когда-то пригодится:
          1) кроссбраузерный прием сохранения реферера при использовании редиректа с помощью javascript - только этот алгоритм чего стоит, я его нигде не слизал, а сам экспериментальным методом составил, и в инете такой алгоритм не валяется
          2) прием обрыва потока ненужных данных и получение нужного контента - пусть это будет используя что угодно - хоть реферер, хоть куки, хоть серверные сессии, - это уже как вам выгоднее
          возможно, в ближайшее время (если будет свободных пару часов) я постараюсь описать продолжение - еще один из примеров работы АЯКС (прием базируется на схожем алгоритме, но более эффективен), который до сих пор нигде не использовался (хотя изначально не я его придумал, но значительно расширил)
  • 0
    swfaddress
    SWFAddress.onChange = function() {
    if(SWFAddress.getValue() != '/')
    var value = SWFAddress.getValue();
    else
    var value = 'index';
    getPageHTML(value);
    }

    function getPageHTML( pageName ) {
    new Ajax.Updater('pageBody', './getPage.php',
    {
    method:'post',
    parameters: {page: pageName}
    });
    }
    Самая простая реализация.
    • 0
      http://text20.ru/823
      sorry за nohtml
    • 0
      штучка хороша, использует принцип дозапроса данных после отображения либо главной страницы либо страницы пустышки (соотвественно не лишена указанных для этих случаев недостатков) + как небольшой недостаток использование Flash.
      Аналогичный функционал можно сделать используя один javascript. К примеру в fullajax реализации это решается вызовом одной функции SRAX.directLink(), куда уж проще :)
      Пример (там же смотрим в исходный код)
  • 0
    В целом технология понятна. Простое и хорошее решение. Н
    о можно пару слов о том, как организовать переходы вперед-назад по нажатию на кнопки браузера (на сайте это реализовано)?

    Прошу прощения, если это глупый вопрос. :)
    • 0
      Спасибо, к сожалению в пару слов не влезть, реализация АЯКС истории - это еще один из гемороев, каждый из 4-х браузеров (ФФ, ИЕ, Опера и Сафари ) - требует специфического для него решения... в своей либе я долго вылизывал алгоритм работы истории, советую вам использовать уже существующие наработки, вот к примеру эту http://code.google.com/p/reallysimplehis…
      на сайте http://fullajax.ru - принцип тот же, но используется своя реализация, которая немного более адаптирована для использования AHAH (Asynchronous HTML and HTTP) + аякс история в моей реализации интегрирована прям в методы коммуникации (т.е. другими словами, про историю думать не надо, она реализуется автоматически)
  • 0
    Есть очень интересный вариант !

    В Firefox и Opera делаем через якорь.

    А вот в IE создадим где то в верху сайта невидимый div а в него добавим пустые селекторы a у которых есть замечательный атрибут name !
    И каждый селектор назовем как наши якоря.
    В итоге получим что IE каждый раз будет ссылаться к селектору и кнопки Back и Forward будут работать !

    Есть и минусы :
    В history это никак не отобразиться !
    А также нужно знать наперед какие якоря есть на сайте !
    • 0
      немного непонятно: что значит Back и Forward будут работать и в то же время в history это никак не отразится?
  • 0
    мм…
    имхо, двойной редирект — лишнее
  • Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.