Знаниями нужно делится...

JQuery и Ajax ссылки.

Назад к списку | Просмотров: 2531

Сегодня в Web программировании часто можно слышит модное слово «адаптивный дизайн». Что, по сути, возможность программы сохранять функциональность при различных настройках клиента. В рамках этого вопроса я, я решу такую задачу, как замена обычных ссылок на Ajax.

Данная технология весьма проста, а использование библиотеки JQuery послужит роль кросбраузерной прослойки (можно обойтись и без нее, но количество кода заметно возрастет), что сделает разработку еще проще. Мы будем отслеживать изменения якоря(hash), части адреса страницы, а сам якорь будет являться прямым адресом на ресурс либо псевдонимом для него. Получив адрес, находим для него контейнер, если его нет, то контейнером по умолчанию является контейнер «body». Дальше делаем простой GET запрос, а результат выводим в контейнер.

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

При инициализации AjaxRouter находит все ссылки, которые должны быть «превращены» в Ajax ссылки. Шаблон селектора для поиска хранится в переменной AjaxRouter. searchLink = 'a. AjaxLink'; по сути это любая строка запроса селектора понятная JQuery. Далее в ссылке идет поиск атрибутов data (у библиотеки JQuery есть возможность передавать через HTML теги дополнительные параметры используя метод data, указывая атрибуты тега следующим образом: data-some=”some str”)). Задано два атрибута 'aj_alias' – псевдоним для ссылки, и 'aj_container' - контейнер – куда будет помещен результат запроса. Полный код AjaxRouter

(function(window, name){ 
    
    var ajaxRouter = {
        containers:{},
        aliases:{},
        searchLink:'.AjaxLink',
        init:function(){
            $(ajaxRouter.searchLink).each(function(){
                var self = $(this), hash = self.attr('href'), url = hash; 
                if(self.data('aj_alias')) {  
                    ajaxRouter.aliases[self.data('aj_alias')] = hash;
                    url = self.data('aj_alias');
                }
                if(self.data('aj_container')) {                  
                    ajaxRouter.containers[hash] = self.data('aj_container');
                }                  
                self.attr('href', '#!'+url);
            });
            
            
            if('onhashchange' in window && !($.browser.msie && $.browser.version == '7.0')) {
                $(window).bind('hashchange', this.handler); 
            } else { //к сожалению IE 7 и ниже не понимают события 'hashchange'
	   //поэтому пишем костыль	
                var olhHash = location.hash;
                setInterval(function(){
                    if(olhHash != location.hash) {
                        olhHash = location.hash;
                        ajaxRouter.handler();
                    }
                }, 300);
            }   
        },
        handler:function(){
            var url = location.hash.slice(2), container; 
            url = ajaxRouter.aliases[url] || url; 
            if(url == '') {
                return;
            }  
            container =  ajaxRouter.containers[url] || 'body';  
            $.get(url, function(html){ $(container).html(html); });
        },
        setAlias:function(url, alias) {
            ajaxRouter.aliases[alias] = url;
        },
        setContainer:function(url, container) {
            ajaxRouter.containers[url] = container;
        }
    };
    
    
    window[name] = ajaxRouter;
})(window, 'AjaxRouter');

Разберем простой пример. Для начала нужно подключить на страницу скрипт приведенный выше и любую версию библиотеки JQuery. На странице создаем ссылки следующего вида:

<a href="foo.php?x=11&12" data-aj_alias="x/11/12" data-aj_container="#page" class="AjaxLink" > Тест 1</a> 
<a href="foo.php?x=222&244" data-aj_alias="x/222/244" data-aj_container="#page" class="AjaxLink" > Тест 2</a> 

Так же на страницу надо добавить контейнер

<div id=”page”> </div>  

и сам вызов обработчика

$(function(){ AjaxRouter.init(); AjaxRouter.handler(); }); 

В результате ссылка которая ранее имела адрес foo.php?x=11&12 получит #!x/11/12, а при нажатии на нее будет осуществлен запрос на страницу foo.php?x=11&12, результат которого будет виден в контейнере #page. Теперь легко добавлять или убирать со странице ссылки, которая будут отправлять Ajax запросы и обновлять содержимое страницы. Помимо гибкости в реализации данного подхода, есть еще одно преимущество – сохранение посещенных ссылок в истории.


автор admin дата 21/10/2013


Оставить комментарий
7 + 8 =