What is AJAX

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

жовтень 2015

Зміст

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

1. Знайомство з AJAX. Частина перша

AJAX цікава і дещо велика за об'ємом тема, розглянемо функціонування AJAX в двух навчальних статтях: "Що таке AJAX? Частина 1." та "Організація інтерактивної сторінки; комплекс jQuery, AJAX, PHP, MySQLi. Частина друга.

Що ж до справи,... синхронний обмін данними з сервером без перезавантаження веб-сторінки, чи навіть без переходу на нову веб-сторінку, дуже зручно. Так, для навчання було б здорово реалізувати веб-сторінку з тестом і звісно було б зручно питання/правильні відповіді, що знаходяться в таблиці БД, перевіряти не перезавантажуючи веб-сторінку...

Структурна схема веб-сторінки AJAX із зверненням до Бази Даних мала б вигляд:

AJAX with DB

Давайте спробуємо в цьому по можливості детально розібратись, як виконати AJAX обмін даними із сервером, де знаходиться таблиця Бази Даних...

Спочатку розберемось, що це таке взагалі AJAX?..

1.1. Що таке AJAX?

What is AJAX

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

AJAX — один з компонентів концепції DHTML (Dynamic HTML).

Ключовим моментом AJAX-запиту є об'єкт XMLHttpRequest.

- Що таке об'єкт XMLHttpRequest? XMLHttpRequest — API-запит веб-клієнта (браузера) до веб-сервера за протоколом HTTP у фоновому режимі, для мов програмування JavaScript, JScript, VBScript і подібних. Використовується для синхронного або асинхронного обміну інформацією в довільному текстовому форматі (наприклад XML, JSON, HTML).

Декілька слів про методи та властивості об'єкту XMLHttpRequest

Методи об'єкту XMLHttpRequest:

Метод Опис
abort() скасовує поточний запит
getAllResponseHeaders() повертає повний список HTTP-заголовків у вигляді рядка
getResponseHeader (headerName) повертає значення вказаного заголовка
open (method, URL, async, userName, password) визначає метод, URL і інші необов'язкові параметри запиту;
параметр async визначає, чи відбувається робота в асинхронному режимі
send (content) відправляє запит на сервер
setRequestHeader (label, value) додає HTTP-заголовок до запиту
overrideMimeType (mimeType) дозволяє вказати MIME-тип документа, якщо сервер його не передав або передав неправильно.
Увага: метод відсутній в Internet Explorer

Властивість об'єкту XMLHttpRequest:

Властивість Опис
onreadystatechange обробник події, яка відбувається при кожній зміні стану об'єкта (необхідний для асинхронного режиму)
readyState повертає поточний стан об'єкта (0 — не ініціалізовано, 1 — відкрито, 2 — відправлення даних, 3 — отримання даних і 4 — дані завантажено)
responseText текст відповіді на запит
responseXML текст відповіді на запит в вигляді XML, котрий пізніше може бути розібраний методами DOM
status повертає HTTP-стан у вигляді числа (404 — «Not Found, Не найдено», 200 — «OK» тощо)
statusText повертає стан у вигляді рядка («Not Found», «OK» тощо)


Декілька прикладів AJAX-запиту до серверу

Демо AJAX 1

Асинхронно відправляємо дані на сервер

Демо AJAX 2

Приймаємо дані php-скрипта та виводимо на екран

Демо AJAX 3

Досліджуємо AJAX метод load(). Вводим текст

Демо AJAX 4

Досліджуємо AJAX метод load(). Callback



Дещо з документації про роботу AJAX.

The World Wide Web Consortium (W3C) about XMLHttpRequest

Офіційна бібліотека The Ajax jQuery - The Ajax jQuery library

Навчальний матеріал w3school - About Ajax

Навчальний матеріал w3school - What About jQuery and AJAX?

Навчальний матеріал w3school - AJAX Methods

1.2. Про AJAX з ресурсу w3school

AJAX оновлює лише частину веб-сторінки без перезавантаження всієї веб-сторінки.


Як працює AJAX?

AJAX базується на інтернет стандартах, що використовують комбінацію:

- об'єкт XMLHttpRequest ( для організації отримання даних із серверу)
- JavaScript/DOM (вивести дані на екран монітору чи інші операції над отриманими даними)


Об'єкт XMLHttpRequest

Основою AJAX є об'єкт XMLHttpRequest.

Всі сучасні браузери підтримують об'єкт XMLHttpRequest.
Об'єкт XMLHttpRequest застосовується для прихованого від користувача обміну даними з сервером. Це значить, що є можливість оновити лише частину веб-сторінки без перезавантаження всієї веб-сторінки.

Всі сучасні браузери (Chrome, IE7+, Firefox, Safari, and Opera) мають вбудований об'єкт XMLHttpRequest.
Синтаксис створення об'єкту XMLHttpRequest:

var xhttp;
xhttp = new XMLHttpRequest();

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

Об'єкт XMLHttpRequest використовується для обміну даними із сервером.

Щоб відправити запит до серверу використовується метод open() та send() об'єкту XMLHttpRequest:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Параметр url методу open() це є адреса файлу на сервері до якого звертається AJAX запит.

Файл може мати розширення, на зразок .txt чи .xml, чи розширення файлу серверної скриптової мови як .asp чи .php (що можуть виконати деякі операції з даними, до того, як відправити оброблені дані назад до користувача).


Відповідь сервера

Щоб отримати відповідь від серверу, використовують властивість об'єкту XMLHttpRequest - responseText чи responseXML.

Властивість Опис
responseText отримуємо дані сервера як строкові дані
responseXML отримуємо дані як XML дані

Подія onreadystatechange

Коли ми виконуємо запит до сервера, ми маємо можливість виконувати деякі дії в залежності від відповіді серверу.

Подія onreadystatechange активується кожного разу як лиш змінюється властивість readyState.

Властивість readyState має значення статусу об'єкту XMLHttpRequest.

Є три основних властивості об'єкту XMLHttpRequest:

Властивість Опис
onreadystatechange Утримує функцію (чи ім'я функції), що автоматично виконується кожного разу, як лиш змінюється властивість readyState
readyState Утримує значення статусу об'єкту XMLHttpRequest. Змінюється від 1 до 4:
0: запит не ініціалізовано
1: зєднання із сервером встановлено
2: запит отримано
3: запит виконується
4: запит закінчено та відповідь готова
status 200: "OK"
404: Page not found

В обробнику onreadystatechange ми вказуємо, що повинно виконуватись, коли відповідь сервера готова

Коли readystate має значення 4 чи status = 200, ми успішно отримали відповідь зі сторони сервера.


 function loadDoc() {
  var xhttp = new XMLHttpRequest();  xhttp.onreadystatechange = function(){   if (xhttp.readyState == 4 && xhttp.status == 200) {     document.getElementById("demo").innerHTML = xhttp.responseText;   } }

Зауважте: Обробник onreadystatechange активується пять раз (0-4), кожного разу як лиш змінюється readyState.


Застосування функції зворотнього зв'язку - Callback Function

Приклад застосування функції зворотнього звязку (Callback Function)

Функції зворотнього звязку (Callback Function) - функція, що передає параметри до іншої функції.

Якщо Ви маєте більше ніж один AJAX-запит, то можете створити одну функцію для об'єкту XMLHttpRequest і визивати її кожного разу для різних AJAX-запитів.

Функцію, що визивається повинна знати URL-адресу файлу на сервері, до якого функція звертається та що функція повинна виконувати в обробнику onreadystatechange.


function loadDoc(cFunc) {
  var xhttp = new XMLHttpRequest();  xhttp.onreadystatechange = function(){   if (xhttp.readyState == 4 && xhttp.status == 200) {     cFunc(xhttp);   }

Приклад використання AJAX -запиту до файлу із розширенням .php

AJAX PHP Example

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

В прикладі, як лиш користувач ввів символ в поле, виконується функція "showHint()"

Функція активується подією onkeyup.

HTML:

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Пояснення:

По-перше, перевіряється чи пошукове поле не пусте (str.length == 0). Якщо пусте, очищаємо контент txtHint та виходимо із функції.

Якщо ж поле не пусте, то виконуються слідуючі операції:

Файл PHP - "gethint.php"

Файл PHP перевіряє відповідність в масиві імен та повертає відповідне до браузеру:

<?php
// Array with names
$a = [
"Anna",
"Brittany",
"Cinderella",
"Diana",
"Eva",
"Fiona",
"Gunda",
"Hege",
"Inga",
"Johanna",
"Kitty",
"Linda",
"Nina",
"Ophelia",
"Petunia",
"Amanda"
]

// get the q parameter from URL
$q = $_REQUEST["q"];

$hint = "";

// lookup all hints from array if $q is different from ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>

1.3. Декілька слів про AJAX запит із застосуванням бібліотеки jQuery.
за ресурсом w3school

AJAX це мистецтво обміну даними із сервером та оновлення частин веб-сторінки без перезавантаження всієї веб-сторінки.

Приклад: jQuery та AJAX це класно!


Як працює AJAX із jQuery?

Бібліотека jQuery застосовує декілька методів щодо AJAX-запиту.

Із AJAX-методами jQuery Ви можете виконати запит даних text, HTML, XML, чи JSON, застосовуючи протокол передачі даних HTTP Get чи HTTP Post. Також маєте змогу завантажити зовнішні дані у вибрану область Вашої веб-сторінки.

Створення коду AJAX-запиту може бути дещо складним, так як деякі браузери по різному сприймають запити AJAX. Створення коду для кросбраузерності приводить до написання більшої кількості кодів скрипту. Тим не менш, розробники jQuery потурбувались, щоб максимально зменшити розмір AJAX-запиту.


Метод jQuery - AJAX load()

Метод jQuery - AJAX load() досить простий і разом з тим досить функціональний.

Метод load() завантажує дані із серверу та розміщує дані у вибрану область веб-сторінки.

Синтаксис:

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

Обов'язковий URL параметр вказує URL -адресу, що бажаєте завантажити.

Необов'язковий параметр data вказує дані в парі ключ/значення, що відправляються із запитом до серверу.

Необов'язковий зворотній параметр callback, що містить функцію, яка має виконуватись по завершенню виконання методу load().

Зворотня функція також може мати різні параметри::
responseTxt - утримує результуючий контент, якщо запит успішний
statusTxt - утримує статус запиту
xhr - утримує об'єкт XMLHttpRequest

Слідуючий приклад показує повідомлення після завершення виконання методу load(). Якщо метод load() був виконаний успішно, виводиться повідомлення "External content loaded successfully!", якщо ж ні, то виводиться повідомлення про помилку:

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

Методи AJAX get() та post()

Методи jQuery get() та post() застосовуються для зипиту до даних серверу застосовуючи протокол HTTP GET або POST.

HTTP Запит: GET vs. POST

Два найбільш вживаних запити між клієнтом та сервером це: GET та POST.

GET в основному використовується для того щоб отримати деякі дані із серверу.
Відмітьте: Метод GET кешує дані.

POST також застосовується, щоб отримати дані із серверу. Тим не менш, POST ніколи не кешує дані, і часто використовується, щоб відправити дані до серверу.

Детальніше розглянути методи GET та POST, дізнатись, яка різниця між даними методами можна перейшовши за лінком HTTP Methods GET vs POST chapter.


Метод jQuery $.post()

Метод $.post() отримує дані із серверу застосовуючи HTTP POST запитt.

Синтаксис:

$.post(URL,data,callback);

Обов'язковий URL параметр, вказує адресу до якого відправляється запит.

Необов'язковий параметр data вказує дані, що відправляються із запитом до серверу.

Необов'язковий параметр callback вказує функцію, що має виконуватись після завершення запиту.

Слідуючий приклад застосовує метод $.post(), щоб відправити дані до серверу:

Перевір себе »

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

Перший параметр методу $.post() є URL, до якого відправляється запит ("demo_test_post.asp").

Потім ми передаємо дані разом із запитом (імя та місто)

ASP скрипт "demo_test_post.asp" читає параметри, обробляє та повертає результат.

Третє, зворотня функція. Перший параметр зворотньої функції утримує контент запрошеної сторінки, та статус запиту.

1.4. Таблиця w3schools методи jQuery AJAX

Наступна таблиця розглядає AJAX-методи jQuery :

Метод Опис
$.ajax() Виконує асинхронний AJAX запит.
$.ajaxPrefilter() Налаштовує опції Ajax-запиту чи модифікує існуючі опції кожного запиту до того, як запит буде відправлений чи виконаний в методі $.ajax()
$.ajaxSetup() Встановлює значення запиту за замовчуванням
$.ajaxTransport() Створює обєкт, що обробляє дані запиту, що пересилаються до серверу
$.get() Завантажує дані із серверу, застосовуючи протокол передачі даних HTTP GET
$.getJSON() Завантажує JSON дані із серверу застосовуючи HTTP GET запит
$.getScript() Завантажити (та виконати) JavaScript із серверу застосовуючи AJAX HTTP GET запит
$.param() Створює упорядковане представлення масиву або об'єкта
$.post() Завантажує дані із серверу застосовуючи протокол передачі даних HTTP POST
ajaxComplete() Визначає функцію, що має виконуватись після завершення AJAX запиту
ajaxError() Визначає функцію, що має виконатись, якщо AJAX-запит помилковий
ajaxSend() Визначає функцію, що має виконатись перед AJAx-запитом
ajaxStart() Визначає функцію, що має виконатись, як лиш розпочався AJAX-запит
ajaxStop() Визначає функцію, що виконується, коли всі AJAX-запити виконані
ajaxSuccess() Визначає функцію, що виконується, за умови успішного виконання AJAX-запиту
load() Завантажує дані із серверу та поміщає дані у вказану область веб-сторінки
serialize() Кодує набір елементів форми у вигляді рядка
serializeArray() Кодує набір елементів форми як масив імен та значень

1.5. Приклад обміну даними з сервером

Організація AJAX-запиту до серверу та обробка даних.

Цікавить метод jQuery load();
метод load() завантажує у вибрану область selector дані AJAX запиту, синтаксис методу:

$(selector).load(url,data,function(response,status,xhr))

де,

Параметр Опис
url Обов'язковий. Вказує URL-адресу, до якої звертається AJAX-запит.
data Необов'язковий. Вказуються дані, що відправляються до серверу
function(response,status,xhr) Необов'язковий. Функція, що виконується по завершенню метода load().

Додаткові параметри:
  • response - складається із результуючих даних, що повернулись із серверу
  • status - має значення статусу запиту ("success", "notmodified", "error", "timeout", or "parsererror")
  • xhr - об'єкт XMLHttpRequest

Розглянемо дещо детальніше метод load() на прикладі Демо-сторінки Досліджуємо AJAX метод load(). Приклад 1

Ще раз синтаксис методу:

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

де, selector - область, куди завантажуємо результат AJAX запиту,
URL - адреса, до якої відправляється AJAX-запит,
data - дані що відправляємо, до вказаної URL-адреси,
callback - функція, що виконується по завершенню AJAX-запиту

В методі load() обов'язковими полями є лиш URL - адреса, все інше необов'язкове і застосовується за потреби веб-програміста.

Приклад використання методу load() із Демо-сторінки:

	
$(document).ready(function(){
  $( ".trigger" ).click(function() {
   var data_01 = $("#data_01").prop("checked");
   var data_02 = $("#data_02").prop("checked");	   
   $(".result_01").load("demo_ajax_load_data.php#test",
   			{data_01,data_02},
	                function(responseTxt,status,xhr){        
                           $("#result_02_1" ).text(responseTxt); 
                           $("#result_02_2" ).text(status);
                           $("#result_02_3" ).text(xhr);                                     
                        });	    
	});
});                       

Я б зупинився на таких моментах даного методу:


1. Як відправити дані AJAX-запиту на сервер за допомогою AJAX методу load()?
2. Як отримати дані із сервера?
3. Що ж повертає callback - функція?


По черзі:
1. Як відправити дані AJAX-запиту на сервер за допомогою AJAX метода load()?
Синтаксис AJAX-у стверджує, що параметр вказується або самостійно або в парі ім'я/ключ:

$.ajax(parameter);
або
$.ajax({name:value, name:value, ... });

відповідно, дані на сервер можемо відправити, наприклад, таким чином:

$(".result").load("demo_ajax_load_data.php",{data_01,data_02});

чи наприклад, ось так, Досліджуємо AJAX метод load(). Приклад 2:

var txt1 = $("#input_msg1").val();
var txt2 = $("#input_msg2").val();
$(".result").load("demo_ajax_load_data.php", {data_01:txt1,data_02:txt2});

2. Як отримати дані із сервера?

Ну по-перше, результуючі дані ми отримуємо із серверу в області selector; що ж до Досліджуємо AJAX метод load(). Приклад 1, то це область result. Саме в цій області виводиться результат виконання файлу за вказаною url-адресою на сервері.
Як зразок виконання php-обробника AJAX-запиту:

<?php
  echo 'Data 1 is '.$_POST['data_01'];
  echo 'Data 2 is '.$_POST['data_02'];     
?>

По-друге, дані із серверу є також в callback - функції.(питання 3)


3. Що ж повертає callback - функція AJAX методу load()?

Зворотню функцію callback можна дослідити на прикладі

Виводимо дані сервера на веб-сторінці:

<div class="result_02">
response:
<span id="result_02_1">:)</span>
status:
<span id="result_02_2">>:)</span>
xhr:
<span id="result_02_3">:)</span>	
</div>


Виконання AJAX методу load()

	
$(document).ready(function(){
  $( ".trigger" ).click(function() {
   var data_01 = $("#data_01").prop("checked");
   var data_02 = $("#data_02").prop("checked");	   
   $(".result_01").load("demo_ajax_load_data.php",
   			{data_01,data_02},
	                function(responseTxt,status,xhr){        
                           $("#result_02_1" ).text(responseTxt); 
                           $("#result_02_2" ).text(status);
                           $("#result_02_3" ).text(xhr);                                     
                        });	    
	});
});                       

Як і очікувалось в області result_02_1 зворотня функція вивела responseTxt відповідь сервера:

Data 1 is false<br>Data 2 is true<br>

в області result_02_2 зворотня функція вивела status

success

в області result_02_3 зворотня функція вивела об'єкт xhr

[object Object]

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

- Ми розглянули першу частину теми асинхронного обміну даними із сервером, де ознайомились із об'єктом XMLHttpRequest, його методи та властивості, формування запитів до серверу. Кросбраузерність AJAX-запитів із застосуванням бібліотеки jQuery, формування запиту із використанням jQuery, дослідили метод load().

Продовження теми AJAX-запитів до серверу в другій частині:Організація інтерактивної сторінки; комплекс jQuery, AJAX, PHP, MySQLi.

P.S. Якщо в тексті чи кодах є помилки, чи щось, аж занадто суперечливе для логіки справжніх програмістів, що ж можете залишити своє зауваження на моїй сторінці коментарів.
Анатолій