Саме на цій технології працюють всі сучасні Single Page додатки.
Для цього використовується XMLHttpRequest. З його назви можна подумати, що він може працювати тільки з xml, але це не так. Він може працювати з будь-якими даними.
Для того, щоб звертатися на сервер за даними, давайте створимо API з тестовими даними за допомогою сервісу mocky.io.
Ось у мене є JSON даних
Вставляємо його в body запиту і в advance mode вибираємо
Для того, щоб будь-який домен міг звертатися до цього API.
Натискаємо Generate response і отримуємо посилання на наш API.
Для початку нам потрібно створити новий екземпляр XMLHttpRequest.
Тепер конфігурувати який url ми хочемо отримати
Для цього на xhr ми викликаємо метод open передаючи туди тип запиту, url, і асинхронний чи запит. Звичайно ми хочемо асинхронний. Ніколи не використовуйте синхронні запити, так як це блокує продовження скрипта. У 99 випадках зі 100 цього робити не потрібно.
Не варто думати, що xhr.open виконує запит. Хоча з назви схоже. Він його тільки конфигурирует. Для відправлення запиту використовується xhr.send
Наш запит відправлено, але ми ніяк не обробили отримання даних. У цьому нам допоможе спеціальний метод onreadystatechange
Усередині методу ми повинні перевіряти readyState на 4, щоб зрозуміти, коли запит закінчиться. Поки readyState нижче четвірки, то запит не закінчений. Там відбувається початок запиту, отримання заголовків, завантаження body і тільки потім запит завершено.
Тепер давайте додамо перевірку на error і виведення результатів в консоль
Як ми бачимо, результат виводиться у вигляді рядка, тому нам потрібно ще і парсити його в JSON
Які ж основні мінуси XMLHttpRequest і чому все використовують ajax в jQuery для отримання даних або окремі бібліотеки для цього наприклад superagent або axios.
Першим мінус - це звичайно кількість коду. У будь-якої з допоміжних бібліотек метод для роботи з http запитами набагато лаконічніше.
Другий - це відсутність Проміс при роботі з XMLHttpRequest. Ми не можемо написати .then, передати туди коллбек і виконати що ми хочемо коли запит завершиться. Тому з цим кодом незручно працювати.
Третій - це кроссбраузерность. Навіть в IE 10-11 XMLHttpRequest працює не так, як в інших браузерах.
Проте розуміти і пам'ятати, що виконується всередині потрібно, хоча навряд чи ви будете його використовувати в чистому вигляді.