Xmlhttprequest: XMLHttpRequest — Интерфейсы веб API

Аннотация

Спецификация XMLHttpRequest определяет API, который предоставляет функциональные возможности клиента со сценариями для передачи данных между клиентом и сервером.

Статус этого документа

В этом разделе описывается статус этого документа на момент его публикации. Другие документы могут заменять этот документ. Список текущих публикаций W3C и последнюю версию этого технического отчета можно найти в указателе технических отчетов W3C по адресу https://www.w3.org/TR/.

Работа над этим документом была прекращена, и на него нельзя ссылаться или использовать его в качестве основы для реализации. Пожалуйста, обратитесь к спецификации XMLHttpRequest Living для получения последней доступной спецификации этого API.

Этот документ был опубликован рабочей группой веб-платформы в качестве примечания рабочей группы. Если вы хотите оставить комментарии к этому документу, отправьте их по адресу [email protected] (подписаться, архивы). Все комментарии приветствуются.

Публикация в качестве примечания рабочей группы не означает одобрения членством в W3C .Это черновик документа, который может быть обновлен, заменен или исключен другими документами в любое время. Неуместно ссылаться на этот документ как на незавершенную работу.

Этот документ был подготовлен группой, работающей под 5 февраля 2004 г., патент W3C Политика. W3C ведет публичный список любых патентов раскрытие информации в связи с результатами деятельности группы; эта страница также включает инструкции по раскрытию патента.Лицо, которое действительно знает о патенте, который, по его мнению, содержит Существенный Претензии должны раскрывать информацию в соответствии с раздел 6 Патентной политики W3C .

Данный документ регулируется технологическим документом W3C от 1 сентября 2015 года.

Интерфейсы и приложения Веб в соответствии со стандартами

Учебники и демонстрации для построения современных веб-приложений, основанных на стандартах.Ajax, JavaScript, DOM и CSS - это стандарты Web для построения сайтов и приложений с использованием графического языка интерфейса HTML 5.

[Английская версия сайта]

• HTML 5, обучение по приложениям
  Plateforme universelle для приложений бюро, для мобильных устройств и планшетов.
• ДОМ
  Добавляйте элементы веб-страниц и XML или создавайте программы.

• Обучение RSS
  Комментарий создан из потока RSS для публикации нового сайта в формате RSS 2.0.
• SVG, интерактивная графика на веб-страницах
  Описание и слова XML для векторной графики на страницах Web.
• Le формат XML
  Стандарты и инструменты для создания и использования документов.
• RDF
  Введение в семантический формат.
• Учебник RSS 1.0
  Le формат RSS RDF.
• Учебник XUL
  Реализованный интерфейс с использованием языков и языков Mozilla (требуется XulRunner).
• DocBook
  Неужели вы предпочитаете методы DocBook, PDF или XPS для документов?

Карта преобразователя в объекте и перевернутом виде
Ces преобразований постоянное уведомление о хранении содержимого карты в единственном экземпляре, mais les Map imbriquées Complquent la tâche.

Преобразование обратного вызова в обещание
Et utiliser une fonction asynchrone de façon synchrone.

JavaScript без обратного вызова
Mis à jour avec async / await.

La méthode bind
Ответьте на вопросы это .

Прокси: примеры simples
Прокси-сервер позволяет использовать приложение-аксессуар для кода очистителя.

Таблица и запрос JSON
Имеется таблица в JSON и ее содержимое с учетом требований стиля SQL.

Рельефный HTML-код
Ces balises sémantiques servent à préciser le rôle ou l'importance d'une фраза в тексте.

Promise.all против promise.race
Allez plus loin avec l'objet Promise, et gérez plusieurs traitements совпадают.

Панно на крышке для приложения HTML
Этот пример содержит изображение SVG, исходный код исходного кода, много изображений.

Архив

© 2006-2021 Xul.fr

JavaScript: Полное руководство, 6-е издание [Книга]

Имя

XMLHttpRequest - HTTP-запрос и ответ

Наследуется от

EventTarget

Краткое описание

Объект XMLHttpRequest позволяет клиентскому JavaScript отправлять HTTP-запросы и получать ответы (которые не обязательно должны быть XML) с веб-серверов.XMLHttpRequest является предметом главы 18, и эта глава содержит множество примеров его использовать.

Создайте объект XMLHttpRequest с помощью конструктора XMLHttpRequest () (см. боковая панель в Использование XMLHttpRequest для получения информации о том, как создать объект XMLHttpRequest в IE6), а затем используйте его следующим образом:

1. Вызовите open () , чтобы указать URL и метод (обычно «GET» или «POST») для запрос.

2. Установите для свойства onreadystatechange значение функция, которая будет уведомлена о прогрессе запрос.

3. При необходимости вызовите setRequestHeader () , чтобы указать дополнительные параметры запроса.

4. Позвоните по номеру send () , чтобы отправить запрос к веб-серверу. Если это запрос POST, вы также можете передать тело запроса этому методу.Ваш обработчик событий onreadystatechange функция будет вызываться по мере обработки запроса. Когда readyState равен 4, ответ полный.

5. Когда состояние готовности равно 4, проверьте код состояния , чтобы убедиться, что запрос Был успешен. Если это так, используйте getResponseHeader () или getResponseHeaders () для получения значения из заголовка ответа и используйте свойства responseText или responseXML для получения тело ответа.

XMLHttpRequest определяет относительно высокоуровневый интерфейс для протокола HTTP. Он заботится о таких деталях, как обработка перенаправлений, управление файлами cookie и согласование соединений между источниками ...

Изучение XMLHttpRequest - JavaScript: жесткие части

Транскрипт из урока "XMLHttpRequest"

[00:00:00]
>> Will Sentance: Мы рассмотрим это строка за строкой и посмотрим, как это будет действовать. Это наша последняя функция для асинхронного JavaScript.Линия первая, Искусство, что мы создаем?
>> Art: Объявляем функцию отображения?
>> Will Sentance: Точно, мы объявляем, мы определяем функцию отображения. Вот она, хорошо, вторая строка.

[00:00:26] Итак, эта строка здесь использует библиотеку jQuery, но мы действительно находимся внутри этой функции, мы собираемся сделать что-нибудь еще. Эта функция действительно создает контекст выполнения в общепринятом смысле этого слова. В отличие от set, который встроен в JavaScript, $ .get не встроен в JavaScript.Но в нем есть некоторые встроенные функции.

[00:00:51] Итак, мы не собираемся изучать, как работает $ .get, это просто функция jQuery, но то, что он делает внутри нее, что мы можем сделать вручную в JavaScript, - это вращение вверх и поговорите с функцией веб-браузера. API, функция веб-браузера, тот, который выполняет веб-запросы, запросы даты.

[00:01:12] Вот что происходит внутри этого $ .get. Так что мы будем относиться к нему как к встроенной функции. Таким образом, мы не собираемся создавать контекст выполнения, как в обычном смысле этого слова.Это потому, что это не встроенная функция, она использует встроенную функцию внутри себя.

[00:01:28] Но в отличие от установленного тайм-аута, который представляет собой очень простую одну строку, настройка встроенной функции, которая делает веб-запрос, составляет четыре или пять строк. Итак, мы заключили его в этот $ .get. Подумайте об этом так же, как я установил тайм-аут, он не сделает ничего интересного в мире JavaScript, он будет говорить со страной функций веб-браузера.

[00:01:50] Так же, как setimeout. На самом деле он делает несколько вещей, но они не важны.Все, что он делает, это запускает что-то в области функций веб-браузера, а не в области JavaScript. Итак, давайте посмотрим, что произойдет. $ .get точно так же, как установлен тайм-аут, мы его вызовем. Мы собираемся передать ему эту строку, которая является URL-адресом, куда-нибудь в Интернете, является фиктивным адресом API.

[00:02:21] Где-то в Интернете, где мы предположительно имеем один твит, к которому мы можем получить доступ через наш API. Насколько удивительно удобно, а это маловероятно? И мы передадим ему все определение функции, не вызывая эту функцию, просто это определение, хорошо? Как мне узнать, как это будет выглядеть?

[00:02:49] Ну, я иду и смотрю документацию по JavaScript или, в данном случае, jQuery, и смотрю и вижу, что я ожидаю передать этой функции? Он говорит, что передайте URL, адрес API, с которого я могу пойти и получить данные.И функция, которая будет запущена, когда этот запрос API, эти запрошенные данные будут завершены.

[00:03:10] Таким образом, даже если это действительно создает контекст выполнения, потому что внутри $ .get не является встроенной функцией для сценария Java, внутри он использует встроенные функции, которые обращаются к API. Поэтому мы будем относиться к нему так же, и вместо того, чтобы говорить, что он создает контекст выполнения, мы скажем, что он обращается к веб-браузеру, функции, с какой функцией?

[00:03:33] Он говорит с другим.Мы можем продолжить и увидеть список всех этих функций на MDN. Мы видели таймер, он называется xhrHttpRequest.
>> Будет Sentance: А что там принимать? Ну, и помните, что это не функция JavaScript в обычном понимании, это функция браузера, API браузера.

[00:03:57] Звучит немного запутанно, потому что он сам будет делать запрос к API, но это функция браузера. И он берет ссылку на нашу функциональность и наш URL-адрес, по которому мы будем говорить. И вот здесь, на земле API веб-браузера, мы да, создаем, посмотрите на это.

[00:04:24]
>> Будет отправлено: XhrHttpRequest, прежде чем мы создадим таймер. Теперь мы собираемся создать xhrHttpRequest. И с этим связана наша функциональность, которую мы называем отображением. И мы уже прояснили, его не волнует, что это называется отображением, это все в JavaScript, это просто здесь. А он полный? Раньше наш таймер срабатывал мгновенно.

[00:04:52] Этот не будет завершен мгновенно, он пойдет поработать.Итак, во-первых, нужно выяснить, что он будет отправлять, куда он вообще идет? Куда он вообще отправляет информацию? Ну, это рассылается на twitter.com. И мы не собираемся подробно разбираться в том, как работает этот запрос API, но сейчас, когда это функция JavaScript, а не JavaScript, извините, функция браузера Chrome или Firefox, что угодно.

[00:05:17] Это функция браузера, которая позволяет нашему веб-браузеру общаться с Интернетом и, следовательно, с сервером Twitter, где эти данные будут найдены.Таким образом, он собирает сообщение для отправки, известное как HttpRequest, для получения этих данных. У него есть URL-адрес, у него есть метод, метод, который заключается в том, что я получаю данные, сервер ожидает, что я захочу получить некоторые данные.

[00:05:47] Мы знаем, что, поскольку мы использовали этот метод get, он также попадает в xhrHttpRequest. И мы хотим точно знать, какие данные нам нужны, пока идет косая черта, мы отправим / tweet / 1, вот и все. Таковы вещи, и это становится большим старым сообщением, которое отправляется на Twitters,

[00:06:19]
>> Will Sentance: Tweeter LLC, так сказать, на серверы.На этом $ .get сделал свою работу. Это сделало свое дело, и теперь мы вернулись. Готово, это работа в веб-браузере, работа по настройке этой функции веб-браузера. Функции API веб-браузера в фоновом режиме.

[00:06:44] И это сделано, это работа, и он вернется в глобальный контекст выполнения, где с чем мы столкнемся? Мохаммад, какая следующая строка в нашем глобальном контексте исполнения?
>> Мохаммад: Сначала зарегистрируйте меня.
>> Уилл Сентанс: Хорошо, для человека, глаза которого медленно закрывались, это было действительно потрясающе, подняться туда, молодец.

[00:07:02] Я первый, вот оно. Итак, я впервые случаю, может быть, за одну миллисекунду, идеально. За одну миллисекунду это происходит здесь. Теперь, что находится в нашем стеке вызовов на данный момент? Что ж, мы находимся в глобальном масштабе, мы всегда в глобальном масштабе. Сначала мы выполнили логин меня в консоли, сначала я, мы сначала выполнили логин меня в консоль.

[00:07:35] Вот оно. Сначала я, но в фоновом режиме наш xhrHttpRequest завершен? Артуа, он еще готов?
>> Артуа: Так и должно быть.
>> Будет ли отправлено: будет ли оно завершено немедленно?
>> Артуа: Нет.
>> Will Sentance: Да, сколько времени это обычно занимает? Может быть, 100 миллисекунд, 200 миллисекунд, чтобы получить наши данные с сервера Twitter и вернуть их.

[00:07:56] Итак, скажем, через 200 миллисекунд мы получаем наши данные обратно с серверов Twitter. И он возвращается, и он передается в форме объекта с, это немного приблизительно, но объект с сообщением свойства, которое говорит привет. Отлично, мы получили наши данные примерно за 200 миллисекунд.

[00:08:26] Теперь, Кэти, что, по-твоему, должно произойти? Теперь, когда мы закончили, мы завершили
>> Will Sentance: Этот фоновый запрос API. Завершен ли фоновый запрос xhrHttpRequest, мы вернулись к нашим данным, мы сказали, идите в Twitter, попробуйте получить эти данные, этот твит, мы сделали, вернувшись сюда, в данные, что мы думаем, что сейчас произойдет, Кэти, в эта точка?

[00:08:52]
>> Кэти: Вставьте его в стек вызовов.
>> Будет Sentance: Толкни, существо?
>> Кэти: The-
>> Will Sentance: Какую функцию теперь мы передаем?
>> Кэти: Дисплей.
>> Will Sentance: Отображение функции, в точности, для вызова. И есть ли у нас что-нибудь, чтобы работать в глобальном масштабе? Нет, нет, нет проблем. Точно, прямо на вершине, Шелби. Я уже сказал, что ты мой любимый человек в классе, Шелби.

[00:09:09] Справа вверху мы вызываем нашу функцию отображения. Мы вызываем нашу функцию отображения. Теперь мы ждали запуска отображения. Мы хотели отложить. Почему мы вообще хотели отложить показ?
>> Спикер 6: Мы ждали-
>> Спикер 7: Подождите.
>> Будет отправлено: для возврата данных.

[00:09:24] Да, так, да, Шелби.
>> Спикер 8: [СМЕЕТ]
>> Уилл Сентанс: Итак, именно так, как вы говорите. Мы ждали отображения, мы ждали, когда вернутся данные. Таким образом, эта функция отображения, способ работы этой функции xhrHttpRequest в JavaScript заключается в том, что эта функция отображения, когда возвращается дата, она будет связывать себя с этой функцией отображения.

[00:09:59] Итак, когда мы переместили отображение в основную статистику, его первый параметр будет заполнен, что вы, Кэти?
>> Кэти: Данные.
>> Будет отправлено: данные точно.
>> Кэти: Итак, напишите.
>> Will Sentance: Этот объект здесь будет заполнен. Я собираюсь вызвать дисплей, сейчас это просто определение, я назову его, у этого определения есть, теперь функция работает не совсем так, но имеет первый аргумент, называемый данными, что-то в этом роде.

[00:10:31] Эти данные будут заполнены данными, которые вернулись сейчас. Как мы узнаем, что это первый аргумент, второй аргумент, первый аргумент на самом деле является аргументом ошибки, как мы вообще узнаем? Документация, документация xhrHttpRequest или документация.$ .get скажет. Первый аргумент функции обратного вызова, которая выполняется при возврате данных, будет заполнен при выполнении данными с сервера Twitter.

[00:10:58] Или он скажет, что первый аргумент на самом деле является параметром ошибки, который будет заполнен любой ошибкой. Если ошибка вернется. Когда функция отображения завершается выполнением, первый аргумент будет заполнен ошибкой, вторым аргументом будут наши данные из API.

[00:11:16] Разные функции, разные функции будут работать по-разному. И это не волшебство, просто оно уже готово, чтобы мы его нашли, мы должны пойти и посмотреть документацию. Итак, Барб, на этом этапе Барб, мы завершили работу над функцией API веб-браузера. XhrHttpRequest завершен, мы получили наши данные с сервера Twitter, поэтому теперь мы собираемся приостановить наш вызов для отображения в нашем стеке вызовов.

[00:11:45] Когда мы начинаем выполнять функцию Barb, выполняя функцию, мы переходим к совершенно новому Barb?
>> Барб: Контекст казни.
>> Will Sentance: Отличный Барб, правильно.И для чего нужен этот контекст выполнения, кроме вызова display. Вот оно, и что передается, что именно передается, Кэти, чтобы показать?

[00:12:02]
>> Кэти: Объект.
>> Will Sentance: Точно, вот оно с постом высоко. И мы создаем новый контекст выполнения с функцией отображения. Обратите внимание, где мы называем отображение? Мы вызываем это внутри $ .get? Нет, точно нет. Легко запутаться, если подумать, что внутри каким-то образом запускается дисплей.

[00:12:24] Нет, мы сделали $ .get, мы переместились, как я уже сказал, тайм-аут, мы двинулись прямо. Все, что сделал $ .get, - это развернуло xhrHttpRequest и передало ссылку на функцию, которую мы передали в $ .get. Опять же, $ .get на самом деле является функцией JavaScript, но внутри она ведет себя так же, как и установленный тайм-аут, в том смысле, что его единственная задача - развернуть ссылку для создания с помощью функции веб-браузера XhrHttpRequest, запрос к Twitter API.

[00:12:56] И все это здесь происходит отдельно.И в мире JavaScript мы сразу двинулись дальше, не дожидаясь возврата этих данных. Когда мы запускаем console.log, мы находимся примерно на одной миллисекунде. Мы не на 200 миллисекунд позже. Но теперь наши данные вернулись, мы находимся примерно на 201 миллисекунде, когда мы начинаем вызывать дисплей, у нас примерно 201 миллисекунда, когда мы начинаем вызывать функцию дисплея.

[00:13:23] И мы его выполняем. Итак, Гриффин, что первое, что находится в нашей локальной памяти нашей функции отображения, Гриффин?
>> Гриффин: Это будут данные.
>> Будет отправлено: это будет параметр данных. Что теперь связано с какой ценностью?
>> Гриффин: Это был бы пост и высокий.
>> Will Sentance: Значит, весь объект, верно?

[00:13:42] Ага, с постом высокий. Итак, когда я нажимаю на строку console.log (data.post), я ищу в консоли данные, отправляю сообщения, что мне делать console.log?
>> Griffin: I.
>> Will Sentance: I, это примерно 201 миллисекунда. Сначала я сделал примерно за одну миллисекунду.Итак, снова мы использовали другой API фонового браузера.

[00:14:11] Я не собираюсь отдавать вам их все. Ваша задача - пойти и выяснить, все они перечислены в MDN, но все они работают одинаково. Как и при использовании встроенной функции, $ .get внутри нее использует встроенную функцию, которая создает ее, создает ссылку или запускает фоновую функцию веб-браузера.

[00:14:34] В данном случае это функция запроса данных, функция httpRequest. Это может быть таймер.Это могло быть с целой группой из них, узел - это также целая группа из них. Все они говорят с землей без JavaScript, это не JavaScript, это не JavaScript.

[00:14:52] Давайте добавим еще две части этой головоломки. На самом деле, что происходит между нашим завершением и возвращением в стек вызовов, ну, это функциональность отображения, которая ставится в очередь отображения, ставится в очередь со связанными с ней данными, которые вернулись. Есть наши связанные данные.
>> Will Sentance: Ну, это связанные данные, а затем мы проверили, очищен ли стек вызовов?

[00:15:34] Давай вернемся на секунду назад.Мы проверили, очищен ли стек вызовов. Мы сказали, подождите, есть ли что-то в очереди на обратный звонок? Стек вызовов чист? Это известно как цикл событий, это не буквально, я пытаюсь отчаянно вызывать цикл событий, потому что он буквально зацикливается и проверяет, но мы можем думать об этом в глубине души, капот не зацикливается, но в основном проверяет, это вызов стек очищен?

[00:15:58] Понятно? Каждую миллисекунду проверяет? Так понятно? Так понятно? Так понятно? Это понятно. Ну, конечно, ясно, потому что прошло 200 миллисекунд, а в нашем коде больше ничего нет. Журнал консоли завершен за одну миллисекунду. Итак, мы закончили. Так что это определенно ясно, и мы можем сразу же вывести его из очереди, отобразить и отправить в стек вызовов.

[00:16:19] Здесь происходит отправка дисплея в стек вызовов примерно через 201 миллисекунду, 201 миллисекунду с нашими данными, которые вернулись из API. Это все наши части, и посмотрите, мы взяли эту функциональность отображения, проанализировали ее в очереди обратного вызова, а затем, как только цикл событий завершился успешно, все готово.

[00:16:55] Удалено из очереди, отображено и добавлено, помещено в стек вызовов. Где это потом было выполнено так, как мы думали. Вы можете увидеть, как в этих простых примерах эта часть здесь не имеет никакого значения. Но для более сложных примеров, когда что-то блокируется в основном потоке или когда у нас есть несколько запросов, это становится очень актуальным, и по мере завершения каждого запроса он будет ставить в очередь соответствующую функцию обратного вызова.

[00:17:24] Это связано с конкретным API веб-браузера.Таким образом, мы можем развернуть столько запросов, сколько захотим, у нас может быть 30 запросов xhrHttpRequests, которые будут выполняться здесь по мере завершения каждого из них, они будут работать в порядке их завершения, они будут переданы в очередь обратных вызовов, поставлены в очередь.

[00:17:39] Не в порядке поступления этих запросов, а в порядке их выполнения.

Как делать HTTP-запросы с помощью XMLHttpRequest (XHR)

XMLHttpRequest (XHR) был изобретен Microsoft в начале 90-х и стал популярной технологией для асинхронного взаимодействия с серверами в середине первого десятилетия 21 века.

Благодаря XHR впервые стало возможным обновлять части веб-страницы без перезагрузки всей страницы.

XMLHttpRequest - это встроенный объект браузера во всех современных браузерах, который можно использовать для выполнения HTTP-запросов в JavaScript для обмена данными между веб-браузером и сервером.

Несмотря на слово «XML» в названии, XMLHttpRequest может использоваться для получения любых данных, а не только XML. Мы можем использовать его для загрузки / скачивания файлов, отправки данных формы, отслеживания прогресса и многого другого.

Базовый запрос XHR

Чтобы отправить HTTP-запрос с помощью XHR, создайте объект XMLHttpRequest , откройте соединение с URL-адресом и отправьте запрос. После завершения запроса объект будет содержать полезную информацию, такую ​​как тело ответа и код состояния HTTP.

Давайте используем тестовый REST API JSONPlaceholder для отправки запроса GET с использованием XHR:

 
const xhr = новый XMLHttpRequest ();


xhr.onload = () => {
    
    if (xhr.status == 200) {
        
        приставка.журнал (JSON.parse (xhr.response));
    } еще {
        console.error ('Ошибка!');
    }
};


xhr.open ('ПОЛУЧИТЬ', 'https://jsonplaceholder.typicode.com/users');


xhr.send ();
  

Событие xhr.onload работает только в современных браузерах (IE10 +, Firefox, Chrome, Safari). Если вы хотите поддерживать старые браузеры, используйте вместо этого событие xhr.onreadystatechange .

В приведенном выше примере мы передали метод HTTP и URL-адрес запроса методу open () .Этот метод обычно вызывается сразу после new XMLHttpRequest () . Мы можем использовать этот метод для указания основных параметров запроса:

Вот синтаксис этого метода:

  xhr.open (метод, URL, [асинхронный, пользователь, пароль])
  

• method - Метод HTTP-запроса. Это может быть GET , POST , DELETE , PUT и т. Д.
• URL-адрес - URL-адрес для запроса, строка или объект URL-адреса
• asnyc - Укажите, должен ли запрос выполняться асинхронно или нет.Значение по умолчанию: true
• имя пользователя и пароль - Учетные данные для базовой HTTP-аутентификации

Метод open () не открывает соединение с URL-адресом. Он только настраивает HTTP-запрос.

  xhr.send ([тело])
  

Метод send () открывает сетевое соединение и отправляет запрос на сервер. Требуется необязательный параметр body , который содержит тело запроса.Для таких методов запроса, как GET , вам не нужно передавать параметр body.

События XHR

Три наиболее широко используемых события XHR следующие:

• load - Это событие вызывается, когда готов результат. Это эквивалентно событию xhr.onreadystatechange с xhr.readyState == 4 .
• Ошибка - это событие возникает, когда запрос не выполняется из-за отсутствия сети или недействительного URL-адреса.
• progress - это событие периодически запускается во время загрузки ответа.Его можно использовать для отчета о выполнении больших сетевых запросов.

 
xhr.onload = () => {
    console.log (`Данные загружены: $ {xhr.status} $ {xhr.response}`);
};


xhr.onerror = () => {
    console.error ('Ошибка запроса.');
}


xhr.onprogress = (событие) => {
    
    
    
    console.log (`Загружено $ {event.loaded} из $ {event.total}`);
}
  

Тайм-аут запроса

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

 
xhr.таймаут = 5000;


xhr.ontimeout = () => console.log ('Тайм-аут запроса.', xhr.responseURL);
  

Свойство xhr.responseURL возвращает конечный URL-адрес экземпляра XMLHttpRequest после выполнения всех перенаправлений. Это единственный способ получить заголовок Location .

Тип ответа

Мы можем использовать свойство xhr.responseType , чтобы установить ожидаемый формат ответа:

• Пусто (по умолчанию) или текст - простой текст
• json - проанализированный JSON
• blob - двоичный объект данных
• документ - XML-документ
• arraybuffer - ArrayBuffer для двоичных данных

Давайте вызовем RESTful API, чтобы получить ответ в виде JSON:

  const xhr = новый XMLHttpRequest ();

xhr.open ('GET', 'https://api.jsonbin.io/b/5d5076e01ec3937ed4d05eab/1');


xhr.responseType = 'json';

xhr.send ();

xhr.onload = () => {
    
    const user = xhr.response;

    
    console.log (имя пользователя);
    console.log (user.email);
    console.log (user.website);
}
  

Состояние запроса (

Объект XMLHttpRequest изменяет состояние по мере выполнения запроса. Мы можем получить доступ к текущему состоянию, используя свойство xhr.readyState .

Государства:

• UNSENT (0) - Начальное состояние
• ОТКРЫТО (1) - Запрос начинается
• HEADERS_RECEIVED (2) - Заголовки HTTP получены
• ЗАГРУЗКА (3) - Ответ загружается
• ВЫПОЛНЕНО (4) - Запрос выполнен

Мы можем отслеживать состояние запроса, используя onreadystatechange event:

  xhr.onreadystatechange = function () {
    если (xhr.readyState == 1) {
        console.log ('Запрос запущен.');
    }
    
    if (xhr.readyState == 2) {
        console.log ('Заголовки получены.');
    }
    
    if (xhr.readyState == 3) {
        console.log ('Загрузка данных ..!');
    }
    if (xhr.readyState == 4) {
        console.log ('Запрос завершен.');
    }
};
  

Запрос отмены

Мы можем легко прервать запрос XHR в любое время, вызвав метод abort () для объекта xhr :

  ч.abort ();
  

Синхронные запросы

По умолчанию XHR выполняет асинхронный запрос, что хорошо для производительности. Но если вы хотите сделать явный синхронный запрос, просто передайте false в качестве третьего аргумента метода open () . Он приостановит выполнение JavaScript на send () и возобновит, когда появится ответ:

  xhr.open ('GET', 'https://api.jsonbin.io/b/5d5076e01ec3937ed4d05eab/1', ложь);
  

Осторожно! Chrome отображает следующее предупреждение для синхронного запроса XHR: [Deprecation] Синхронный XMLHttpRequest в основном потоке не рекомендуется из-за его отрицательного воздействия на работу конечного пользователя.

XMLHttpRequest позволяет нам устанавливать заголовки запросов, а также читать заголовки ответов. Мы можем установить запрос Content-Type и Accept headers, вызвав метод setRequestHeader () для объекта xhr :

 
xhr.setRequestHeader ('Content-Type', 'application / json');
xhr.setRequestHeader ('Принять', '* / *');
  

Аналогичным образом, если вы хотите прочитать заголовки ответа (кроме Set-Cookie ), вызовите getResponseHeader () для объекта xhr :

 
xhr.getResponseHeader ('Content-Type');
xhr.getResponseHeader ('Cache-Control');
  

Хотите сразу получать заголовки ответов? Используйте вместо getAllResponseHeaders () :

  xhr.getAllResponseHeaders ();
  

Запрос POST XHR

Запрос POST XMLHttpRequest для отправки данных формы может быть отправлен двумя способами:

1. Использование только Ajax
2. Использование FormData API

Первый подход достаточно хорош, если вы не хотите загрузить файл и не нуждаетесь в кодировке multipart / form-data .Вот как мы можем сделать запрос POST с данными формы в кодировке URL:

  const xhr = новый XMLHttpRequest ();


xhr.open ('POST', '/ логин');


let params = 'username = attacomsian & password = 123456';


xhr.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded');


xhr.send (параметры);


xhr.onload = () => {
   console.log (xhr.responseText);
}
  

Хотите сделать запрос JSON POST? Убедитесь, что вы преобразовали данные JSON в строку с помощью JSON.stringify () и установите для заголовка Content-Type значение application / json :

  const xhr = новый XMLHttpRequest ();


xhr.open ('POST', '/ логин');


const params = {
    имя пользователя: 'attacomsian',
    пароль: '123456'
};


xhr.setRequestHeader ('Content-Type', 'application / json');


xhr.send (JSON.stringify (параметры));


xhr.onload = () => {
   console.log (xhr.responseText);
}
  

Запросы и файлы cookie перекрестного происхождения

XMLHttpRequest может отправлять запросы из разных источников, но при этом применяются особые меры безопасности.Чтобы запросить ресурс с другого сервера, сервер должен явно поддерживать это с помощью CORS (Cross-Origin Resource Sharing).

Как и Fetch API, XHR не отправляет куки и HTTP-авторизацию другому источнику. Для отправки файлов cookie вы можете использовать свойство withCredentials объекта xhr :

  xhr.withCredentials = true;
  

XHR против jQuery

методы оболочки jQuery, такие как $ .ajax () используют XHR под капотом и обеспечивают более высокий уровень абстракции, чтобы облегчить жизнь разработчикам.Используя jQuery, мы можем перевести приведенный выше код всего в несколько строк:

  $ .ajax ('https://jsonplaceholder.typicode.com/users')
    .done (data => {
        console.log (данные);
    }). fail (err => {
        console.error ('Ошибка:', ошибка);
    });
  

XHR против Fetch API

Fetch API - это современная альтернатива XHR, основанная на обещаниях. Он чистый, простой для понимания и широко используется в PWA Service Workers.

Приведенный выше пример XHR можно преобразовать в гораздо более простой код на основе fetch () , который даже автоматически анализирует возвращенный JSON:

  fetch ('https: // jsonplaceholder.typicode.com/users ')
    .then (res => res.json ())
    .then (json => console.log (json))
    .catch (err => console.error ('Ошибка:', err));
  

Хотите узнать больше? Ознакомьтесь с руководством по JavaScript Fetch API, чтобы понять, как можно использовать Fetch API для запроса сетевых ресурсов с помощью всего нескольких строк кода.

✌️ Понравилась статья? Следуй за мной на Твиттер и LinkedIn. Вы также можете подписаться на Новостная лента.

Поймать XMLHttpRequest на простом JavaScript

При кодировании расширений Chrome мне иногда нужно поймать событие, когда приложение JavaScript запускает XMLHttpRequest (XHR) и завершает свою работу.Поскольку внедренный сценарий в контекст веб-страницы не изменяет исходное приложение, это сложно сделать, поскольку чистый XHR не вызывает глобальных событий.

Некоторые библиотеки, например jQuery, действительно запускают глобальные события ajaxStart и ajaxStop и даже предлагают глобальное событие ajax API. К сожалению, эти события запускаются только при использовании библиотечных методов для вызовов AJAX. И по причине инкапсуляции приложение может подавить эти события, установив для параметра global значение false :

  $.ajax ({
   url: "test.html",
   global: false
 });  

Расследование

JavaScript предлагает модификацию прототипа любого объекта , включая такие хост-объекты, как XMLHttpRequest. Это именно то, что нам нужно для вставки настраиваемого поведения. open () и send () будут перезаписаны новыми методами, содержащими настраиваемую логику, а затем вызывающими исходные.

Давайте убедимся, что XMLHttpRequest.prototype.open и XMLHttpRequest.prototype.send доступны для записи:

  var openDescriptor = Object.getOwnPropertyDescriptor (XMLHttpRequest.prototype, 'open'),
  sendDescriptor = Object.getOwnPropertyDescriptor (XMLHttpRequest.prototype, 'отправить');

openDescriptor
sendDescriptor  

Метод Object.getOwnPropertyDescriptor () используется для определения настроек (дескриптора) свойства объекта. Чтобы переопределить эти методы, нам нужно, чтобы для записи было true : это означает, что мы можем изменить свойство.

Поймать запрос

Используйте следующий фрагмент кода, чтобы определить, когда XMLHttpRequest начинается и заканчивается:

  var open = window.XMLHttpRequest.prototype.open,
 send = window.XMLHttpRequest.prototype.send;  function openReplacement (метод, url, async, user, password) {
 this._url = url;
 return open.apply (это, аргументы);
}  function sendReplacement (data) {
 if (this.onreadystatechange) {
 this._onreadystatechange = this.onreadystatechange;
 } 
 это.onreadystatechange = onReadyStateChangeReplacement;
 return send.apply (это, аргументы);
}  function onReadyStateChangeReplacement () { 
 if (this.
No related posts.