AJAX - новий підхід до побудови інтерактивних веб-сайтів

AJAX (від англ. Asynchronous JavaScript and XML — «асинхронний JavaScript і XML») — це підхід до побудови інтерактивних користувацьких інтерфейсів веб-додатків. При використанні AJAX веб-сторінка не перезавантажується повністю при взаємодії з користувачем. Замість цього з веб-сервера довантажуються тільки необхідні користувачу дані.

Для того щоб дана концепція працювала необхідно між клієнтом і сервером створити так званий Ajax-движок. Який би виконував функції асинхронного доступу користувача до даних на сервері. Як же ж працює модель Ajax?

  • Користувач заходить на веб-сторінку і натискає на якийсь її елемент.
  • Скрипт (на мові JavaScript, якраз той самий Ajax-движок) визначає, яка інформація необхідна для оновлення сторінки.
  • Браузер відправляє необхідний запит на сервер.
  • Сервер повертає лише ту частину документа, яка була запрошена.
  • Скрипт вносить зміни у веб-сторінку, враховуючи отримані результати (без повної перезагрузки сторінки).

Як було сказано вище Ajax – це лише підхід, а не технологія. Він базується на ряді технологій:

  • Стандартизоване представлення з використанням XHTML и CSS;
  • Динамічне представлення і взаємодія з допомогою Document Object Model (DOM);
  • Обмін і керування даними через XML и XSLT;
  • асинхронне отримання даних з допомогою XMLHttpRequest;
  • і JavaScript, що зв’язує все в одне ціле.

Ajax Overview 1

Класична модель веб-додатків технічно є продуманою і логічною, але з її домопогою неможна досягнути хорошої взаємодії з користувачем. І Ajax покликана це змінити.

В чому ж відмінності Ajax? В класичній моделі, коли користувач вводить адресу необхідної сторінки, сервер получає запит по отриманню сторінки і формує відповідь, яка перенаправляється браузеру користувача. В Ajax-моделі перед завантаженням сторінки браузер завантажує Ajax-движок, який відповідає за формування користувацького інтерфейсу і взаємодію з сервером від імені користувача. Основна ідея Ajax-движка полягає в тому, що він проводить взаємодію з клієнтом і сервером асинхронно, а отже користувачу вже не треба чекати повного перезавантаження веб-сторінки, дивлячись на білий екран.

Ajax Overview 2

Ми бачимо, що на однаковому часовому проміжку модель асинхронної взаємодії є кращою, оскільки користувач може виконати більшу кількість операцій ніж в класичній моделі.

Ajax модель є значно важчою в реалізації за класичну модель. Але в мережі Інтернет вже можна знайти готові Ajax-двіжки які можна використовувати для побудови інтерактивних веб-сайтів. Так варто зазначити xAjax.

xAjax це open source бібліотека класів PHP, з допомогою якої легко створювати потужні, веборієнтовані Ajax додатки, що використовують HTML, CSS, JavaScript, и PHP. Додатки, що працюють з допомогою бібліотеки xAjax можуть асинхронно викликати розміщені на сервері PHP функції і обновляти зміст без перезавантаження сторінки.

Як працює xAjax? Біблиотека xAjax створює функції JavaScript, які є оболочкою для PHP функций, що ви можете викликати з сервера. Коли викликається функція JavaScript то ця функція використовує об'єкт XMLHttpRequest для асинхронного з’єднання з об’єктом xAjax на сервері. Після завершення цієї дії повертається xAjax XML відповідь, що містить дані які будуть проаналізовані спеціальними функціями JavaScript-ової частини xAjax і використані для оновлення змісту веб-сторінки.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <h1> <h2> <h3> <h4> <h5> <h6> <address> <em> <strong> <code> <del> <cite> <acronym> <blockquote> <q> <sub> <p> <br> <pre> <ul> <ol> <li> <dl> <dt> <dd> <a> <b> <u> <i> <table> <tr> <td> <th> <div> <sup><hr> <img>
  • Glossary terms will be automatically marked with links to their descriptions.
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
 8888888b.                       888     888   .d8888b.   8888888b.              .d88888b.  
888 "Y88b 888 888 d88P Y88b 888 Y88b d88P" "Y88b
888 888 888 888 888 888 888 888 888 888
888 888 888 888 .d88b. Y88b d88P 888 888 d88P 888 888 888 888
888 888 888 888 d8P Y8b Y88b d88P 888 8888888P" 888 888 888 888
888 888 888 888 88888888 Y88o88P 888 888 888 888 888 888 Y8b 888
888 .d88P Y88b 888 Y8b. Y888P Y88b d88P 888 Y88b 888 Y88b.Y8b88P
8888888P" "Y88888 "Y8888 Y8P "Y8888P" 888 "Y88888 "Y888888"
Y8b

Enter the code depicted in ASCII art style.

© Інформаційні технології. Аналітика , Рідна Мережа