Вступ до AJAX

AJAX - це чудова технологія, яка дозволяє зробити сайти повністю інтерактивними та живими :) читаємо далі

Введення в ajax

У нашому світі нових інформаційних технологій раз у раз з'являються всякі езотеричні мови програмування, сервіси, формати, але ajax – це зовсім не чиєсь забаганка, це потужний підхід до створення інтерактивних сайтів. Повірте ajax легше вивчити нову мову програмування. У цій статті ми отримаємо базові поняття та розглянемо прості приклади.

Навіщо потрібний ajax

З появою web-технологій для доступу до найсвіжішої інформації нам лише потрібний браузер і . і все! Ми завжди будемо в курсі новинок усіх магазинів і матимемо доступ до найсвіжішої інформації. Але за все доводиться платити. У цьому випадку нам доводиться постійно чекати завантаження сторінок, форм та іншого. Технологія ajax дозволяє позбавитися завантаження цілої сторінки. Тепер ми можемо оновити те, що нам потрібно. Наприклад, заповнивши форму, не завантажуватимемо з сервера всю сторінку, а завантажимо лише відповідь від сервера у певне місце сторінки.

Заліземо під капот

Для того, щоб зрозуміти ajax потрібно мати уявлення про інші, web-технології, тому що ajax одночасно охоплює в собі кілька складових:

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

Алгоритм дії для створення ajax-запиту

Перед тим як перейти наприклад розглянемо алгоритм дій, які потрібно виконати для того, щоб реалізувати ajax запит:

  1. створення екземпляра об'єкту об'єкту XmlHttpRequest;
  2. надсилання запиту методами open та send;
  3. прийняття та обробкаданих користувача сервером; відповідь сервера;
  4. Обробка відповіді сервера, наприклад, за допомогою методу навикористаннядержави.

Створення екземпляра об'єкту об'єкт XmlHttpRequest

Тут нічого важко. Створюємо звичайний об'єкт:

Надсилання запиту методами open та send

Метод open() має такий формат:open(тип_запиту,url,спосіб), детип_запиту GET або POST,url - шлях до запитуваного файлу,способ - синхронний (false) чи асинхронний (false) метод виконання.

Метод send має формат:send('інформація') - передаєінформацію на сервер.

Створимо екземпляр об'єкта XmlHttpRequest та за його допомогою асинхронно передамо файл my.txt на сервер.

Для запиту шляхом POST все буде аналогічно. Тільки методі open() потрібно замінити перший аргумент " GET " на "POST".

Напишемо простий приклад для реалізації калькулятора, який вміє перемножувати числа:

У даному прикладі залишилося лише створити файл з ім'ям "get_result.php" в якому потрібно обробити GET-запит: витягти з рядка 2 числа, перемножити їх і вивести. Тут нічого складного, тож зупинятись не будемо.

Стан готовності сервера

У попередніх прикладах ми вже використовували властивість State . Зупинимося на ньому докладніше. Ця властивість дозволяє дізнатися стан сервера. Існує п'ять станів сервера:

  1. немає запиту;
  2. підключення до сервера встановлено;
  3. запит отримано;
  4. запит опрацьовується;
  5. запит опрацьовано та відповідь сформовано.

Процес обробки запиту перемикає стан сервера по черзі з 0 до 4. І тому ми використовували такий код вище (перевірка статусу на рівність чотирьох, тобто на готовність):

За допомогою властивостіstatus можна дізнатися код відповіді на надісланий запит. Наприклад, код 200 - успішна обробка, а 404 - говорить про відсутність сторінки. У прикладі вище ми виконуємо код тільки якщо сервер успішно обробив запит.

Подіяonreadystatechangeвиконується щоразу як змінюється властивістьreadyStateу сервера. Тобто при успішній обробці запиту подіяonreadystatechangeвиконається 4 рази.

Отримання відповіді сервера

При коректній обробці результату властивостіresponseText(у вигляді рядка символів) іresponseXML(у вигляді XML файлу) об'єкта XMLHttpRequest запишеться відповідь сервера. У прикладах вище ми отримували результат із властивості responseText:

Ось і все, ми дізналися що ж таке ajax, дізналися навіщо потрібна ця технологія і привели прості приклади, що пояснюють.