XMLHttpRequest 2, Урок за HTML5

XMLHttpRequest2, или по-точно XMLHttpRequest Level 2, е същият XMLHttp-Request обект, отговорен за функционалността на AJAX, оборудван с нови функции.

Всички те всъщност са корекции на недостатъците на предишната реализация на компонента, който вече има големи предимства за мрежата, но, уви, не е идеален.

Вторият проблем е асинхронното прехвърляне на двоични данни (например картини). Тук всичко е по-просто - такива неща изобщо не бяха предвидени. Те се измъкнаха от ситуацията с още по-грозни методи, като срамно скриха рамка с форма за качване на страницата или организираха получаването на файл под формата на двоичен низ.

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

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

На първо място, XMLHttpRequest Level 2 работи в рамките на нов модел на взаимодействие - протоколът за кръстосано споделяне на ресурси (CORS), който позволява отправяне на заявки от един домейн към друг. На практика нищо не се променя в схемата за взаимодействие, просто браузърът, в случай на достъп до друг, вместо да хвърли изключение („произходна грешка“), добавя едно заглавие към заявките:

Които могат да бъдат издадени както към един сайт, така и към целия домейн. Този параметър е еквивалентен на обекта на събитието. произход в уеб съобщения.

Ето как xmlhttp заявка прозрачно се появява от един домейн към друг:

varxhr = нов XMLHttpRequest();

xhr. onload = функция (e)

Променливи данни = JSON. анализира (този.отговор);

Дори не е интересно - абсолютно нищо не се е променило от страна на потребителя!

За работас данни във форма, различна от низове, се появиха свойствата responseType и response, което ви позволява изрично да укажете на браузъра формата на данните, очаквани в резултат на отговора. След като зададете подходящата стойност на свойството responseType на XMLHttpRequest. отговорът ще съдържа стойности в един от следните формати: DOMString, ArrayBuffer, Blob, Document.

Ето как изглежда асинхронното изпращане на изображение с новия XMLHttpRequest:

varxhr = нов XMLHttpRequest(); xhr. open('GET', 'image.jpeg', true); xhr. responseType = 'frraybuffer'; xhr. onload = функция(e)< if(this.status == 200)

varbuilder = нов BlobBuilder();

Bilder. добави (този.отговор):

var blob = строител. getBlob('image.jpg');

По принцип типът ArrayBuffer трябва да се обсъди отделно.

И ето как можете да направите същото, като използвате типа Blob (ако не е необходимо да работим с отделни байтове):

varxhr = нов XMLHttpRequest(); xhr. open('GET', '/path/to/image.png', true); xhr. responseType = 'петно'; xhr. onload = функция(e) < ако (това състояние == 200) < var blob = това. отговор;

varimg = документ. createElement('img'); img. src=прозорец. URL адрес. createObjectURL(blob);

Към сървъра вече могат да се изпращат данни в различни формати. Ето примери за едни и същи arrayBuffer и Blob:

Var uInt8Array = нов Uint8Array([1, 2, 3]);

xhr. изпрати (uInt8Array.buffer);

var blob = нов BlobBuilder();

Петно. append('Аз съм просто пълно петно...'); петно. getBlob('текст/обикновен');

На практика тези функции означават, че вече е достъпно за нас, например изпращане на файл на части, както и зареждане и запазване на файл във файловата система HTML5.

Друго полезно свойство на актуализирания елемент е възможността за работа с данни,идващи от формуляра като един обект - FormData (), инкрустиращ всички елементи на формуляра (да, да и ). Изпращането на данни в този случай изглежда напълно стандартно:

FormData = нови FormData(формуляр);

Тук формулярът е обект на HTML формуляр. И можете да го направите така:

varformData = new FormData(); formData. append('потребител', 'ваня'); formData. append('роля', 'администратор'); formData. добави ('id', 17);

Трябва да се отбележи, че разработчиците изглеждаха много впечатлени от възможностите и подходите на библиотеката jquery, но това лошо ли е?

---