Ajax.

Технологія Ajax.

AJAX - асинхронний обмін даними з сервером.

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

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

Асинхронний обмін даними - браузер відправляє запит на сервер і нечекає відповіді, а продовжує виконувати скрипти, "займається своїми справами".

XMLHttpRequest.

В базовому JavaScript робота з запитами за технологією ajax реалізовано через об'єкт XMLHttpRequest.

Технологія Ajax працює по протоколам http/https, тому для тестування коду вам знадобиться веб-сервер.

Приклад синхронного запиту:

// відправка запиту на файл:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'text.txt', false);
xhr.send();

// отримання результату:
console.log(xhr.responseText);
console.log('======== FINISH =========');

Вищевказаний код є дуже ненадійним, з сервером може виникнути багато різних неприємностей, тому не можна напряму звертатися до відповіді сервера, потрібно робити перевірки на помилки:

// отримання результату:
if (xhr.status != 200){
  console.error('Error ' + xhr.status + ': ' + xhr.statusText);
} else {
  console.log(xhr.responseText);
}
console.log('======== FINISH =========');

xhr.responseText - відповідь сервера (в більшості випадків в текстовому вигляді).

xhr.status - статус відповіді.

xhr.statusText - текст статусу сервера.

Статус сервера - це звичайні коди відповіді сервера:

0 - нічого не відбулося, запит на відправлено, відсутнє з'єднання з інтернетом;
200 - все гаразд, сервер прислав відповідь;
403 - доступ заборонено (forbidden);
404 - ресурс не знайдено (file not found);
502 - сервер не відповідає (bad gateway);
і так далі.

Завдання.

  1. Створіть в папці з проектом текстовий файл hello.txt в форматі UTF-8.
  2. Внесіть у цей текстовий файл деякий текст.
  3. У проекті створіть скрипт, що робить запит до сервера і отримує вміст цього текстового файлу.
  4. Результат (вміст файла) виведіть у заголовок <h1>.

Даний код свторює запит, відправляє його на сервер і очікує результат. Під час очікування робота всіх скриптів, завантажень ресурсів призупиняється.

Час заморозки може тривати від лічених мілісекунд до декількох секунд.

Ви отримаєте попередження в консолі, що синхронні запити вважаються застарілими через негативні наслідки для користувача.

Повний синтаксис налаштування запиту:

xhr.open(method, URL, async, user, password);

method - метод GET або POST (доступні також інші методи, наприклад DELETE, PUT і т.п.).

URL - посилання на ресурс або скрипт на сервері.

async - асинхронність запиту, може приймати true або false.

user, password - доступ до ресурсу, в разі потреби.

Зробіть запит асинхронним та обґрунтуйте результат виводу в консоль.

Події xhr.

Виведіть в консоль об'єкт xhr та дослідіть його.

При асинхронному запиті потрібно відловити подію зміни статуса запита:

...
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState != 4) return;
  if (xhr.status != 200){
    console.error('Error ' + xhr.status + ': ' + xhr.statusText);
  } else {
    console.log(xhr.responseText);
  }
}
console.log('======== FINISH =========');

Статуси запиту:

0 - UNSENT, початковий стан
1 - OPENED, запит відкрито
2 - HEADERS_RECEIVED, отримані заголовки
3 - LOADING, отримано пакет даних
4 - DONE, запит завершено

Стани запиту змінюються в такій послідовності (статус 3 може встановлюватися багато разів):

0 > 1 > 2 > 3 > 3 > ... > 3 > 4.

GET, POST, timeout, abort.

GET-запит передає на сервер лише URL, а POST-запит може передавати пари "ключ: значення" в методі send:

xhr.open('GET', 'test.php?name=Masha&age=17');
xhr.send();

xhr.open('POST', 'test.php');
xhr.send('name=Masha&age=17');

Запит до сервера можна обірвати якщо в ньому пропадає потреба або сервер занадто довго не відповідає.

Також можна встановити таймаут на виконання запиту.

if (вже_не_треба) { xhr.abort(); }

xhr.timeout = 3000; // 3 секунди
xhr.ontimeout = function() {
  xhr.abort();
}

JSON

JSON (JavaScript Object Notation) - текстовий файл, що містить в собі масив або об'єкт в форматі JS.

Файли JSON широко використовуються для передачі даних по HTTP, для збереження налаштувань. Формат виявився дуже вдалим і його використовують в інших мовах програмування.

Його попередником є XML, громіздкий, надлишковий формат передачі даних, заснований на SGML.

Приклади JSON-файлів:

week.json
['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'нд']

user.json
{
  "name": "Маша",
  "age": 17,
  "phone": "068-202-12-12"
}

Для роботи з JSON вам можуть знадобитися наступні методи:

var str = JSON.stringify(obj); // перетворити об'єкт чи масив у строку
var obj = JSON.parse(str); // перетворення строки на масив, об'єкт

Формат файлу JSON трохи капризний, вимагає щоб всі ключі і строки були огорнуті лише подвійними кавичками:

{
  "name": "Masha",
  "age": 17
}

За потреби - скористайтесь онлайн-валідатором JSON.

Завдання

  1. Створіть текстовий файл, в який пропишіть декілька тегів, наприклад: <h3>Hello!</h3>
    <p>Lorem ipsum dolor</p>
    <img src="cat.jpg" alt="cat">
  2. Закиньте в папку з проектом картинку cat.jpg.
  3. Створіть чи відредагуйте файл index.html.
  4. Створіть кнопку і <div id="test1">. При натисканні кнопки робіть запит до файла і вставте отриманий код в блок.
  5. Запишіть у JSON-файл масив чисел, отримайте цей масив запитом, знайдіть суму чисел і результат виведіть повідомленням alert.

Ajax в jQuery.

Бібліотека jQuery надає більш зручний інструмент для роботи з асинхронними запитами.

Все зібрано в один зручний метод:

$.ajax({
  type: "POST",
  url: "test.php",
  data: "name=Masha&age=17",
  success: function(msg){
    console.log("Відповідь сервера: " + msg);
  },
  error: function (jqXHR, exception) {
    var msg = getErrorMessage(jqXHR, exception);
    alert(msg);
  }
});

function getErrorMessage(jqXHR, exception){
  if (jqXHR.status === 0) { return 'Not connect.\n Verify Network.'; }
  if (jqXHR.status == 404) { return 'Requested page not found. [404]'; }
  if (jqXHR.status == 500) { return 'Internal Server Error [500].'; }
  if (exception === 'parsererror') { return 'Requested JSON parse failed.'; }
  if (exception === 'timeout') { return 'Time out error.'; }
  if (exception === 'abort') { return 'Ajax request aborted.'; }
  return 'Uncaught Error.\n' + jqXHR.responseText;
}

Повний синтаксис метода можна глянути в документації (російською мовою).

Завдання.

Отримайте з сервера json-файл та виведіть дані у вигляді таблиці.

Домашнє завдання.

  1. Зверстайте просту сторінку з переліком товарів, ціни вкажіть в доларах.
  2. Добавте кнопки "в гривнях", "в євро", "в злотих".
  3. Створіть файл kurs.json куди занесіть курси валют до долара.
  4. При кліку на кнопку отримайте дані про поточний курс відповідної валюти та зробіть зміни на сайті.
  5. Зробіть заготовку сайту погоди на поточний день (погода вранці, вдень, ввечері і вночі).
  6. Інформацію про погоду отримуйте динамічно з JSON-файла.