Jquery, Ajax: використання і функції

Термін Ajax розшифровується як Asynchronous jаvascript and XML (асинхронний jаvascript і XML) і позначає технологію побудови запитів без перезавантаження сторінки: якщо відправити якісь дані на сервер, він відповідає, і при цьому сторінка не оновлюється. Найпростіший приклад Ajax-запиту - це пошук. Якщо відкрити пошукову систему і почати набирати запит, під рядком з ним відразу з'являться підказки, сторінка але при цьому не оновиться. Для скороченого запису виклику методів Jquery використовується знак долара.

Переваги Ajax

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

Застосування Ajax та JQuery

Існування інтерактивних додатків не було б можливо без технології Ajax. Вона застосовується в роботі ангулара (AngularJS) - фреймворку для JS. Використовувати технологію Ajax на всій сторінці цілком необов'язково. Його можна застосовувати тільки для деяких елементів оновлюється сторінки. Наприклад, для автозаміни, валідації форм і пошуку. Бібліотека JQuery - це колекція готових рішень, написаних на PHP. Знайти її можна за запитом "Ajax libs Jquery". Є варіант підключення через спеціальний сервіс Google. Він називається Ajax Googleapis. Jquery в цьому випадку підключається безпосередньо. Зрозуміло, це прискорює завантаження сторінки. Найчастіше користувачі знаходять міні-версію Jquery, Ajax на Googleapis.com. Вона має урізаним функціоналом, але більш зручна для новачків. Називається міні-версія Jquery, Ajax на Googleapis.com - min.js.

Формати передачі даних

XML розшифровки абревіатури Ajax - це формат обміну даних. Спочатку, коли технологія тільки була створена, обмін відбувався тільки з його допомогою. XML дуже схожий на HTML, але у ньому всі теги обов'язково повинні бути закриті. Пізніше всередині мови JS з'явився новий формат JSON. Він виявився настільки простим і зручним, що поширився на інші мови і бібліотеки. JSON краще підходить для передачі невеликого обсягу даних, до 20 тис. рядків. З ним простіше працювати, він більш гнучкий і зрозумілий для програміста. При більшій кількості інформації переважніше використання XML. Наприклад, відправка запитів на "Яндекс-пошук" реалізована за допомогою цього формату.

Створення простого документа у форматі JSON

У мові JS всі властивості описують один глобальний об'єкт window, тобто вікно браузера. Всі бібліотеки описують функції (методи) і властивості цього об'єкта. JSON - це окремий клас, який успадковується від об'єкта і має два власних методу: parse і stringify. Докладніше обидва методу ми розглянемо нижче.
Працювати з Ajax можна з JS без використання JQuery. Рядок у форматі JSON можна перетворити в об'єкт JS і назад. Розглянемо, як це зробити на прикладах. Спочатку створимо документ і назвемо його, наприклад, "man" з розширенням JSON. Далі послідовно виконуємо наступні кроки: Відкриємо файл в редакторі коду, наприклад, PhpStorm або Sublime. У формату JSON власний синтаксис. Спочатку створюється об'єкт - для нього потрібні фігурні дужки. В дужках повинні бути присутніми ключ і його значення. Ключі повинні бути в подвійних лапках. У стандартному JS при створенні об'єкта ключ пишеться без лапок. Наприклад, для об'єкта "man" у форматі JSON потрібно створити ключі "name" (ім'я) і "age" (вік). В результаті ми отримуємо такий код: {"name": "Pavel", "age": 28}. Якщо вам потрібні кілька об'єктів, вони поміщаються в масив, який виділяється квадратними дужками. Важливо враховувати, що формат JSON не підтримує коментарі. В будь-якому вигляді це буде помилкою. Але особливої потреби в них немає. Самі значення ключів можуть бути наступних типів: рядок; число; масив; об'єкт. Масив записується у квадратних дужках, об'єкти в ньому полягають в лапки і перераховуються через кому. Також можна додати вкладений об'єкт, наприклад, адресу. Його потрібно буде укласти в фігурні дужки. Ось так швидко створюється найпростіший документ в форматі JSON. За зручність використання його і полюбили розробники.

Перетворення рядка в об'єкт

Рядок JS часто доводиться перетворювати в об'єкт JSON. Варто звернути увагу, що в коді при перенесення рядка у кінці повинен стояти слеш, інакше JS не зрозуміє, що вона закінчилася. Код JS буде виглядати так: Потрібно стежити, щоб ключі були в подвійних лапках, інакше виникне помилка. Ми отримали просту рядок. Вона може прийти з будь-якого сервера. Щоб переконатися, що це саме рядок, її можна вивести на консоль, додавши в код команду “console.log(json)". Тепер перетворимо рядок в об'єкт. Для цього спочатку оголошуємо змінну і викликаємо для неї спеціальний клас parse: var jsonObj = JSON.parse(). Потім передаємо параметр. Для роботи з форматом JSON в JS є спеціальний клас з такою ж назвою. Таким чином, можна перетворити рядок в об'єкт. Якщо з якихось причин перетворення неможливо, з'явиться попередження. Для підтвердження, що все зроблено правильно, обидві змінні можна вивести на консоль. У першому випадку при виводі на консоль рядка після значень з'являться прогалини, так як JS вважатиме їх кількість до знака слеш. Це не помилка, але для краси коду зайві прогалини бажано прибирати.

Перетворення об'єкта в рядок

Можна виконати зворотну дію і перетворити об'єкт в рядок. Для цього оголошуємо змінну і знову використовуємо клас JSON, додаючи його через точку, але вибираємо інший метод - stringify: var ObjtoStr = JSON.stringify(). Потім передаємо потрібний параметр. Ця команда виконує зворотне перетворення. Цей параметр може передати все, що нам потрібно, наприклад, тільки ім'я. Для цього потрібний ключ потрібно укласти в квадратні дужки. Так можна працювати з JSON з JS.

Передача запиту на сервер

Тепер перейдемо до Ajax і відправимо цей запит на сервер. Спочатку потрібно створити об'єкт XMLHttpRequest. Цей клас відповідає за передачу запиту і дозволяє створювати його без перезавантаження сторінки. Використовуватися буде JSON, але назва класу не змінилося: XML. Код для відправки запиту виглядає так: var xhr = XMLHttpRequest(). Відправляти опції поки не будемо. Тепер сконфігуріруем цей запит. Для цього пишемо: xhr.open(). У методу open будемо налаштовувати адресу. Для цього в дужках додаємо слово 'GET'. Далі через кому в одинарних лапках пишемо адресу хоста, куди потрібно відправити запит. В кінці рядка додаємо ім'я об'єкта, тобто завантажуваного файлу - в нашому випадку це “man.json".

Синхронний і асинхронний запит

Третій параметр, який необхідний для відправки запиту - визначення того, буде він синхронним чи ні. Він називається async і має два значення: "false запит виробляється синхронно, і true – в цьому випадку він буде асинхронним. Якщо запит синхронний, сценарій чекає відповіді. Якщо відповідь займе секунду, то наступний рядок коду не обробиться. Синхронний запит буде виконуватися в окремому потоці, і скрипт продовжить виконання команд. У нашому випадку знадобиться перше значення, так як інакше перевірку відповіді доведеться робити через подія і присвоїти функцію, яка виконається, як тільки запит прийде. Далі додаємо ще один рядок коду: xhr.send(). Тепер у відповідь на запит має прийти код. Це може бути код "200", що означає, що сервер доступний, "404" - документ не знайдений, "300" - редирект і "500" - помилка з боку сервера. Для того щоб дізнатися, чи є помилка, потрібно порівняти код з "200". Для цього додаємо код наступну рядок: if(xhr.status !=200) і виводимо значення в консоль. Якщо все добре, почне виконуватися гілка else, в яку додаємо висновок консоль зі значенням "ОК". Таким чином, ми відправили запит на сервер за допомогою JS і дізналися, як працює Ajax з JS. Ми створили XMLHttpRequest, вказали метод, шлях, синхронність або асинхронність і отримали результат.

JQuery, Ajax

Досвідчені програмісти чистий JS для роботи не використовують, а застосовують якусь бібліотеку - найчастіше JQuery. Запити JS Ajax JQuery створювати набагато простіше, саме тому вона стала так популярна. Спробуємо поліпшити скрипт за допомогою цієї бібліотеки. Спочатку JQuery потрібно завантажити. Вона поставляється в декількох версіях. Підключити бібліотеку можна через сервіс Google Code. Є варіант для розробників, де залишилася можливість коментування та переносу рядка. Інша версія - мінімальна. Вона знаходиться за адресою: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Цю бібліотеку має сенс підключати на робочому сервері. Додати бібліотеку можна за допомогою наступного коду через сервіс Google Code: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> У цьому коді для прикладу використовується версія 310. Для коректної роботи потрібно додавати актуальну версію. Важливо, щоб адреса починався з "//ajax.googleapis.com/ajax/libs/jquery". Потім створюємо новий файл у форматі html і підключаємо бібліотеку, вказавши адресу її розташування в тезі script і розташувавши його в head. Далі починаємо писати сам скрипт. Починаємо його ось з такою рядки: $(document).ready(). Коли документ буде готовий, викличеться вкладена функція: (function () {}). Це необхідно для того, щоб завантажилася DOM-модель, з якої ми працюємо, тобто все, що знаходиться в тегу body. Якщо цього не зробити, скрипт буде опрацьовано раніше, ніж завантажиться DOM-модель.

Створення форми

В якості прикладу Jquery, Ajax створимо форму. Для цього створюємо div з класом form і додаємо в нього input типу "text" і атрибут name зі значенням "name". Потім додаємо ще один input, з типом "text" і ім'ям "address". Кожному з input присвоюємо ідентифікатор. В якості ідентифікатора можна використовувати значення атрибутів name. Додаємо підказку для обох input з пропозицією користувачеві ввести ім'я та адресу. За бажанням можна додати ще один рядок для віку. Тепер залишилося зробити кнопку для відправки форми. Всередині тега button пишемо слово "відправити" і додаємо ідентифікатор btn. Додаємо роздільники - теги br - на кожну рядок і перевіряємо, що вийшло. Можна додати зовнішні відступи, записавши їх в тезі стилів, але це необов'язково. Поки форма не працює. Для її функціонування до кнопки потрібно прив'язати подія, так як дані будуть відправлятися саме при її натисканні. Для цього вибираємо кнопку по селектору і вводимо подія "click": $('#btn').on('click'). Тепер виконається при кліку ця функція. Ми використовуємо метод on, який підписує певну функцію на подію click за якогось елементу. Тобто, коли на кнопку будуть кликати, вона буде спрацьовувати. Перевіряємо, що все працює за допомогою виводу на консоль. Методів надсилання запиту у Jquery, Ajax не так багато. Можна використовувати get, post або просто Ajax. Так як ці дані можуть щось змінювати, ми будемо використовувати метод Jquery, Ajax post.

Отримання значень полів форми

На такий крок нам потрібно отримати значення всіх полів форми. В Jquery, Ajax є два варіанти, як це зробити. Можна використовувати функцію чи обійтися без неї. Для першого варіанту пишемо такий код: var name = $('#name'). Потім додаємо аналогічні рядка адреси і віку. Ми отримали посилання на елементи, а не самі значення. Тепер використовуємо метод Jquery, Ajax post. Для цього пишемо: $.post(). Тепер метод потрібно налаштувати. Він приймає url-адресу, куди буде відправлятися форма. Для цього будемо використовувати валідатор. Для цього в дужках пишемо '/validator.php'. Додаємо ще один параметр - самі дані: var data = 'name='+name.val() + '&address=' + address.val() + '&age=' + age.val(). Тепер у нас є дані, отримані методом Jquery, Ajax. Залишається лише додати callback функцію, яка буде викликана, коли прийде відповідь від сервера. У неї потрібно прописати наступні параметри: дані сервера, опис статусу і того, чи був виконаний запит. Виводимо на консоль параметр data, щоб перевірити, що все працює. Також важливо враховувати, що Ajax-запит завжди робиться в юнікод, тому кодування документа повинна бути utf-8. Якщо сайт і сервер в інший кодуванні, а Ajax виконується у форматі юнікод, то сервер поверне ієрогліфи, і рядок доведеться перекодувати. Для того щоб уникнути цього, бажано все робити в utf-8.

Робота з PHP

Тепер використовуємо Jquery, Ajax PHP. Створюємо новий файл і називаємо його validator.php. Виведемо наші дані. Для цього пишемо: $array = $post. Тепер виводимо всі дані у форматі JSON: echo JSON_encode($array). Перевіряємо, як працює форма, заповнюючи поля і відправивши запит серверу. Якщо все зроблено правильно, ми отримаємо об'єкт із заданими параметрами. Ми отримали дані, тепер їх потрібно обробити і записати. Пишемо: if(isset( $post[‘name’])&&(isset( $post[‘age’])&&(isset( $post[‘address’]). Ісеть означає, що така змінна існує. Далі додаємо умова: else{$array[‘status’]= 'error'}. Перевіряємо, чи все працює. Якщо в коді є помилки, шукаємо і виправляємо їх. Завдяки асинхронності в передачі запиту користувач може вводити додаткову інформацію в момент, коли йде передача на сервер. Можна використовувати не тільки мову програмування PHP, але і інші серверні мови.