Отримання даних з сервера

1. В чому проблема?
2. поява Ajax
3. Основний запит Ajax
4. XMLHttpRequest
5. Обслуговування вашого прикладу з сервера
6. Fetch
7. Отже, що відбувається в коді Fetch?
8. Крім обіцянок
9. Який механізм слід використовувати?
10. Більш складний приклад
11. Виклик: XHR версія the Can Store
12. резюме
13. Дивіться також

Наша взаимовыгодная связь https://banwar.org/

Інший дуже поширеною завданням в сучасних веб-сайтах і додатках є отримання окремих елементів даних з сервера для оновлення розділів веб-сторінки без необхідності завантаження всієї нової сторінки. Ця, здавалося б, невелика деталь справила величезний вплив на продуктивність і поведінку сайтів, тому в цій статті ми пояснимо концепцію і розглянемо технології, які роблять це можливим, наприклад XMLHttpRequest і API Fetch.

В чому проблема?

Первісна завантаження сторінки в Інтернеті була простою - ви відправляли запит на сервер web-сайту, і якщо все працює, як і повинно, то вся необхідна інформація про сторінку буде завантажена і відображена на вашому комп'ютері.

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

поява Ajax

Це призвело до створення технологій, що дозволяють веб-сторінкам запитувати невеликі фрагменти даних (наприклад, HTML , XML , JSON або звичайний текст) і відображати їх тільки при необхідності, допомагаючи вирішувати проблему, описану вище.

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

Примітка: Спочатку ця загальна техніка була відома як Асинхронний JavaScript і XML (Ajax), оскільки вона, як правило, використовувала XMLHttpRequest для запиту даних XML. У наші дні це звичайно не так (ви, швидше за все, будете використовувати XMLHttpRequest або Fetch для запиту JSON), але результат все той же, і термін «Ajax» як і раніше часто використовується для опису цієї техніки.

Модель Ajax передбачає використання веб-API в якості проксі для більш розумного запиту даних, а не просто для того, щоб браузер перезавантажувати всю сторінку. Давайте подумаємо про значення цього:

1. Перейдіть на один з ваших улюблених сайтів, багатих інформацією, таких як Amazon, YouTube, CNN і т.д., і завантажте його.
2. Тепер знайдіть що-небудь, наприклад, новий продукт. Основний контент зміниться, але більша частина інформації, подібної заголовку, нижньому колонтитулу, навігаційного меню і т. Д., Залишиться незмінною.

Це дійсно добре, тому що:

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

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

Основний запит Ajax

Давайте подивимося, як обробляється такий запит, використовуючи як XMLHttpRequest , так і Fetch . У цих прикладах ми будемо запитувати дані з декількох текстових файлів і використовувати їх для заповнення області вмісту.

Цей набір файлів буде діяти як наша підроблена база даних; в реальному додатку ми з більшою ймовірністю будемо використовувати серверний мова, такий як PHP, Python або Node, щоб запитувати наші дані з бази даних. Тут, однак, ми хочемо зберегти його простим і зосередитися на стороні клієнта.

XMLHttpRequest

XMLHttpRequest (який часто скорочується до XHR) є досить старою технологією зараз - він був винайдений Microsoft в кінці 1990-х років і вже досить довго стандартизований в браузерах.

1. Щоб почати цей приклад, створіть локальну копію ajax-start.html і чотирьох текстових файлів - verse1.txt , verse2.txt , verse3.txt і verse4.txt - в новому каталозі на вашому комп'ютері. У цьому прикладі ми завантажимо інший вірш (який ви цілком можете розпізнати) через XHR, коли він буде обраний в випадаючому меню.

2. усередині елемента <Script> додайте наступний код. У ньому зберігається посилання на елементи <Select> і <Pre> в змінних і визначається onchange обробника подій, так що, коли значення select змінюється, його значення передається викликається функції updateDisplay () в якості параметра.

   var verseChoose = document.querySelector ( 'select'); var poemDisplay = document.querySelector ( 'pre'); verseChoose.onchange = function () {var verse = verseChoose.value; updateDisplay (verse); };

3. Давайте визначимо нашу функцію updateDisplay (). Перш за все, поставте наступне нижче свого попереднього блоку коду - це порожня оболонка функції:

   function updateDisplay (verse) {};

4. Ми почнемо нашу функцію зі створення відносного URL-адреси, що вказує на текстовий файл, який ми хочемо завантажити і який знадобиться нам пізніше. значення елемента <Select> в будь-який момент збігається з текстом всередині обраного <Option> (Якщо ви не вкажете інше значення в атрибуті value) - наприклад, «Verse 1». Відповідний текстовий файл вірша є «verse1.txt» і знаходиться в тому ж каталозі, що і файл HTML, тому буде використовуватися тільки ім'я файлу.

   Проте, веб-сервери, як правило, чутливі до регістру, і ім'я файлу не має символу "прогалини". Щоб перетворити «Verse 1» в «verse1.txt», нам потрібно перетворити V в нижній регістр, видалити пробіл і додати .txt в кінець. Це можна зробити за допомогою replace () , toLowerCase () і простий конкатенації рядків . Додайте наступні рядки всередині функції updateDisplay ():

   verse = verse.replace ( "", ""); verse = verse.toLowerCase (); var url = verse + '.txt';

5. Щоб почати створення запиту XHR, вам потрібно створити новий об'єкт запиту, використовуючи конструктор XMLHttpRequest () . Ви можете назвати цей об'єкт так, як вам подобається, але ми будемо називати його request (запитом), щоб все було просто. Додайте наступні нижче рядки:

   var request = new XMLHttpRequest ();

6. Потім вам потрібно використовувати метод open () , Щоб вказати, який HTTP request method використовувати для запиту ресурсу з мережі і який його URL-адресу. Ми просто використовуємо метод GET тут і задаємо URL як нашу змінну url. Додайте це нижче вашої попередньої рядки:

   request.open ( 'GET', url);

7. Потім ми поставимо тип очікуваної відповіді, який визначається як властивість responseType - як text. Тут це не є абсолютно необхідним - XHR повертає текст за замовчуванням - але це хороша ідея, щоб звикнути до налаштування цього, якщо ви хочете отримати інші типи даних в майбутньому. Додайте наступне:

   request.responseType = 'text';

8. Отримання ресурсу з мережі - це asynchronous операція, що означає, що вам потрібно дочекатися завершення цієї операції (наприклад, ресурс повертається з мережі), перш ніж ви зможете зробити що-небудь з цією відповіддю, інакше буде викинута помилка. XHR дозволяє вам обробляти це, використовуючи обробник події onload - він запускається при виникненні події load (Коли відповідь повернувся). Коли це станеться, дані відповіді будуть доступні в властивості response (відповідь) об'єкта запиту XHR.

   Додайте наступне нижче вашого останнього доповнення. Ви побачите, що всередині обробника події onload ми встановлюємо textContent poemDisplay (елемент <Pre> ) В значення request. response .

   request.onload = function () {poemDisplay.textContent = request.response; };

9. Вищенаведена конфігурація запиту XHR фактично не виконуватиметься до тих пір, поки ми не викличемо метод send () . Додайте наступне нижче вашого попереднього доповнення для виклику функції:

   request.send ();

10. Одна з проблем з прикладом полягає в тому, що він не покаже жодного вірша, коли він вперше завантажується. Щоб виправити це, додайте наступні два рядки внизу вашого коду (трохи вище закриває тега </ script>), щоб завантажити вірш 1 за замовчуванням і переконайтеся, що елемент <Select> завжди показує правильне значення:

    updateDisplay ( 'Verse 1'); verseChoose.value = 'Verse 1';

Обслуговування вашого прикладу з сервера

Деякі браузери (включаючи Chrome) ні запускати запити XHR, якщо ви просто запускаєте приклад з локального файлу. Це пов'язано з обмеженнями безпеки (для отримання додаткової інформації про безпеку в Інтернеті, ознайомтеся з Website security ).

Щоб обійти це, нам потрібно протестувати приклад, запустивши його через локальний веб-сервер. Щоб дізнатися, як це зробити, прочитайте Як налаштувати локальний тестовий сервер?

Fetch

API-інтерфейс Fetch - це, в основному, сучасна заміна XHR - недавно він був представлений в браузерах для спрощення асинхронних HTTP-запитів в JavaScript, як для розробників, так і для інших API, які будуються поверх Fetch.

Давайте перетворимо останній приклад, щоб використовувати Fetch!

1. Зробіть копію свого попереднього готового каталогу прикладів. (Якщо ви не працювали над попереднім вправою, створіть новий каталог і всередині нього створіть копії xhr-basic.html і чотирьох текстових файлів - verse1.txt , verse2.txt , verse3.txt і verse4.txt .)

2. Усередині функції updateDisplay () знайдіть код XHR:

   var request = new XMLHttpRequest (); request.open ( 'GET', url); request.responseType = 'text'; request.onload = function () {poemDisplay.textContent = request.response; }; request.send ();

3. Замініть весь XHR-код наступним:

   fetch (url) .then (function (response) {response.text (). then (function (text) {poemDisplay.textContent = text;});});

4. Завантажте приклад в свій браузер (запустіть його через веб-сервер), і він повинен працювати так само, як і версія XHR, за умови, що ви використовуєте сучасний браузер.

Отже, що відбувається в коді Fetch?

Перш за все, ми викликаємо метод fetch () , Передаючи йому URL-адресу ресурсу, який ми хочемо отримати. Це сучасний еквівалент request.open () в XHR, плюс вам не потрібен еквівалент .send ().

Після цього ви можете побачити метод .then () , Прикріплений в кінець fetch () - цей метод є частиною Promises - сучасна функція JavaScript для виконання асинхронних операцій. fetch () повертає обіцянку, що дозволяє відповідь, відправлений назад з сервера, - ми використовуємо .then () для запуску деякого подальшого коду після того, як обіцянка буде дозволено, що є функцією, яку ми визначили всередині неї. Це еквівалент обробника події onload в XHR-версії.

Ця функція автоматично передає відповідь від сервера в якості параметра, коли обіцяє fetch (). Усередині функції ми беремо відповідь і запускаємо його метод text () , Який в основному повертає відповідь як необроблений текст. Це еквівалент request.responseType = 'text' у версії XHR.

Ви побачите, що text () також повертає обіцянку, тому ми прив'язуємо до нього інший .then (), всередині якого ми визначаємо функцію для отримання необробленого тексту, який обіцяє рішення text ().

Усередині функції внутрішнього обіцянки ми робимо те ж саме, що і в версії XHR, - встановлюємо текстовий вміст <Pre> в текстове значення.

Крім обіцянок

Обіцянки трохи заплутують перший раз, коли ви їх зустрічаєте, але не турбуйтеся про це занадто довго. Через деякий час ви звикнете до них, особливо, коли ви дізнаєтеся більше про сучасні JavaScript-API. Більшість з них в більшій мірі засновані на обіцянках.

Давайте подивимося на структуру обіцянок зверху, щоб побачити, чи можемо ми ще трохи зрозуміти це:

fetch (url) .then (function (response) {response.text (). then (function (text) {poemDisplay.textContent = text;});});

У першому рядку йдеться: «Отримати ресурс, розташований за адресою url» (fetch (url)) і «потім запустити вказану функцію, коли обіцянку буде дозволено» (.then (function () {...})). «Resolve» означає «завершити виконання зазначеної операції в якийсь момент в майбутньому». Зазначена операція в цьому випадку полягає в добуванні ресурсу з зазначеного URL (з використанням HTTP-запиту) і повернення відповіді для нас, щоб щось зробити.

Фактично, функція, передана в then (), являє собою шматок коду, який не починається негайно - замість цього він буде працювати в якийсь момент в майбутньому, коли відповідь буде повернений. Зверніть увагу, що ви також можете зберегти свою обіцянку в змінної і ланцюжок .then () замість цього. Нижче код буде робити те ж саме:

var myFetch = fetch (url); myFetch.then (function (response) {response.text (). then (function (text) {poemDisplay.textContent = text;});});

Оскільки метод fetch () повертає обіцянку, що дозволяє HTTP-відповідь, будь-яка функція, яку ви визначаєте всередині .then (), прикута до кінця, буде автоматично передаватися як параметр. Ви можете викликати параметр, який вам подобається - наведений нижче приклад буде працювати:

fetch (url) .then (function (dogBiscuits) {dogBiscuits.text (). then (function (text) {poemDisplay.textContent = text;});});

Але має сенс називати параметр тим, що описує його вміст!

Тепер давайте зосередимося тільки на функції:

function (response) {response.text (). then (function (text) {poemDisplay.textContent = text;}); }

Об'єкт відповіді має метод text () , Який бере необроблені дані, що містяться в тілі відповіді, і перетворює його в звичайний текст, який є форматом, який ми хочемо в ньому А також повертає обіцянку (яке дозволяє отриману текстову рядок), тому тут ми використовуємо інший .then () , Всередині якого ми визначаємо іншу функцію, яка диктує що ми хочемо зробити з цієї текстовим рядком. Ми просто встановлюємо властивість textContent елемента <Pre> нашого вірша рівним текстовому рядку, так що це виходить досить просто.

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

Наступний блок робить те ж саме, що і наш оригінальний приклад, але написаний в іншому стилі:

fetch (url) .then (function (response) {return response.text ()}). then (function (text) {poemDisplay.textContent = text;});

Багато розробники люблять цей стиль більше, оскільки він більш плоский і, можливо, легше читати для більш довгих ланцюжків обіцянок - кожне наступне обіцянку приходить після попереднього, а не всередині попереднього (що може стати громіздким). Єдина відмінність полягає в тому, що ми повинні були включити оператор return перед response.text (), щоб змусити його передати результат в наступне посилання в ланцюжку.

Який механізм слід використовувати?

Це дійсно залежить від того, над яким проектом ви працюєте. XHR існує вже давно і має відмінну кросбраузерну підтримку. Fetch and Promises, з іншого боку, є більш пізнім доповненням до веб-платформі, хоча вони добре підтримуються в браузері, за винятком Internet Explorer і Safari (які на момент написання Fetch були доступні в своєму попередній перегляд технології).

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

Вам дійсно потрібно вчитися - Fetch стане більш популярним, так як Internet Explorer відмовляється від використання (IE більше не розробляється, на користь нового браузера Microsoft Edge), але вам може знадобитися XHR ще деякий час.

Більш складний приклад

Щоб завершити статтю, ми розглянемо дещо складніший приклад, який показує більш цікаві застосування Fetch. Ми створили зразок сайту під назвою The Can Store - це вигаданий супермаркет, який продає тільки консерви. Ви можете знайти цей приклад в прямому ефірі на GitHub і подивитися вихідний код .

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

Існує досить багато складного коду, який включає фільтрацію продуктів за категоріями і пошуковим запитам, маніпулювання рядками, щоб дані відображалися правильно в інтерфейсі і т.д. Ми не будемо обговорювати все це в статті, але ви можете знайти великі коментарі в коді (див. can-script.js ).

Однак ми пояснимо код Fetch.

Перший блок, який використовує Fetch, можна знайти на початку JavaScript:

fetch ( 'products.json'). then (function (response) {if (response.ok) {response.json (). then (function (json) {products = json; initialize ();});} else { console.log ( 'Network request for products.json failed with response' + response.status + ':' + response.statusText);}});

Це схоже на те, що ми бачили раніше, за винятком того, що друге обіцянку знаходиться в умовному вираженні. В цьому випадку ми перевіряємо, чи був повернутий відповідь успішним - властивість response.ok містить логічне значення, яке true, якщо відповідь була в порядку (наприклад, 200 meaning "OK" ) Або false, якщо він не увінчався успіхом.

Якщо відповідь була успішним, ми виконуємо другої обіцянки - на цей раз ми використовуємо json () , а не text () , Так як ми хочемо повернути наш відповідь як структуровані дані JSON, а не звичайний текст.

Якщо відповідь не увінчався успіхом, ми виводимо повідомлення про помилку в консоль, в якому повідомляється про проблеми з'єднання з мережею запиту, який повідомляє про статус мережі і описовому повідомленні відповіді (що міститься в response.status і response.statusText , Відповідно). Звичайно, повний веб-сайт буде обробляти цю помилку більш граціозно, відображаючи повідомлення на екрані користувача і, можливо, пропонуючи варіанти для виправлення ситуації.

Ви можете перевірити сам випадок відмови:

1. Створення локальної копії файлів прикладів (завантаження і розпакування the can-store ZIP file )
2. Запустіть код через веб-сервер (як описано вище, в Serving your example from a server )
3. Змініть шлях до витягнутої файлу, наприклад, «product.json» (тобто переконайтеся, що він написаний неправильно)
4. Тепер завантажте індексний файл у свій браузер (наприклад, через localhost: 8000) і подивіться в консолі розробника браузера. Ви побачите повідомлення в рядку «Запит мережі для продуктов.json не вдалося з відповіддю 404: Файл не знайдено»

Другий блок Fetch можна знайти всередині функції fetchBlob ():

fetch (url) .then (function (response) {if (response.ok) {response.blob (). then (function (blob) {objectURL = URL.createObjectURL (blob); showProduct (objectURL, product);}) ;} else {console.log ( 'Network request for "' + product.name + '" image failed with response' + response.status + ':' + response.statusText);}});

Це працює в чому так само, як і попередній, за винятком того, що замість використання json () ми використовуємо blob () - в цьому випадку ми хочемо повернути наш відповідь у вигляді файлу зображення, а формат даних, який ми використовуємо для цього - Blob - цей термін є абревіатурою від «Binary Large Object» і може в основному використовуватися для являють собою великі файлові об'єкти, такі як зображення або відеофайли.

Після того як ми успішно отримали наш blob, ми створюємо URL-адресу об'єкта, використовуючи createObjectURL () . Це повертає тимчасовий внутрішній URL-адресу, який вказує на об'єкт, зазначений в браузері. Вони не дуже багато читали, але ви можете бачити, як виглядає, відкриваючи додаток Can Store, Ctrl- / натиснути правою кнопкою миші по зображенню і вибрати опцію «Перегляд зображення» (яка може трохи відрізнятися в залежності від того, який браузер ви). URL-адресу об'єкта буде відображатися всередині адресного рядка і повинен виглядати приблизно так:

blob: http: // localhost: 7800 / 9b75250e-5279-e249-884f-d03eb1fd84f4

Виклик: XHR версія the Can Store

Ми хотіли б, щоб ви вирішили перетворити версію додатка Fetch для використання XHR в якості корисної частини практики. Візьміть копію ZIP файлу і спробуйте змінити JavaScript, якщо це необхідно.

Деякі корисні поради:

• Ви можете знайти корисний довідковий матеріал XMLHttpRequest .
• Вам в основному потрібно використовувати той же шаблон, що і раніше, в прикладі XHR-basic.html .
• Однак вам потрібно буде додати обробку помилок, які ми показали вам у версії Fetch Can Store:
  • Відповідь знайдена в request.response після того, як подія load запущено, а не в обіцянці then ().
  • Про найкращому еквіваленті Fetch's response.ok в XHR слід перевірити, чи є request.status рівним 200 або якщо request.readyState дорівнює 4.
  • Властивості для отримання статусу і повідомлення стану однакові, але вони знаходяться на об'єкті request (XHR), а не в об'єкті response.

резюме

Це завершує нашу статтю з вилучення даних з сервера. До цього моменту ви повинні мати уявлення про те, як почати працювати як з XHR, так і з Fetch.

Дивіться також

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