Повний гайд AJAX — Як працювати з асинхронними запитами в браузері

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

Що таке AJAX?

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

Основні складові AJAX:

XMLHttpRequest (XHR) — браузерний об'єкт для створення запитів HTTP. Сьогодні його часто замінюють на Fetch API, але він все ще використовується.
JSON - Основний формат обміну даними в AJAX-запитах (XML фактично вийшов з використання).
Асинхронність — сторінки залишаються інтерактивними навіть при завантаженні даних.

Простий приклад AJAX-запиту з XMLHttpRequest

Переходимо до практики. Розглянемо, як зробити AJAX-запит за допомогою XMLHttpRequest, починаючи з найпростішого запиту.

// 1. Створюємо новий об'єкт XMLHttpRequest const xhr=new XMLHttpRequest(); // 2. Відкриваємо запит: метод GET, URL та асинхронно = true xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true); // 3. Налаштовуємо обробник для обробки даних після завантаження xhr.onload = function() < if (xhr.status === 200) < // Парсим відповідь JSON const data = JSON.parse(xhr.responseText); console.log(data); >else < console.error("Помилка завантаження даних:", xhr.statusText); >>; // 4. Надсилаємо запит xhr.send();

Пояснення до коду:

Створюємо об'єкт XMLHttpRequest. Він і є основним компонентом AJAX-запиту.
Налаштовуємо запит: вказуємо метод (GET) та URL, до якого звертаємось. Останній аргумент true робить запит асинхронним.
Обробка відповіді: після завантаження перевіряємо статус (має бути 200 для успішної відповіді), парсим JSON і працюємо з даними.
Надсилання запиту: метод send() виконує запит.

Приклад із POST-запитом

Припустимо, вам потрібно не лише отримувати, а й надсилати дані. У цьому випадку використовується метод POST:

// Дані, які хочемо відправити const data = JSON.stringify(< title: "AJAX Guide", body: "How to use AJAX", userId: 1 >); // Відкриваємо запит xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true); // Встановлюємо заголовки xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); // Обробник для отримання відповіді xhr.onload = function() < if (xhr.status === 201) < console.log("Дані надіслані:", xhr.responseText); >>; // Надсилаємо запит з даними xhr.send(data);

Перехід на новий рівень: Використання Fetch API

Хоча XMLHttpRequest працює непогано, він має свої мінуси: надлишкова структура, складне управління помилками, обробка JSON. Fetch API – це більш сучасний та простий спосіб для виконання AJAX-запитів.

Базовий приклад GET-запиту з Fetch API

fetch("https://jsonplaceholder.typicode.com/posts") .then(response => < if (!response.ok) throw new Error(`Помилка: $`); return response.json(); >) .then(data => console.log(data)) .catch(error => console.error("Помилка запиту:", error));

Приклад POST-запиту з Fetch API

З fetch відправка POST-запиту виконується також просто:

fetch("https://jsonplaceholder.typicode.com/posts", < method: "POST", headers: < "Content-Type": "application/json" >, body: JSON.stringify(< title: "AJAX Guide", body: "How to use AJAX", userId: 1 >) >) .then(response => < if (!response.ok) throw new Error(`Помилка: $`); return response.json() ; >) .then(data => console.log("Відповідь від сервера:", data)) .catch(error => console.error("Помилка запиту:", error));

Переваги Fetch API:

Чистий та лаконічний синтаксис.
Підтримка промісів дозволяє використовувати then і catch, покращуючи роботу з асинхронністю.
Підтримка async/await робить код читальнішим.

Асинхронний синтаксис async/await

JavaScript синтаксис async/await надає ще більш елегантний спосіб роботи з асинхронністю. Розглянемо приклад з використанням async та await для FETCH-запиту.

async function fetchData() < try < const response = await fetch("https://jsonplaceholder.typicode.com/posts"); if (!response.ok) throw new Error(`Помилка: $`); const data = await response.json(); console.log(data); > catch (error) < console.error("Помилка запиту:", error); >> fetchData();

Тепер наш асинхронний код виглядає як синхронний, завдяки чому його легко читати та налагоджувати.

AJAX та JSON: Працюємо з отриманими даними

Після отримання даних із сервера часто потрібно динамічно оновити сторінку. Ось приклад, який показує, як створити список статей на сторінці:

Тут ми завантажуємо список постів із сервера та виводимо їх на сторінку, динамічно створюючи елементи HTML.

Висновок

Сподіваюся, ця стаття допомогла зрозуміти, що таке AJAX.

AJAX для новачків

AJAX – це абревіатура, яка означає Asynchronous Javascript and XML. Насправді AJAX не є новою технологією, так як і Javascript, і XML існують вже досить тривалий час, а AJAX - це синтез зазначених технологій.AJAX найчастіше асоціюється з терміном Web 2.0 і подається як новітнє Web-додаток.

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

Можливість створення зручного Web-інтерфейсу
Активна взаємодія з користувачем
Часткове перезавантаження сторінки замість повного
Зручність використання

Обмін даними

Для того, щоб здійснювати обмін даними, на сторінці має бути створений об'єкт XMLHttpRequest, який є своєрідним посередником між Браузером користувача та сервером (рис. 1). За допомогою XMLHttpRequest можна надіслати запит на сервер, а також отримати відповідь у вигляді різноманітних даних.

Обмінюватися даними із сервером можна двома способами. Перший спосіб – це GET-запит. У цьому запиті ви звертаєтеся до документа на сервері, передаючи йому аргументи через URL. При цьому на стороні клієнта логічно використовуватиме функція Javascript`а escape для того, щоб деякі дані не перервали запит.

Не рекомендується робити запити GET до сервера з великими обсягами даних. І тому існує POST-запрос.

Клієнт частина, написана на Javascript, повинна забезпечувати необхідну функціональність для безпечного обміну з сервером та надавати методи для обміну даними будь-яким із вищеперелічених способів. і віддавати її назад клієнту. Наприклад, для запиту інформації з сервера можна використовувати звичайний GET-запит з передачею кількох і невеликих розміру параметрів, а для оновлення інформації або додавання нової інформації потрібно використовувати вже POST-запит, так як він дозволяє передавати великі обсяги даних.

Як вже було сказано, AJAX використовує асинхронну передачу даних. Це означає, що поки йде передача даних, користувач може здійснювати інші, необхідні йому дії. що сталося щось не те і може залишити сайт, або повторно викликати «завислу», на його думку, Функцію. Індикація під час обміну даними у програмі Web 2.0 відіграє дуже важливу роль: відвідувачі могли ще не звикнути до таких способів оновлення сторінки.

Відповідь від сервера може бути не тільки XML, як випливає з назви технології. Крім XML, можна отримати відповідь у вигляді звичайного тексту, або JSON (Javascript Object Notation). сторінці При отриманні відповіді у вигляді XML зазвичай відбувається обробка отриманого XML документа на стороні клієнта і перетворення даних до (X)HTML. JSON клієнт повинен лише виконати отриманий код (функція Javascript `eval) для отримання повноцінного об'єкта Javascript.Але тут потрібно бути обережним та враховувати той факт, що з використанням цієї технології може бути переданий шкідливий код, тому перед виконанням отриманого з сервера коду слід його ретельно перевірити та обробити. Існує така практика, як «холостий» запит, при якому жодна відповідь від сервера не надходить, лише змінюються дані на стороні сервера.

У різних браузерах даний об'єкт має різні властивості, але в цілому він збігається.

Методи об'єкта XMLHttpRequest

Зауважте, що назви методів записані в тому самому стилі (Camel-style), що й інші функції Javascript. Будьте уважні під час їх використання.

abort() — Скасувати поточний запит до сервера.

getAllResponseHeaders() — отримати всі заголовки відповіді сервера.

getResponseHeader(«ім'я_заголовка») - Отримати вказаний заголовок.

open («тип_запиту», «URL», «асинхронний», «ім'я_користувача», «пароль») — ініціалізація запиту на сервер, вказівка методу запиту. Тип запиту та URL – обов'язкові параметри. Третій аргумент — булеве значення. Зазвичай завжди вказується true або взагалі не вказується (за умовчанням — true). Четвертий і п'ятий аргументи використовуються для аутентифікації (це дуже небезпечно, зберігати дані про аутентифікацію у скрипті, оскільки скрипт може переглянути будь-який користувач).

send(«вміст») — надіслати HTTP запит на сервер та отримати відповідь.

setRequestHeader(«ім'я_заголовка»,«значення») — Встановити значення заголовка запиту.

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

onreadystatechange - Одна з головних властивостей об'єкта XMLHttpRequest. За допомогою цієї властивості задається обробник, який викликається щоразу при зміні статусу об'єкта.

readyState - Число, що позначає статус об'єкта.

responseText - Подання відповіді сервера у вигляді звичайного тексту (рядки).

responseXML — об'єкт документа, сумісний із DOM, отриманим від сервера.

status - Стан відповіді від сервера.

statusText — текстове відображення стану відповіді від сервера.

0 - Об'єкт не ініціалізований.
1 — Об'єкт завантажує дані.
2 — Об'єкт завантажив дані.
3 - Об'єкт не повністю завантажений, але може взаємодіяти з користувачем.
4 - Об'єкт повністю ініціалізований; отримано відповідь від сервера.

Створення об'єкта XMLHttpRequest

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

Наприклад, для створення об'єкта в Gecko-сумісних браузерах, Konqueror`і та Safari, потрібно використовувати наступний вираз:

var Request = новий XMLHttpRequest();

А для Internet Explorer`а використовується таке:

var Request = новий ActiveXObject("Microsoft.XMLHTTP");

var Request = new ActiveXObject("Msxml2.XMLHTTP");

Тепер, щоб досягти кросбраузерності, необхідно скласти всі функції в одну:

function CreateRequest() < var Request = false; if (window.XMLHttpRequest) < //Gecko-сумісні браузери, Safari, Konqueror Request = new XMLHttpRequest(); >else if (window.ActiveXObject) < //Internet Explorer try < Request = new ActiveXObject("Microsoft.XMLHTTP"); >catch (CatchException) < Request = new ActiveXObject("Msxml2.XMLHTTP"); >> if (!Request) < alert("Неможливо створити XMLHttpRequest"); >return Request; >

Після цього можна створювати даний об'єкт і не турбується за працездатність на популярних браузерах. Але створити об'єкт можна у різних місцях. Якщо створити його глобально, то певний момент часу можливий буде лише один запит до сервера. Можна створювати об'єкт кожного разу, коли відбувається запит до сервера (це майже повністю вирішить проблему).

Запит на сервер

Перевірка XMLHttpRequest.
Ініціалізація з'єднання із сервером.
Посилання запиту серверу.
Обробка даних.

/* Функція посилки запиту до файлу на сервері r_method - тип запиту: GET чи POST r_path - шлях файлу r_args - аргументи виду a=1&b=2&c=3.r_handler - функція-обробник відповіді сервера */ function SendRequest(r_method, r_path, r_args, r_handler) < //Створюємо запит var Request = CreateRequest(); // Перевіряємо існування запиту ще раз if (! Request) < return; >//Призначаємо користувальницький обробник Request.onreadystatechange = function() < //Якщо обмін даними завершено if (Request.readyState == 4) < //Передаємо управління оброблювача користувача r_handler(Request); >> //Перевіряємо, якщо потрібно зробити GET-запит if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Ініціалізуємо з'єднання Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") < //Якщо це POST-запит //Встановлюємо заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Посилаємо запит Request.send(r_args); >else < //Якщо це GET-запит //Посилаємо нуль-запит Request.send(null); >>

Створювати запит стало набагато простіше. Для прикладу напишемо функцію, яка отримуватиме вміст файлу на сервері і виводитиме його в контейнер.

function ReadFile(filename, container) < // Створюємо функцію обробник var Handler = function(Request) < document.getElementById(container).innerHTML = Request.responseText; >//Надсилаємо запит SendRequest("GET",filename,"",Handler); >

Саме таким чином відбувається взаємодія із сервером.

Обробка відповіді

У попередньому прикладі ми зробили опцію запиту до сервера. Але вона, по суті, небезпечна, тому що ми не обробляємо стан об'єкта і стан відповіді від сервера.

Доповнимо наш код, щоб він зміг виводити візуальне сповіщення про процес завантаження.

. Request.onreadystatechange = function() < //Якщо обмін даними завершено if (Request.readyState == 4) < //Передаємо керування оброблювача користувача r_handler(Request); >else < //Сповіщаємо користувача про завантаження >> .

Як ви вже знаєте, об'єкт XMLHttpRequest дозволяє дізнатися про статус відповіді від сервера.Скористайтеся цією можливістю.

. Request.onreadystatechange = function() < //Якщо обмін даними завершено if (Request.readyState == 4) < if (Request.status == 200) < //Передаємо управління оброблювача користувача r_handler(Request); >else < / / Сповіщаємо користувача про помилку >> else < / / Сповіщаємо користувача про завантаження >> .

Варіанти відповіді від сервера

JSON - Це об'єктна нотація Javascript. З її допомогою можна уявити об'єкт у вигляді рядка (тут можна навести аналогію з функцією серіалізації). При отриманні даних JSON ви повинні виконати їх, щоб отримати повноцінний об'єкт Javascript і зробити з ним необхідні операції. Пам'ятайте, що така передача даних та виконання їх не є безпечними. Ви повинні стежити за тим, що надходить на виконання.

При отриманні такого коду, робимо таку дію:

var responsedata = eval("(" + Request.responseText + ")")

Після виконання цього коду вам буде доступний об'єкт responsedata.

Робота з серверними мовами програмування

Така робота нічим не відрізняється від звичайної. Для прикладів я візьму PHP як серверну мову. У частині клієнта нічого не змінилося, але серверна частина тепер представлена PHP-файлом.

За традицією, почнемо з вітання нашому чудовому світу:

При зверненні до файлу клієнту повернеться рядок Hello, World. Як ви розумієте, це надає найширші можливості для побудови додатків. На основі передачі аргументів під час виклику сервера за допомогою XMLHttpRequest можна зробити параметризацію виводу, тим самим забезпечивши велику функціональність Web-програми.

Крім PHP, можна використовувати будь-яку іншу серверну мову програмування.

Література на тему

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

Звичайно, якщо є можливість, варто використовувати існуючі фреймворки, я вважаю. Але знати «як воно працює» все-таки потрібно.

AJAX: Шпаргалка по AJAX на jQuery

Всім привіт у новому записі ми з вами розберемо основні функції для запитів Ajax, які дозволяють передавати інформацію з сайту в PHP скрипт без перезавантаження сторінки.

Для роботи Ajax запитів потрібно підключити jQuery до вашого проекту. Посилання на jQuery можна знайти тут.

Даний взятий з мого сайту Prog-Time.

Стандартне надсилання даних через Ajax.

$.ajax(< url: '/index.php', /* Куди надіслати запит */ method: 'get', /* Метод запиту (post або get) */ dataType: 'html', /* Тип даних у відповіді (xml, json, script, html). змінної data міститься відповідь від index.php.

Надсилання POST запиту через Ajax

Для надсилання запиту POST використовуємо подібний код, змінюємо тільки параметр метод

$.ajax(< url: '/index.php', method: 'post', dataType: 'html', data: , success: function(data) < alert(data); >>);

Надсилання JSON даних через Ajax

Для надсилання JSON даний через AJAX можна використовувати лише методом GET.

Запланувати виконання JS скрипту

Після виконання цього запиту скрипт вказаний у параметрі url відразу буде виконаний.

Скорочені види функцій для Ajax запитів

$.post('/index.php', , function(data)< alert(data); >);

$.get('/index.php', , function(data)< alert(data); >);

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

Скорочена версія запиту на виконання JS скрипту

Обробка помилок, пов'язаних з AJAX запитом

$.ajax(< url: '/index.php', метод: 'get', dataType: 'json', success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert('Not connect.Verify Network.'); >else if (jqXHR.status == 404) < alert('Requested page not found (404).'); >else if (jqXHR.status == 500) < alert('Internal Server Error (500).'); >else if (exception === 'parsererror') < alert('Requested JSON parse failed.'); >else if (exception === 'timeout') < alert('Time out error.'); >else if (exception === 'abort') < alert('Ajax request aborted.'); >else <alert('Uncaught Error.' + jqXHR.responseText); >>>);

7 Основні параметри для роботи з AJAX функціями

Усі параметри для відправки AJAX запитів

async (за замовчуванням: true).Тип: Boolean.За замовчуванням, всі запити надсилаються асинхронно і не затримують роботу інших JS скриптів (це значення true), щоб чекати поки виконатися Ajax запит – поставте значення false.Зверніть увагу, що кросдоменні запити та елемент, параметр dataType якого має значення "jsonp" не підтримують запити у синхронному режимі. Врахуйте, що використовуючи синхронні запити ви можете тимчасово заблокувати браузер відключивши будь-які дії, поки запит буде активний.
beforeSendФункція зворотного дзвінка, яка буде викликана перед здійсненням запиту AJAX. Функція дозволяє змінити об'єкт jqXHR (в jQuery 1.4.х об'єкт XMLHTTPRequest) до його відправлення. Об'єкт jqXHR це надбудова, що розширює об'єкт XMLHttpRequest, об'єкт містить безліч властивостей і методів, які дозволяє отримати більш повну інформацію про відповідь сервера, а також об'єкт містить Promise методи. Якщо функція beforeSend повертає false, то AJAX запит буде скасовано. Починаючи з версії jQuery 1.5 функція beforeSend буде викликатись незалежно від типу запиту.
cache (за замовчуванням: true, для dataType"script" і "jsonp"false).Тип: Boolean.Якщо встановлено значення false, то це змусить сторінки, що запитуються, не кешуватися браузером. Зверніть увагу, що значення false буде правильно працювати тільки з HEAD і GET запитами.
complete. Тип: Function( jqXHRjqXHR, StringtextStatus ).Функція, яка викликається, коли запит закінчується (функція виконується після AJAX подій "success" або "error"). У функцію передаються два параметри: jqXHR (в jQuery 1.4.х об'єкт XMLHTTPRequest) та рядок відповідний статусу запиту ("success", “notmodified”, "nocontent", "error", "timeout", "abort", або "parsererror"). Починаючи з версії jQuery 1.5 параметр complete може приймати масив із функцій, які викликатимуться по черзі.
contents. Тип: PlainObject.Об'єкт складається з пар рядок/регулярний вираз, що визначають, як jQuery буде обробляти (парсити) відповідь залежно від типу вмісту. Доданий до версії jQuery 1.5.
contentType (за замовчуванням: “application/x-www-form-urlencoded; charset=UTF-8”).Тип: Boolean, або String.Визначає тип вмісту, який вказується у запиті під час передачі даних на сервер. З версії з jQuery 1.6 дозволяється вказати значення false, у цьому випадку jQuery не передає в заголовку поле Content-Type зовсім.
context. Тип: PlainObject.При виконанні AJAX функцій зворотного виклику контекстом їх виконання є об'єкт window. Параметр context дозволяє налаштувати контекст виконання функції таким чином, що $( this ) буде посилатися на певний елемент DOM, або об'єкт.

crossDomain (за замовчуванням: false для запитів усередині того ж домену, true для кросдоменних запитів). Тип: Boolean.Якщо ви хочете зробити кросдоменний запит, перебуваючи на тому ж домені (наприклад jsonp-запит), то встановіть цей параметр в true. Це дозволить, наприклад, перенаправити запит на інший домен з вашого сервера. Доданий до версії jQuery 1.5.
data. Тип: PlainObject, або String, або Array.Дані, які будуть надіслані на сервер. Якщо вони не є рядком, то перетворюються на рядок запиту. Для GET запитів рядок буде додано до URL-адреси. Для того, щоб запобігти автоматичній обробці ви можете скористатися параметром processData зі значенням false. Якщо дані передаються у складі об'єкта, він повинен складатися з пар ключ/значение. Якщо значення є масивом, то jQuery серіалізує кілька значень з тим самим ключем (залежно від значення параметра traditional, який дозволяє використовувати традиційний тип серіалізації заснований на методі $.param).
dataFilter. Тип: Function( Stringdata, Stringtype ) =>Anything.Функція викликається після успішного виконання AJAX запиту та дозволяє обробити “сирі” дані, отримані з відповіді сервера. Повернення даних має відбуватися відразу після їх обробки. Функція приймає два аргументи: data – дані отримані від сервера у вигляді рядка та type – тип цих даних (значення параметра dataType).
dataType (за замовчуванням: xml, json, script, або html ).Тип: String.Визначає тип даних, який ви очікуєте отримати від сервера. Якщо тип даних не вказано, jQuery намагатиметься визначити його на основі типу MIME з відповіді (XML тип MIME призведе до отримання XML з версії jQuery 1.4 json даватиме об'єкт JavaScript, script буде виконувати скрипт, а все інше буде повернуто у вигляді рядка). Основні типи (результат передається як перший аргумент у функцію зворотного виклику) success):
- "xml" - Повертає XML документ, який можна обробити за допомогою jQuery.
- "html" - Повертає HTML як звичайний текст, теги будуть оброблені та виконані після вставки в об'єктну модель документа (DOM).
- "script" - Розцінює відповідь як JavaScript та повертає його як звичайний текст.Вимикає кешування за допомогою додавання параметра до рядка запиту _=[TIMESTAMP], навіть якщо параметр cache має значення true. Це перетворить метод POST в GET для кросдоменних запитів.
- "json" - Розцінює відповідь як JSON та повертає об'єкт JavaScript. Кросдоменні "json" запити перетворюються на "jsonp", якщо параметри запиту не вказано jsonp: false. Дані JSON борсаються в строгому порядку і повинні відповідати загальноприйнятому формату, будь-який некоректний JSON відкидається і видається помилка. З версії jQuery 1.9, порожня відповідь не приймається, сервер повинен повернути як відповідь NULL, або <>.
- "jsonp" – завантажує дані у форматі JSON, використовуючи при цьому формат завантаження JSONP. Додає додатковий параметр “?callback=?” наприкінці URL адреси для вказівки імені функції оброблювача. Вимикає кешування шляхом додавання параметра _=[TIMESTAMP] до URL адресою, навіть якщо парамета cache має значення true.
- "text" – звичайний текстовий рядок.
- кілька значень – значення поділяються пробілом. Починаючи з версії 1.5, jQuery може перетворити тип даних, отриманий у Content-Type заголовка, в тип даних, який вам потрібно. Наприклад, якщо ви бажаєте, щоб текстова відповідь була розцінена як XML, використовуйте “text XML” для цього типу даних. Ви також можете зробити JSONP запит, отримати його у вигляді тексту та інтерпретувати його у форматі XML: "jsonp text XML". Наступний рядок дозволить зробити те саме: “jsonp XML”, jQuery буде намагатися конвертувати з JSONP в XML, після невдалої спроби спробує перетворити JSONP в текст, а потім з тексту вже в XML.
- jqXHR – об'єкт jqXHR (в jQuery 1.4.х, об'єкт XMLHttpRequest).
- textStatus - Рядок, що описує тип помилки, що відбулася. Можливі значення (крім null) не "timeout", "error", "abort" і "parsererror".
- errorThrown - Додатковий об'єкт виключення, якщо сталося. У разі виникнення помилки HTTP аргумент отримує текстову частину стану, наприклад, "Not Found", або "Internal Server Error".Починаючи з версії jQuery 1.5 допускається передавати як значення параметра масив функцій, при цьому кожна функція буде викликана у свою чергу. Зверніть увагу, що цей обробник не викликається для кросдомених скриптів та запитів JSONP.
- jsonpCallback. Тип: String, або Function.Вказує ім'я функції зворотного дзвінка для JSONP запиту. Це значення буде використовуватись замість випадкового імені, яке автоматично генерується та присвоюється бібліотекою jQuery. Рекомендується, щоб jQuery самостійно генерувало унікальне ім'я, це дозволить легко управляти запитами і обробляти можливі помилки. У деяких випадках встановлення власного імені функції дозволить покращити браузерне кешування GET запитів.Починаючи з версії jQuery 1.5, ви можете як значення параметра jsonpCallback вказати функцію. У цьому випадку, значення параметра jsonpCallback має бути встановлено значення цієї функцією, що повертається.
- метод (за замовчуванням: "GET").Тип: String.Метод HTTP, що використовується для запиту (наприклад, "POST", "GET", "PUT"). Доданий до версії jQuery 1.9.0.
- mimeType. Тип: String.MIME тип, який перевизначає MIME тип, вказаний в об'єкті XHR за замовчуванням. Доданий до версії jQuery 1.5.1.
- password. Тип: String.Пароль, який буде використаний з XMLHttpRequest у відповіді на запит автентифікації доступу HTTP.
- processData (за замовчуванням: true).Тип: Boolean.За замовчуванням дані, що передаються у параметр data як об'єкт буде оброблено та перетворено на рядок запиту, що підходить для типу даних за умовчанням “application/x-www-form-urlencoded”. Якщо Вам необхідно надіслати DOMDocument, або інші не оброблені дані, то встановіть значення цього параметра в false.
- scriptCharset. Тип: String.Встановлює атрибут charset (кодування символів) на HTML тег, що використовується у запиті. Використовується, коли кодування на сторінці відрізняється від кодування віддаленого скрипта. Зверніть увагу, що параметр scriptCharset застосовується лише у кросдоменні запити з параметром type зі значенням "GET" (за замовчуванням) та параметром dataType зі значенням "jsonp", або "script".
- statusCode (за замовчуванням: ).Тип: PlainObject. Об'єкт числових кодів HTTP та функції, які будуть викликатись, коли код відповіді сервера має відповідне значення (визначений код HTTP). Наприклад, наступна функція буде викликана, якщо від сервера отримано код відповіді 404, або "Not found" (стандартний код відповіді HTTP про те, що клієнт міг спілкуватися з сервером, але сервер не може знайти дані відповідно до запиту.)
- success. Тип: Function( Anythingdata, StringtextStatus, jqXHRjqXHR ).Функція зворотного дзвінка, яка викликається якщо AJAX запит виконається успішно. Функції передаються три аргументи:
  - data – дані, повернуті з сервера. Дані форматуються відповідно до параметрів dataType, або dataFilterякщо вони вказані
  - textStatus - Рядок описує статус запиту.
  - jqXHR – об'єкт jqXHR (до версії jQuery 1.4.x об'єкт XMLHttpRequest).Починаючи з версії jQuery 1.5 допускається передавати як значення параметра масив функцій, при цьому кожна функція буде викликана у свою чергу.
  Форма з надсиланням файлів методом AJAX
  
  Створюємо форму з 2 текстовими полями name і phone, та одним полем для передачі файлу (fileImage)
  
  HTML
```
  <input type="file" name="fileImage" accept=".jpg, .jpeg, .png" multiple="multiple"> <input type="submit" value="Отправить">
```
  JQUERY
```
/* запускаємо скрипт після повного завантаження документа */ $("document").ready(function() < /* вішаємо подію на раніше створену форму */ $("#feedBack").on("submit", function() < /* створюємо об'єкт із даними з полів */ let formData = new FormData(feedBack) /* додаємо додаткові дані для відправки */ formData.append("url_query", "prog-time"); з форми */ let allfiles = $(this).find('input[name="fileImage"]'); 0].files.length; i++)< formData.append("file_"+i, allfiles[0].files[i]); >/* відправляємо AJAX запит */ $.ajax(< type: "POST", url: '/query.php', contentType: false, processData: false, data: formData, success: function(data)< console.log(data) >, >) >);
```
  11 PHP
```
/*. прописуємо необхідні перевірки та обробки даних */ /* зберігаємо картинки на сервері */ foreach(image["name"], $image["tmp_name"]); >
```

Як ви оброблятимете запити в Ajax