XMLHttpRequest 2, Підручник HTML5

XMLHttpRequest2, або, точніше, XMLHttpRequest Level 2, це той самий, відповідальний за AJAX-функціонал об'єкт XMLHttp-Request, оснащений новими можливостями.

Всі вони - по суті, виправлення недоліків попередньої реалізації компонента, що має вже великі досягнення перед Інтернетом, але, на жаль, недосконалою.

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

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

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

Насамперед XMLHttpRequest Level 2 діє в рамках нової моделі взаємодії - протоколу Cross Origin Resource Sharing (CORS), що дозволяє проводити запити з одного домену на інший. На практиці при цьому в схемі взаємодії нічого не змінюється, просто браузер, у разі звернення до іншого, замість викидання виключення (origin mismath) додає до запитів один заголовок:

Який може бути виданий як одному сайту, так і цілому домену. Цей параметр еквівалентний об'єкту event. origin в Web Messages.

Ось як прозоро відбувається xmlhttp-запит з одного домену на інший:

Var xhr = новий XMLHttpRequest();

Xhr. onload = function(e)

Var data = JSON. parse (this. response);

Навіть нецікаво — на стороні користувача нічого не змінювалося!

Для роботиз даними виду, відмінного від рядків, з'явилися властивості responseType і response, що дозволяють явно вказати браузеру формат очікуваних у результаті відповіді даних. Після встановлення відповідного значення responseType властивість XMLHttpRequest. response міститиме значення в одному з наступних форматів: DOMString, ArrayBuffer, Blob, Document.

Ось як виглядає асинхронне надсилання картинки з новим XMLHttpRequest:

Var xhr = новий XMLHttpRequest(); xhr. open('GET', 'image. jpeg', true); xhr. responseType = 'frraybuffer'; xhr. onload = function(e)< if (this. status == 200)

Var bilder = новий BlobBuilder();

Bilder. append(this. response):

Var blob = bilder. getBlob('image. jpg');

Взагалі, про тип ArrayBuffer слід розповісти окремо.

А ось так можна зробити те саме, використовуючи тип Blob (якщо у нас немає необхідності працювати з окремими байтами):

Var xhr = новий XMLHttpRequest(); xhr. open('GET', '/path/to/image. png', true); xhr. responseType = 'blob'; xhr. onload = function(e) < if (this. status == 200) < var blob = це. response;

Var img=document. createElement('img'); img. src = window. URL. createObjectURL(blob);

Дані в різних форматах тепер можна надсилати на сервер. Ось приклади для тих же arrayBuffer і Blob:

Var uInt8Array = New Uint8Array([1, 2, 3]);

Xhr. send(uInt8Array. buffer);

Var blob = новий BlobBuilder();

Blob. append('I am just blob fule...'); blob. getBlob('text/plain');

На практиці такі можливості означають, що тепер для нас доступна, наприклад, відправлення файлу частинами, а також завантаження та збереження файлу в HTML5 File System.

Ще одна корисна властивість оновленого елемента - можливість роботи з даними,що надходять із форми як єдиного об'єкта — FormData(), инкрустирующего всі елементи форми (так-так, і ). Відправлення даних виглядає цілком стандартно:

FormData = New FormData(form);

Тут form – об'єкт HTML Form. А можна робити й так:

Var formData = новий FormData(); formData. append('user', 'vanya'); formData. append('role', 'admin'); formData. append('id', 17);

Слід зазначити, що розробники, мабуть, перебували під сильним враженням можливостей та підходів бібліотеки jquery, але хіба це погано?

---