Як відомо, JavaScript бібліотека FullAjax, надає можливість легко впровадити технологію Ajax для Вашого сайту, без додаткових знань JavaScript, потрібно лише базові знання HTML і в деяких випадках зміна логіки в серверній частині сайту. Отже тут опишу декілька основних моментів впровадження цієї бібліотеки.

Завантажуємо свіжу версію (завантажити), та підключаємо її до сайту.

1
2
3
4
<script type="text/javascript" src="/fullajax.js"></script>
<script type="text/javascript">
  //тут параметри налаштування fullajax
</script>

Далі потрібно позначити, ідентифікатором, блок в шаблоні, де буде оновлюватись вміст з допомогою Ajax. В більшості випадків це вже зроблено, при створенні шаблону.

1
2
3
<div id="forFullAjax">
  <!--Тут вміст, що буде оновлюватись.-->
</div>

Все, що сервер буде відповідати на Ajax запити, буде поміщатись в цей блок. Тому потрібно прослідкувати щоб сервер віддавав у відповідь, лише потрібний вміст, а не весь сайт.

Далі, потрібно вказати основні параметри фільтрації посилань, що будуть перетворенні в Ajax, а також інші додаткові параметри для роботи FullAjax.
Приклад налаштування:

1
2
3
SRAX.Filter.add({url:'/', id:'forFullAjax'});
SRAX.linkEqual[':ax:forFullAjax:'] = ':';
SRAX.directLink();

Перший рядок є фільтром, та вказує, що всі внутрішні посилання сайту, які розпочинаються на “/” будуть перетворені в Ajax-посилання. А параметр “id:” – це ідентифікатор блоку, де буде оновлюватись вміст.
Додаткові параметри можна подивитись тут, або на сайті бібліотеки.

Другий рядок, перетворює “:ax:forFullAjax:” , що додається до адреси сайту, в результаті роботи FullAjax, на “:” .

Третій рядок потрібен для того, щоб при введенні Ajax-посилання в рядок адреси, вони працювали.

Ось і все, після нескладних маніпуляцій, ми отримали сайт з технологією Ajax.

Щоб на стороні серверу визначити чи це Ajax запит, чи звичайний, FullAjax встановлює додатковий заголовок HTTP_AJAX_ENGINE із значенням fullajax. Якщо Ваш сервер обрізає передачу додаткових заголовків, то в налаштуваннях FullAjax можна вказати додатковий параметр, що буде передано на сервер і по якому можна буде визначити, що це за тип запиту.
Встановлення додаткового параметру:

1
SRAX.Filter.add({url:'/', params:'ax=ok', id:'forFullAjax'});

Далі приклад визначення типу запиту, на стороні серверу.

1
2
3
4
5
6
if(isset($_SERVER['HTTP_AJAX_ENGINE']) and $_SERVER['HTTP_AJAX_ENGINE'] == 'Fullajax' or $_REQUEST['ax']=='ok' ){
	//Це Ajax-запит, у відповідь потрібно надіслати лише частину сайту.
}
else{
	//Це звичайний запит, у відповідь потрібно надіслати повний сайт.
}

Дещо про FullAjax фільтрацію.

Бувають випадки коли потрібно заборонити перетворення деяких посилань в Ajax. Для цього можна скористатись додатковими фільтрами.
Для одного посилання:

1
SRAX.Filter.add({url:'/administrator.html', type:'nowrap'});

або:

1
SRAX.Filter.add({query:'format=pdf', type:'nowrap'});

Для декількох посилань:

1
SRAX.Filter.add({url:['/administrator', '/web-links'], query:['format=pdf','task=edit'],  type:'nowrap'});

В параметрі “url:” – список посилань, в параметрі “query:” – список запитів, що можуть зустрічатись в URL. Параметр type:’nowrap’ вказує, що ці посилання не потрібно перетворювати в Ajax.
Звичайно не обов’язково вказувати “url:” та “query:” одночасно, можна скористатись лише тим, що більше підходить для конкретного випадку.
Ще, можна заборонити перетвореня посилання, додавши до нього параметр ax:wrap=”0″:

1
<a href="mulink.html" title="My Link" ax:wrap="0">My Link</a>

Приклад ігнорування форми:

1
<form ax:nowrap="1" id="myform">

або:

1
2
3
SRAX.Filter.on('beforewrap', function(ops) { 
	return ops.el.id != 'myform'; 
});

Ігнорування всіх форм:

1
2
3
SRAX.Filter.on('beforewrap', function(ops) { 
	return ops.el.nodeName != 'FORM'; 
});

Також під час виконання Ajax запиту, корисно якось інформувати про це користувача. Для цього можна показати картинку анімації завантаження. В бібліотеці FullAjax є відповідний параметр “loader:”, яким і скористаємось:

1
SRAX.Filter.add({url:'/', loader:'myloader', id:'forFullAjax'});

Та додамо зображення анімації до нашого сайту.
CSS:

1
2
3
4
5
6
#myloader {
	position: absolute; 
	top: 60%; 
	left: 40%; 
	display: none; 
}

HTML:

1
<img id="myloader" src="/ajax-loader.gif" alt="Завантажую..."></img>

Для більш складних сайтів, знання JavaScript все таки не завадять.
Знаючи JavaScript можна створити ефекти зміни вмісту.

1
2
3
4
5
6
7
8
9
SRAX.Effect.add({id:'You-Content-ID',
   start:function(id, request){
      // Тут код анімації після кліку, перед запитом.
      request();  // Виконати запит. 
   },
   end:function(){
        // Тут код анімації після запиту
   }
});

Ось і все про основи FullAjax.

6s коментарів to “ Основи використання бібліотеки FullAjax ”

  1. Doan Minh Hieu коментує:

    How can i disable add fullajax on my registration page?
    add fullajax not show recaptcha on my site when i open registration page.
    thank you so much

  2. Doan Minh Hieu коментує:

    how can i put percent preloader when open content with full ajax

  3. Son коментує:

    I see when login it’s reload page

    How to i can use login whith fullajax

    Thanks

Написати відповідь до Doan Minh Hieu Скасувати відповідь

Ваша пошт@ не публікуватиметься. Обов’язкові поля позначені *

Можна використовувати XHTML теґи та атрибути: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>