Javascript XMLHttpRequest, история создания, стандарты, примеры

XMLHttpRequest (XHR) - это API в виде объекта, предоставленного средой JavaScript браузера. В частности, поиск данных из XHR с целью постоянного изменения загруженной веб-страницы является базовой концепцией дизайна Ajax. Несмотря на название, XHR можно использовать с протоколами, отличными от HTTP, а данные могут быть в форме не только XML, но и JSON, HTML или простого текста. WHATWG поддерживает стандарт XHR. Текущая работа в W3C для создания стабильной спецификации основана на моментальных снимках стандарта WHATWG.

Первоначально Javascript XMLHttpRequest был объектом ActiveX, его использование ограничивалось интрасетями на базе Microsoft и не подходило для других сайтов. Команда Mozilla заинтересовалась реализацией эквивалента JScript и распространила его на все браузеры, включая те, которые работают на базе Gecko / KHTML и Opera. Даже IE7 больше не требует установки ActiveX для использования XHR.

История XMLHttpRequest

Концепция Javascript XMLHttpRequest создавалась специалистами Outlook Web Access для применения на сервере Microsoft Exchange 2000. Версии 5 и 6 не определяли идентификатор объекта XHR на своих языках сценариев, поскольку сам идентификатор Request не был стандартным на момент выпуска. Microsoft добавила идентификатор объекта на свои языки сценариев в Internet Explorer 7.0, выпущенный в октябре 2006 года. В проекте браузера был разработан и реализован интерфейс Javascript 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 года.

С появлением кросс-браузерных библиотек JavaScript, таких как jQuery, разработчики могут вызывать функциональность Javascript XMLHttpRequest без кодирования непосредственно в API. Wide Web Consortium World опубликовал проект спецификации для XMLHttpRequest 5 апреля 2006 года с целью документации минимального набора совместимых функций на основе существующих реализаций, позволяя разработчикам использовать их без кода, специфичного для платформы.

25 февраля 2008 года W3C также опубликовал еще одну спецификацию рабочего проекта - XMLHttpRequest Level 2. Уровень 2 состоит из расширенной функциональности, включая поддержку для запросов и обработку байтовых потоков.

Стандарты идентификатора объекта

Поскольку стандарт W3C для объекта XMLHttpRequest Javascript post по-прежнему является предварительным вариантом, пользовательские агенты могут не соблюдать все функции определения, а любое из последующих действий может быть изменено. Экстремальный уход следует учитывать при написании сценария с объектом XMLHttpRequest для нескольких пользовательских агентов.

В HTTP и HTTPS запросы объекта XMLHttpRequest инициализируются открытым способом. Он вызывается до фактической отправки запроса для проверки. Этот метод не гарантирует, что URL-адрес существует, а информация пользователя верна. Он может принимать до пяти параметров, но для инициализации запроса требует только два. Первым параметром является текстовая строка. Представляем методы запросов, которые должны поддерживаться соответствующим агентом пользователя, определенным проектом W3C для XMLHttpRequest Javascript. Примеры:

1. GET поддерживается Internet Explorer 7, Mozilla.
2. POST поддерживается IE7, Mozilla.
3. HEAD поддерживается IE7.

Методы запроса не ограничиваются перечисленными выше. В проекте W3C говорится, что браузер может поддерживать их по своему усмотрению.

Второй параметр - это еще одна текстовая строка, которая указывает URL-адрес HTTP-запроса.

Третий параметр - это логическое значение, указывающее, будет ли запрос асинхронным. Он не является обязательным по проекту W3C. Его значение по умолчанию должно считаться истинным с помощью соответствующего пользовательского агента W3C.

Асинхронный запрос «истина» не будет ждать ответа сервера, прежде чем продолжить выполнение текущего скрипта. Вместо этого он вызовет прослушивателя событий onreadystatechange объекта XMLHttpRequest Javascript post на разных этапах запроса.

Четвертый и пятый параметры - это имя пользователя и пароль. Эти параметры могут быть предоставлены для аутентификации и авторизации, если это требуется сервером.

Метод SetRequestHeader

После успешной инициализации можно вызвать метод Header объекта XMLHttpRequest open Javascript для отправки HTTP-заголовков с запросом. Первый параметр метода - это имя заголовка. Второй параметр - это значение текстовой строки. Этот метод должен быть использован для каждого заголовка, который отправляется с запросом.

Скрытый "камень" в XMLHttpRequest стандарте, который упрощает процесс выборки и анализа данных JSON через Ajax, это JSON & JSON-P. Обычный способ предложить серверные данные для браузеров, чтобы их можно было использовать на клиентском JavaScript, это форматирование данных, таких как JSON, и доступ к нему через собственный URL. Например: XMLHttpRequest Javascript 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 используют прерывание, чтобы отменить потенциальный дубликат или испорченные запросы.

Кросс-доменные запросы

В истории раннего развития интернета было обнаружено, что можно нарушить безопасность пользователей с помощью JavaScript для обмена информацией с одного веб-сайта на другой, менее авторитетный. Таким образом все современные браузеры реализуют одну и ту же политику происхождения, которая предотвращает многие атаки, такие как межсайтовый скриптинг.

Данные Javascript 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 Javascript 34 Javascript xml вместо GET. Если нужно получать данные POST, нужно изменить тип запроса MIME, используя заголовок Content-Type и передавая переменные в вызове отправки. Заключительная часть функции loadXMLDoc изменяется, как представлено на фото ниже.

В большинстве случаев третий параметр команды open может быть остановлен. Значение true указывает, что вызов должен быть асинхронным - сценарий продолжается, не дожидаясь ответа XML, который уже имеется по умолчанию. Передача значения false приводит к остановке скрипта до получения ответа.

Сценарий, на который ссылается URL, будет скриптом на стороне сервера (PHP, Perl или аналогичным). Он возвращает хорошо сформированный XML-документ. Чтобы избежать предупреждений о безопасности браузера, он должен быть размещен в том же домене, что и вызывающая страница, и быть доступен через HTTP или HTTPS.

Передача из JavaScript на серверный сценарий

Функция, которая обрабатывает ответ (например, processReqChange), должна иметь возможность распаковывать и обрабатывать полученный XML. На этой диаграмме показано, как данные передаются из JavaScript на серверный сценарий и обратно.

Принцип довольно прост. Возвращенный документ XML будет содержать одну или несколько команд, которые выполняются последовательно - для создания предупреждений, для изменения значений формы или для управления DOM. Все это выполняется функцией processReqChange.

Доступные команды

В общей сложности применяют семь различных команд, которые могут быть вызваны библиотекой объекта:

• alert (message) - отобразить предупреждение JavaScript.
• 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, которые не хотят слишком много знать о JavaScript, потому что после отправки первоначального запроса дальнейший 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 с использованием JavaScript

Существует несколько различных способов, как вызвать функцию loadXMLDoc. Например, берется ссылка на форму в качестве первого параметра, а затем две дополнительные переменные.

Успешный вызов loadXMLDoc возвращает значение "верно". OnSubmit обработчик будет возвращать "ложь". Отменяя действие по умолчанию, он представит событие, которое в противном случае вызвало бы форму. Дальнейшее выполнение происходит с помощью Ajax, поэтому браузеру не нужно загружать новую страницу. Неудачный вызов loadXMLDoc возвращает значение "ложь". OnSubmit обработчик будет возвращать "верно", в результате чего форма будет представлена в обычном режиме. Дальнейшее выполнение проходит с помощью nonAjaxTarget.html.

Выполняется функция предотвращения кэширования значений ответа Javascript xmlhttprequest cookie. Некоторые браузеры будут кэшировать GET-запросы, выполненные с использованием XHR, чтобы после первого вызова последующие из одного и того же сценария просто перезагружали первый ответ. Чтобы обойти это, нужно добавить случайную строку или временную метку к запросу, как показано на фото ниже:

Если сценарий всегда возвращает один и тот же ответ для заданных параметров, то не нужно беспокоиться об этом, так как используется кеширование для ускорения приложения.

Подводя итог тому, насколько просто работать с Ajax с использованием этой структуры, нужно только выполнить следующие действия:

• Настроить сценарий на стороне сервера, чтобы принять параметры GET или POST или COOKIE и вернуть действительный XML-файл.
• Указать файл xmlhttp.js JS на странице.
• Использовать JavaScript для вызова.

Обратные вызовы Ajax могут быть выполнены путем создания экземпляра объекта XHR в клиентском JScript. Javascript XMLHttpRequest get может использоваться для прямого вызова серверных объектов, таких как страницы и веб-службы. Они будут сохранять или возвращать данные.

Ajax первоначально был аббревиатурой для асинхронного JS и XML. «Асинхронный» означает, что несколько событий происходят совершенно независимо друг от друга. Как только клиент инициализирует обратный вызов Ajax для сервера, ему не нужно ждать ответа, так как он может продолжать использовать веб-приложение во время обработки запроса. После этого сервер отправит ответ клиенту, а тот обработает его по мере необходимости.