Як відомо, 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.
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
If you use addFullajax plugin then there a params for disable the plugin for specific Menu item.
Check the addFullajax plugin configuration
how can i put percent preloader when open content with full ajax
I do not remember man :D
but, there something like:
need to check the code…
it fired somewhere there fullajax.js#L1210
I see when login it’s reload page
How to i can use login whith fullajax
Thanks
better do login without ajax