Завантаження файлів AJAX за допомогою XMLHttpRequest

файлів

Нещодавно виникла ідея приготувати на Sketch щось цікаве. Хотів залити у своє портфоліо на Behance і в результаті прийшла ідея реалізувати форму для завантаження файлів в AJAX. Небагато почитавши про XMLHttpRequest, вирішив реалізувати цю ідею в робоче рішення.

У цій статті я докладно опишу як ми будемо реалізовувати надсилання файлу на сервер в AJAX. І спробую пояснити так, що навіть зрозуміє розумово відсталий слюсар-тракторист (якщо такі й бувають).

Думаю, нам варто почати з теорії та зрозуміти, що це такеXMLHttpRequest і з чим його їдять? Раджу вам не лінуватися і трохи почитати про цей об'єкт, бо я сам не особливо розумів, як його застосовувати і для чого. У моєму розумінні, це був простий метод $.get/$.post, тільки розширений. Але, прочитавши документацію, я зрозумів, що це дуже класна річ і розжувавши її для вас, опишу якомога ясніше для чого намXMLHttpRequest.

# XMLHttpRequest – що це?

Звичайно, якщо ви вже працювали з подібним, то повинні знати про такі методи, як: [$.get()](http://jquery.page2page.ru/index.php5/Ajax_%D0%B7%D0%B0 %D0%BF%D1%80%D0%BE%D1%81_%D0%BC%D0%B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BC_GET) , [$.post ()](http://jquery.page2page.ru/index.php5/Ajax_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81_%D0%BC%D0% B5%D1%82%D0%BE%D0%B4%D0%BE%D0%BC_POST) , [$.ajax](http://jquery.page2page.ru/index.php5/Ajax-%D0%B7% D0%B0%D0%BF%D1%80%D0%BE%D1%81) і т.п. і виникає питання різниці між цими методами і XMLHttpRequest. Великою різницею є те, щоXMLHttpRequest дає більше налаштувань, ніж ці методи.

Як працювати з XMLHttpRequest?

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

# Стану readyState:

  1. Loading
  2. Loaded
  3. Interactive
  4. Complete

Перше, що нам потрібне, це локальний сервер. Якщо ви використовуєте Windows, то пораджу використовувати Open Server або Denwer. Але з двох варіантів я раджу більше Open Server, у нього більше налаштувань та корисних доповнень. Але, якщо ви власник Mac (OS X), то рекомендую використовувати MAMP PRO (завантажуйте відразу крякнуту версію).

Пояснювати як встановити локальний сервер я не буду, тут знайтеся самі. Створіть у корені вашого локального сайту:index.html,script.js,style.css.

Верстати форму ми не будемо, а краще одразу викладу готовий HTML код форми.