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

Опубликованно 14.03.2019 00:04

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

Он был смоделирован таким образом, чтобы максимально быть похожим на интерфейс Microsoft Request. Mozilla создала оболочку для использования этого интерфейса, через объект JS, который был назван XMLHttpRequest. Объект уже сделано доступным Gecko версии 0.6, опубликованном 6 декабря 2000 года, но он еще не был полностью функциональным до 5 июня 2002 года, и это не версия 1.0 Gecko, после чего id объекта стал стандартом де-факто в других крупных веб-систем: Safari 1.2, опубликованный в феврале 2004 года. Opera 8.0, выпущенный в апреле 2005 года. iCab 3.0b352, опубликованный в сентябре 2005 года.

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

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

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

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

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

Второй параметр-это строка символов, которая задает URL-адрес, HTTP-запроса.

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

Асинхронный запрос «правда» не будет ждать ответа от сервера, прежде чем продолжить выполнение скрипта. Вместо этого, он называется прослушиватель событий onreadystatechange объекта Javascript XMLHttpRequest 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 = кодировка », где кодировка кодировка документа. Если агент пользователя настроена на использование прокси-сервера, объект XMLHttpRequest изменяет запрос, чтобы передать Авторизации Прокси-сервера, настроенные заголовки. Изменения состояния 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, чтобы обмениваться информацией с веб-сайта на другой, менее авторитетный. Таким образом, все современные браузеры реализуют ту же политику происхождения, которая предотвращает различные атаки, такие как cross-site scripting.

Данных Javascript XMLHttpRequest onload подвержены этой политики безопасности, но иногда веб-разработчики хотят намеренно обойти ограничения. Это связано с законного использования поддоменов, с XHR-страницы, созданной foo.example.com для получения дополнительной информации bar.example.com как правило, не удается.

Существуют различные варианты, позволяющие обойти эту функцию безопасности, в том числе применение JSONP, совместного использования ресурсов (CORS) или альтернативы с плагинами как Flash или Silverlight. Программа в браузерах

Инициализация объекта XHR-это на самом деле довольно проста, в большинстве браузеров, но для поддержки microsoft internet explorer 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. Передача данных в скрипт на стороне сервера

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

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

В целом, применяются семь различных команд, которые могут быть вызваны библиотеки объекта: alert (сообщение) - просмотр предупреждение JavaScript. setvalue (target value) - установить значение поля формы с идентификатором цели. setdefault (target) - сброс значений полей формы. фокус (target) – установить фокус в поле формы. setcontent (target, content) - установить HTML-код HTML-элемента. setstyle (target, свойство, значение) - задать стиль элемента HTML. setproperty (target, свойство, значение) - установить свойство элемента 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 обработчик возвращает значение "false". Удалив действие по умолчанию, она будет представлять события, которые в противном случае спровоцировали бы форме. Дальнейшее выполнение происходит с помощью 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 может быть использован для прямого вызова серверных объектов, таких как веб-страницы и услуг. Они собираются сохранить или восстановить данные.

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

Категория: обо всём