What is AJAX

Організація інтерактивної сторінки;
комплекс jQuery, AJAX, PHP, MySQLi
Частина друга

жовтень 2015

Зміст

  1. Знайомство з AJAX. Перша частина
  2. Організація інтерактивної сторінки; комплекс jQuery, AJAX, PHP, MySQLi. Частина друга
    1. Про асинхронний запит
    2. Приклад застосування AJAX запиту до БД
    3. Обмін даними веб-сторінки із БД
    4. Скрипт jQuery
    5. PHP скрипт
    6. Заключення

1. Про асинхронний запит

Реалізація HTML веб-сторінки із застосуванням скриптів jQuery, застосуванням PHP-скриптів та можливостями серверу Бази Даних суттєво розширює спектр можливостей веб-програміста.

Одним із елементів, що покращує функціональність веб-сторінки, є застосування методики AJAX - асинхронний обмін даними із сервером, чибто оновлення частини інформації веб-сторінки без перезавантаження всієї веб-сторінки. Поняття асинхронний має на увазі паралельну обробку даних, тобто користувач може користуватись інформацією веб-сторінки (хоча б як мінімум пролистувати інформацію, що знаходиться на веб-сторінці) і в той же час браузер може відправляти AJAX-запит до серверу та обробляти його. Синхронний ж обмін даними приведе до "підвісання" браузера поки не виконається операції AJAX-запиту.

Давайте розглянемо/дослідимо можливості даних елементів веб-сторінки на прикладі реалізації веб-сторінки тесту.

2. Приклад застосування AJAX запиту до БД

AJAX with DB
  1. Quiz "English word"
  2. Тест "Веб-програмування"

3. Обмін даними веб-сторінки із БД

Основні блоки, що приймають участь у формуванні веб-сторінки представлені на схемі:

структурна схема користувач сервер бази даних

Рис. 1. Структурна схема Користувач веб-сторінки-Сервер Бази Даних.

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

id_wordwhat_wordcorrect_word
1ConcludeВисновок
2ConsiderPозглядати
3CompriseBключати
.........
.........
nHandleOбробляти

Звісно кожен тест має свій алгоритм обробки вказаних даних (наприклад, детальніше про Quiz "English word"). Але обробка даних відбувається за загальною структурою, що вказана на рис. 1.

4. Скрипт jQuery

Як відомо скрипт jQuery знаходиться на стороні клієнта та дозволяє виконати елементи веб-сторінки інтерактивними з користувачем. За задумом веб-програміста скрипт дозволяє реалізувати досить гнучку інтерактивну веб-сторінку. Скрипт jQuery відстежує події веб-сторінки і якщо користувач активував елемент веб-сторінки, скрипт за алгоритмом відправляє дані AJAX запитом до PHP-обробника, що знаходиться на сервері.

Прикладом роботи скрипту бібліотеки jQuery, може бути схема інтерактивної сторнки тесту "English word":

відправлення AJAX-запиту до серверу

Рис. 2. Схема обробки відправлення AJAX-запиту до серверу

Якщо брати дещо спрощену схему веб-сторінки...

AJAX with DB

Рис. 3. основні функціональні блоки веб-сторінки тесту

то скрипт jQuery блок 2 відслідковує події веб-сторінки блок 1 та відправляє ассинхронний запит до php-обробника блок 3. У випадку реалізації веб-сторінки Quiz "English word", скрипт jQuery відслідковує чи користувач активував кнопки "Старт тесту", "Коректний переклад пари слова" , "Некоректний переклад пари слова", а також час проведення тесту, якщо час тестування вийшов, то формується AJAX-запит щодо закінчення тестування (рис. 2.)

Зразок формування AJAX- запиту до PHP-скрипту:

<script>
$( document ).ready(function() {
      
  $( "#right_word" ).click(function() {	  
    var quiz='correct';              	  
    $( ".area_for_server_answer" ).load("english_quiz.php",{quiz}); 	 
  });
       
  $( "#wrong_word" ).click(function() {	  
    var quiz='incorrect';            	  
    $( ".area_for_server_answer" ).load("english_quiz.php",{quiz}); 	 
   });
</script>

5. PHP скрипт

PHP - серверна мова програмування, виконує за алгоритмом та обробку отриманих даних, взаємодіє із сервером Бази Даних та формує новий елемент області HTML сторінки.

Якщо ж ще раз переглянути схему рис.2. в частині PHP, то PHP-скрипт отримавши запит від клієнта виконує дії згідно прописаного алгоритму.

Так, PHP-скрипт може обробляти дані результуючого запиту до сервера БД, наприклад за таким зразком:

<?php
...

// отримуємо дані AJAX запиту
$quiz=$_POST['quiz'];

//формуємо першу пару слів
if ($quiz=="start") {

// зєднуємось із БД
$mysqli = new mysqli( дані доступу до БД );
mysqli_set_charset($mysqli, "utf8");

//отримуємо дані таблиці 
$res = $mysqli->query("SELECT * 
		FROM `english_word`
		ORDER BY RAND()
		LIMIT 1;");
$row = $res->fetch_assoc();
  
//виводимо дані таблиці english_word			
echo ' Слово '.$row['what_word'];
  
// закриваємо зєднання із БД
$mysqli->close();  
};

?>

Звісно, все що виводить PHP-скрипт echo .... виводиться в області selector, вказаному в AJAX методі load():

$(selector).load(URL,data,callback);

Відповідно, можемо реалізувати іншу обробку отриманих даних від клієнта, на зразок наступної частини PHP-скрипту, в якій в залежності від отриманих даних, виконується обробка функцій Check_Word(), Choose_Word(), Show_Word():

<?php
...

if ( $quiz == "correct" ) {
   Check_Word(1);
   Choose_Word ();   
   Show_Word($what_word,$quiz_word);
};

//блок що формується, якщо юзер неправильно відповів
if ( $quiz == "incorrect" ) {
  Check_Word(0);
  Choose_Word ();  
  Show_Word($what_word,$quiz_word);
};

?>

6. Заключення

Вважаю, використання асинхронного обміну даними із сервером Бази Даних значно розширює можливості звичайної веб-сторінки.

Задля формування AJAX запитів в бібліотеці jQuery є достатньо різних методів: .ajaxComplete(), beforeSend(), .ajaxStart() та інших, так що в цілому є над та з чим працювати при розробці веб-сторінок...

На цьому коротке ознайомлення із AJAX-запитами завершено, всього найкращого та удачі в програмуванні!

Анатолій