Javascript XMLHttpRequest, історія створення, стандарти, приклади

XMLHttpRequest (XHR) - це API у вигляді об'єкта, наданого середовищем jаvascript браузера. Зокрема, пошук даних з XHR з метою постійної зміни завантаженої веб-сторінки є базовою концепцією дизайну Ajax. Незважаючи на назву, XHR можна використовувати з протоколами, відмінними від HTTP, а дані можуть бути у формі не тільки XML, але і JSON, HTML або простого тексту. WHATWG підтримує стандарт XHR. Поточна робота в W3C для створення стабільної специфікації заснована на моментальних знімків стандарту WHATWG. Спочатку jаvascript XMLHttpRequest був об'єктом ActiveX, його використання обмежувалося интрасетями на базі Microsoft і не підходило для інших сайтів. Команда Mozilla зацікавилася реалізацією еквівалента JScript і поширила його на всі браузери, включаючи ті, які працюють на базі Gecko /KHTML і Opera. Навіть IE7 більше не вимагає установки ActiveX для використання XHR.

Історія XMLHttpRequest

Концепція jаvascript XMLHttpRequest створювалася фахівцями Outlook Web Access для застосування на сервері Microsoft Exchange 2000. Версії 5 і 6 не визначали ідентифікатор об'єкта XHR на своїх мовах сценаріїв, оскільки сам ідентифікатор Request не був стандартним на момент випуску. Microsoft додала ідентифікатор об'єкта на свої мови сценаріїв в Internet Explorer 7.0 випущений в жовтні 2006 року. У проекті браузера був розроблений і реалізований інтерфейс jаvascript XMLHttpRequest в механізм компонування Gecko. Він був змодельований таким чином, щоб максимально бути схожим на інтерфейс Microsoft Request. Mozilla створив оболонку для використання цього інтерфейсу через об'єкт JS, який був названий XMLHttpRequest. Об'єкт вже зробили доступним в Gecko версії 0.6 випущеної 6 грудня 2000 року, але він ще не був повністю функціональним до тих пір, поки 5 червня 2002 року не вийшла версія 1.0 Gecko, після чого ідентифікатор об'єкта став стандартом де-факто в інших великих веб-системах:


Safari 1.2 випущеному в лютому 2004 року. Opera 8.0 випущеному в квітні 2005 року. iCab 3.0b352 випущеному у вересні 2005 року. З появою крос-браузерних бібліотек jаvascript, таких як jQuery, розробники можуть викликати функціональність jаvascript XMLHttpRequest без кодування безпосередньо в API. World Wide Web Consortium опублікував проект специфікації для XMLHttpRequest 5 квітня 2006 року з метою документації мінімального набору сумісних функцій на основі існуючих реалізацій, дозволяючи розробникам використовувати їх без коду, специфічного для платформи. 25 лютого 2008 року W3C також опублікував ще одну специфікацію робочого проекту - XMLHttpRequest Level 2. Рівень 2 складається з розширеної функціональності, включаючи підтримку для запитів і обробку байтових потоків.

Стандарти ідентифікатора об'єкта

Оскільки стандарт W3C для об'єкта XMLHttpRequest jаvascript post раніше є попереднім варіантом, користувальницькі агенти можуть не дотримуватися всі функції визначення, а будь-яку з наступних дій може бути змінено. Екстремальний догляд слід враховувати при написанні сценарію з об'єктом XMLHttpRequest для декількох користувальницьких агентів.
HTTP і HTTPS запити об'єкта XMLHttpRequest ініціалізуються відкритим способом. Він викликається до фактичної відправки запиту для перевірки. Цей метод не гарантує, що URL-адресу існує, а інформація вірна. Він може приймати до п'яти параметрів, але для ініціалізації запиту вимагає тільки два. Першим параметром є текстовий рядок. Представляємо методи запитів, які повинні підтримуватися відповідним агентом користувача, певним проектом W3C для XMLHttpRequest jаvascript. Приклади: GET підтримується Internet Explorer 7 Mozilla. POST підтримується IE7 Mozilla. HEAD підтримується IE7. Методи запиту не обмежуються переліченими вище. У проекті W3C говориться, що браузер може підтримувати їх на свій розсуд. Другий параметр - це ще одна текстовий рядок, який вказує URL-адресу HTTP-запиту. Третій параметр - це логічне значення, яке вказує, чи буде запит асинхронним. Він не є обов'язковим за проектом W3C. Його значення за замовчуванням має вважатися істинним за допомогою відповідного інтерфейсу агента W3C. Асинхронний запит «істина» не буде чекати відповіді сервера, перш ніж продовжити виконання поточного скрипта. Замість цього він викличе прослушивателя подій onreadystatechange об'єкта XMLHttpRequest jаvascript post на різних етапах запиту. Четвертий і п'ятий параметри - це ім'я користувача і пароль. Ці параметри можуть бути надані для аутентифікації та авторизації, якщо це потрібно сервером.

Метод SetRequestHeader

Після успішної ініціалізації можна викликати метод Header об'єкта XMLHttpRequest open jаvascript для відправки HTTP-заголовків із запитом. Перший параметр методу - це ім'я заголовка. Другий параметр - значення рядка. Цей метод повинен бути використаний для кожного заголовка, який відправляється з запитом.
Прихований "камінь" в XMLHttpRequest стандарті, який спрощує процес вибірки та аналізу даних JSON через Ajax, це JSON & JSON-P. Звичайний спосіб запропонувати серверні дані для браузерів, щоб їх можна було використовувати на клієнтський jаvascript, це форматування даних, таких як JSON, і доступ до нього через власний URL. Наприклад: XMLHttpRequest jаvascript Json Щоб відправити HTTP-запит, необхідно викликати метод відправки XMLHttpRequest. Firefox 3.0.x і попередні версії видають виняток, якщо send викликається без аргументів. Якщо цей параметр є об'єктом документа DOM, агент користувача повинен запевнити, що він перетворений в добре сформований XML. Якщо заголовок Content-Type ще не додано через SetRequestHeader, він повинен автоматично додаватися відповідним агентом користувача такою дією: «application /xml; charset = charset », де charset - це кодування, що використовується для документа. Якщо користувальницький агент налаштований на використання проксі-сервера, об'єкт XMLHttpRequest змінить запит, щоб передати Proxy-Authorization сконфігуровані заголовки.

Зміни стану XHR

Якщо метод був викликаний успішно, властивості об'єкта XMLHttpRequest буде присвоєно значення 1 (Open). Після того як заголовки HTTP-відповіді були отримані, для властивості readyState об'єкта XHR призначається значення 2 (HEADERS_RECEIVED). Після завантаження вмісту відповіді HTTP властивості readyState об'єкта XHR має бути присвоєно значення 3 (Loading). Після завершення завантаження HTTP-відповіді властивості readyState об'єкта XHR повинно бути призначено значення 4 (Done). Слухач буде реагувати на зміни стану, які виникають після його визначення. Щоб виявити стану 1 і 2 слухач повинен бути визначений до виклику open. Відкритий метод повинен бути застосований до виклику send. Цей метод перериває запит, якщо об'єкт readyState об'єкта XHR ще не став 4 (Done). Метод abort гарантує, що обробник зворотного виклику не буде викликаний під час асинхронного запиту. Деякі бібліотеки AJAX використовують переривання, щоб скасувати потенційний дублікат або зіпсовані запити.

Крос-доменних запити

В історії раннього розвитку інтернету було виявлено, що можна порушити безпеку користувачів за допомогою jаvascript для обміну інформацією з одного веб-сайту на інший, менш авторитетний. Таким чином всі сучасні браузери реалізують одну й ту ж політику походження, яка запобігає багато атаки, такі як міжсайтовий скриптінг.
Дані jаvascript XMLHttpRequest onload схильні до цієї політики безпеки, але іноді веб-розробники хочуть навмисне обійти обмеження. Це пов'язане з законним використанням субдоменів, оскільки створення XHR зі сторінки, сформованої foo.example.com для отримання з неї інформації bar.example.com як правило, зазнає невдачі. Існують різні альтернативи, що дозволяють обійти цю функцію безпеки, включаючи застосування JSONP, спільне використання ресурсів (CORS) або альтернативи з плагінами, такими як Flash і Silverlight.

Програми в браузерах

Ініціалізація об'єкта XHR насправді досить проста в більшості браузерів, але для підтримки MSIE 5 та 6 необхідно обслуговувати кілька різних методів, тому процес виглядає настільки складним. В основному, сценарій намагається послідовно використовувати три різних методу до тих пір, поки він не буде успішним або не закінчиться. Функція loadXMLDoc приймає два параметри. Першим з них є розташування сценарію на стороні сервера, а другим - змінні, які необхідно передати цього скрипту. Це короткий приклад того, як можна викликати сценарій. Він використовує скрипт, розташований в /scripts/myscript.php з двома параметрами GET (q і target). Рекомендується кодувати значення за допомогою encodeURIComponent.

POST замість GET

Для передачі на сервер даних об'ємом більше, ніж 512 байт, необхідно використовувати POST new XMLHttpRequest jаvascript 34 jаvascript xml замість GET. Якщо потрібно отримувати дані POST, потрібно змінити тип запиту MIME, використовуючи заголовок Content-Type і передаючи змінних у виклику відправлення. Заключна частина функції loadXMLDoc змінюється, як показано на фото нижче. У більшості випадків третій параметр команди open може бути зупинений. Значення true указує, що виклик повинен бути асинхронним - сценарій триває, не чекаючи відповіді XML, який вже є за замовчуванням. Передача значення false призводить до зупинки скрипта до отримання відповіді. Сценарій, на який посилається URL, буде скриптом на стороні сервера (PHP, Perl або аналогічним). Він повертає добре сформований XML-документ. Щоб уникнути попереджень про безпеку браузера, він повинен бути розміщений в тому ж домені, що і викликає сторінка бути доступний через HTTP або HTTPS.

Передача з jаvascript на серверний сценарій

Функція, яка обробляє відповідь (наприклад, processReqChange), повинна мати можливість розпаковувати і обробляти отриманий XML. На цій діаграмі показано, як дані передаються з jаvascript на серверний сценарій і назад. Принцип досить простий. Повернений документ XML буде містити одну або декілька команд, які виконуються послідовно - для створення попереджень, для зміни значень форми або для управління DOM. Все це виконується функцією processReqChange.

Доступні команди

У загальній складності застосовують сім різних команд, які можуть бути викликані бібліотекою об'єкта: alert (message) - відобразити попередження jаvascript. setvalue (target, value) - встановити значення поля форми з ідентифікатором з мішені. setdefault (target) - скинути значення поля форми. focus (target) – встановити фокус до поля форми. setcontent (target, content) - встановити внутрішній HTML елемента HTML. setstyle (target, property value) - задати стиль елемента HTML. setproperty (target, property value) - задати властивість елемента HTML. У кожному випадку мета - це ідентифікатор, який посилається на елемент HTML-сторінки. Іншими значеннями є текст або HTML для додавання додаткових параметрів функції processReqChange.

Генерація відповіді XML за допомогою PHP

Представлені тут функції призначені для PHP програмістів, які не хочуть надто багато знати про jаvascript, тому що після відправки першого запиту подальший JScript не потрібно. XML-файл (він генерує попередження, наприклад, для випадку, коли натискаючи на посилання нижче, створюється вікно попередження JS з текстом «hello world!») - це важливий перший крок на будь-якій мові програмування. Наступний відповідь XML завантажить деякий текст в елемент на сторінці. У цьому разі висновок, який має ідентифікатор 2 буде відображатися у div. Замість div можна легко встановити зміст заголовка, абзацу або комірки таблиці: example2 hello world. Як згадувалося раніше, можна вставляти HTML, а не текст, а також повертати динамічні, а не статичні дані. Наступний XML-запит генерується з використанням PHP для вставки поточної дати і часу. Internet Explorer буде кешувати відповідь XML і використовувати його для майбутніх запитів. Це означає, що висновок ніколи не зміниться. Інші браузери щоразу викликають новий запит. Всі браузери з підтримкою DOM приймають backgroundColor, оскільки ім'я стилю має колір фону, який більш «правильний» і працює тільки в деяких з них. Значення можуть бути згенеровані «на льоту» з використанням PHP або іншого сервера. Перша команда встановлює властивість background-color в поле hello world на жовтий колір (# ff0), а друга - на випадковий (червоний, зелений або синій). Команди, в основному, пов'язані з формуванням полів - встановлення /скидання значення в поле та встановлення фокусу. Вони корисні при перевірці форми на стороні сервера в режимі реального часу, коли потрібно переглядати дані без перезавантаження поточної сторінки.

Створення XML з використанням jаvascript

Існує кілька різних способів, як викликати функцію loadXMLDoc. Наприклад, береться посилання на форму в якості першого параметра, а потім дві додаткові змінні. Успішний виклик loadXMLDoc повертає значення "так". onsubmit обробник буде повертати "брехня". Скасовуючи дія за замовчуванням, він представить подія, яке у іншому випадку викликало б форму. Подальше виконання відбувається за допомогою Ajax, тому браузеру не потрібно завантажувати нову сторінку. Невдалий виклик loadXMLDoc повертає значення "брехня". onsubmit обробник буде повертати "вірно", в результаті чого форма буде представлена в звичайному режимі. Подальше виконання проходить з допомогою nonAjaxTarget.html. Виконується функція запобігання кешування значень відповіді jаvascript xmlhttprequest cookie. Деякі браузери будуть кешувати GET-запити, виконані з використанням XHR, щоб після першого виклику наступні з одного і того ж сценарію просто перезавантажували перший відповідь. Щоб обійти це, потрібно додати випадкову рядок або тимчасову мітку до запиту, як показано на фото нижче: Якщо сценарій завжди повертає один і той же відповідь для заданих параметрів, то не потрібно турбуватися про це, так як використовується кешування для прискорення програми. Підводячи підсумок того, наскільки просто працювати з Ajax з використанням цієї структури, потрібно тільки виконати наступні дії: Налаштувати сценарій на стороні сервера, щоб прийняти параметри GET або POST або COOKIE і повернути дійсний XML-файл. Вказати файл xmlhttp.js JS на сторінці. Використовувати jаvascript для виклику. Зворотні виклики Ajax можуть бути виконані шляхом створення екземпляра об'єкта XHR в клієнтському JScript. jаvascript XMLHttpRequest get може використовуватися для прямого виклику серверних об'єктів, таких як сторінки та веб-служби. Вони будуть зберігати або повертати дані. Ajax спочатку був абревіатурою для асинхронного JS і XML. «Асинхронний» означає, що кілька подій відбуваються абсолютно незалежно один від одного. Як тільки клієнт робить зворотний виклик Ajax для сервера, йому не потрібно чекати відповіді, так як він може продовжувати використовувати веб-застосунок під час обробки запиту. Після цього сервер відправить відповідь клієнту, а той обробить його в міру необхідності.