Файл xhr что это
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Использовать его очень просто.
Пример использования
Для начала посмотрим на пример использования, который загружает файл phones.json из текущей директории и выдаёт его содержимое:
Настроить: open
Задаёт основные параметры запроса:
При этом есть ограничения безопасности, называемые «Same Origin Policy»: запрос со страницы можно отправлять только на тот же протокол://домен:порт , с которого она пришла. В следующих главах мы рассмотрим, как их можно обойти.
async – если установлено в false , то запрос производится синхронно, если true – асинхронно.
«Синхронный запрос» означает, что после вызова xhr.send() и до ответа сервера главный поток будет «заморожен»: посетитель не сможет взаимодействовать со страницей – прокручивать, нажимать на кнопки и т.п. После получения ответа выполнение продолжится со следующей строки.
«Асинхронный запрос» означает, что браузер отправит запрос, а далее результат нужно будет получить через обработчики событий, которые мы рассмотрим далее.
Заметим, что вызов open , в противоположность своему названию ( open – англ. «открыть») не открывает соединение. Он лишь настраивает запрос, а коммуникация инициируется методом send .
Отослать данные: send
Именно этот метод открывает соединение и отправляет запрос на сервер.
В body находится тело запроса. Не у всякого запроса есть тело, например у GET-запросов тела нет, а у POST – основные данные как раз передаются через body .
Отмена: abort
Вызов xhr.abort() прерывает выполнение запроса.
Ответ: status, statusText, responseText
Основные свойства, содержащие ответ сервера:
Есть и ещё одно свойство, которое используется гораздо реже:
Если сервер вернул XML, снабдив его правильным заголовком Content-type: text/xml , то браузер создаст из него XML-документ. По нему можно будет делать запросы xhr.responseXml.querySelector(". ") и другие.
Оно используется редко, так как обычно используют не XML, а JSON. То есть, сервер возвращает JSON в виде текста, который браузер превращает в объект вызовом JSON.parse(xhr.responseText) .
Синхронные и асинхронные запросы
Если в методе open установить параметр async равным false , то запрос будет синхронным.
Синхронные вызовы используются чрезвычайно редко, так как блокируют взаимодействие со страницей до окончания загрузки. Посетитель не может даже прокручивать её. Никакой JavaScript не может быть выполнен, пока синхронный вызов не завершён – в общем, в точности те же ограничения как alert .
Если синхронный вызов занял слишком много времени, то браузер предложит закрыть «зависшую» страницу.
Из-за такой блокировки получается, что нельзя отослать два запроса одновременно. Кроме того, забегая вперёд, заметим, что ряд продвинутых возможностей, таких как возможность делать запросы на другой домен и указывать таймаут, в синхронном режиме не работают.
Из всего вышесказанного уже должно быть понятно, что синхронные запросы используются чрезвычайно редко, а асинхронные – почти всегда.
Для того, чтобы запрос стал асинхронным, укажем параметр async равным true .
Четыре простых способа открыть XHR Files
Сценарий: У вас есть файл с файлом расширения XHR на вашем компьютере, который вам нужно открыть. Вы дважды щелкните по нему, как обычно, ожидая, что программа загрузит его, но, к сожалению, ничего не происходит. Вы повторите попытку, но ничего не происходит. Что ты можешь сделать? Попробуйте эти четыре простых метода, чтобы открыть troublesome файл XHR.
Открывает все ваши файлы, как
МАГИЯ! 1
Установить необязательные продукты - File Magic (Solvusoft)
EULA | Privacy Policy | Terms | Uninstall
1 Типы файлов, которые не поддерживаются, могут быть открыты в двоичном формате.
Просмотр файлов
Установить необязательные продукты - File Magic (Solvusoft) | EULA | Privacy Policy | Terms | Uninstall
1-й метод: Откройте его в другой программе.
Когда вы дважды щелкаете файлами XHR, ваш компьютер пытается открыть его в программе, связанной с файлами XHR. Если на вашем компьютере нет программы, связанной с файлами XHR, файл не открывается. Чтобы открыть файл, загрузите одну из самых популярных программ, связанных с файлами XHR, такими как Binary Data.
Второй метод: Возьмите подсказку из типа файла.
Расширение файла XHR обычно указывает, что оно находится под зонтиком Uncommon Files. Однако, если это другой тип файла, он может не открыться с одной из программ, перечисленных выше. Чтобы найти тип файла, выполните следующие действия:
- Щелкните файл правой кнопкой мыши.
- Нажмите «Свойства» (Windows) или «Дополнительная информация» (Mac).
- Найдите тип файла в разделе «Тип файла» (Windows) или «Вид» (Mac).
3-й метод: Обратитесь к разработчику.
Итак, вы пытались использовать другую программу, вы подтвердили тип файла, и ваш файл XHR все еще не открывается. Даже если эти методы не увенчались успехом, вы все равно сможете обратиться за помощью к разработчику программного обеспечения. Используйте приведенную ниже таблицу, чтобы найти разработчика для каждой из упомянутых выше программ и связаться с ними напрямую для получения помощи.
| Программного обеспечения | Разработано |
|---|---|
| Binary Data | Microsoft Developer |
4-й метод: Откройте его в универсальном просмотрщике файлов.
Если разработчик не в состоянии помочь, возможно, универсальный просмотрщик файлов. File Magic (Download) и подобные программы предназначены для открытия широкого спектра форматов файлов, в том числе файлов XHR. Некоторые из них несовместимы и будут открываться только в двоичном формате. Загрузите File Magic сейчас, чтобы открыть вам XHR и сотни других типов файлов с помощью одной программы!
Рекомендуем
Установить необязательные продукты - File Magic (Solvusoft) | EULA | Privacy Policy | Terms | Uninstall
Содержание
История
| Метод | Описание |
|---|---|
| abort() | Отменяет текущий запрос, удаляет все заголовки, ставит текст ответа сервера в null. |
| getAllResponseHeaders() | Возвращает полный список HTTP-заголовков в виде строки. Заголовки разделяются знаками переноса (CR+LF). Если флаг ошибки равен true, возвращает пустую строку. Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR. |
| getResponseHeader(headerName) | Возвращает значение указанного заголовка. Если флаг ошибки равен true, возвращает null. Если фзаголовок не найден, возвращает null. Если статус 0 или 1, вызывает ошибку INVALID_STATE_ERR. |
| open(method, URL, async, userName, password) | Определяет метод, URL и другие опциональные параметры запроса; параметр async определяет, происходит ли работа в асинхронном режиме. Последние три параметра необязательны. |
| send(content) | Отправляет запрос на сервер. |
| setRequestHeader(label, value) | Добавляет HTTP-заголовок к запросу. |
| overrideMimeType(mimeType) | Позволяет указать mime-type документа, если сервер его не передал или передал неправильно. Внимание: метод отсутствует в Internet Explorer! |
| Свойство | Тип | Описание |
|---|---|---|
| onreadystatechange | EventListener | Обработчик события, которое происходит при каждой смене состояния объекта. Имя должно быть записано в нижнем регистре. |
| readyState | unsigned short | Текущее состояние объекта (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены) |
| responseText | DOMString | Текст ответа на запрос. Если статус не 3 или 4, возвращает пустую строку. |
| responseXML | Document | Текст ответа на запрос в виде XML, который затем может быть обработан посредством |
| status | unsigned short | HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.) |
| statusText | DOMString | Статус в виде строки («Not Found», «OK» и т. д.). Если статус не распознан, браузер пользователя должен вызвать ошибку INVALID_STATE_ERR. |
| Название | Код | Описание |
|---|---|---|
| SECURITY_ERR | 18 | Вызывается при попытке совершить запрос, запрещённый настройками безопасности в браузере пользователя. |
| NETWORK_ERR | 101 | Вызывается при ошибке сети (во время синхронного запроса). |
| ABORT_ERR | 102 | Вызывается при прерывании пользователем запроса (во время синхронного запроса). |
Пример использования
Вызов для ранних версий Internet Explorer выглядит так:
В более поздних версиях Internet Explorer (до IE7) рекомендуется использовать:
В остальных браузерах:
В качестве универсального решения предлагается использование такой функции:
Установка обработчика событий, открытие соединения и отправка запросов
Эти вызовы выглядят так:
После этого начинает работать вышеуказанный обработчик событий. Он — фактически основная часть программы. В обработчике обычно происходит перехват всех возможных кодов состояния запроса и вызов соответствующих действий, а также перехват возможных ошибок. Пример кода с этими двумя функциями:
Известные проблемы
Проблема с кешированием в Microsoft Internet Explorer
Важно заметить, что все эти методики должны использоваться в случае, когда кеширование мешает. В основном же лучше получить преимущества в скорости при кешировании, возможно комбинируя со специально уточняемыми датами модификации или другими уместными заголовками на сервере так, чтобы использовать кеширование по максимуму без получения плохих результатов.
См. также
Ссылки
Реализация в браузерах
Учебные руководства
Стандарты
Литература
- Дейв Крейн, Эрик Паскарелло, Даррен Джеймс AJAX в действии: технология - Asynchronous JavaScript and XML = Ajax in Action. — М.: «Вильямс», 2006. — С. 640. — ISBN 1-932394-61-3
- Дари К., Бринзаре Б., Черчез-Тоза Ф., Бусика М. AJAX и PHP: разработка динамических веб-приложений. — СПб.: Символ Плюс, 2006. — С. 336. — ISBN 5-93286-077-4
Wikimedia Foundation . 2010 .
Полезное
Смотреть что такое "XHR" в других словарях:
Xhr — … Deutsch Wikipedia
XHR — eXtreme Hot Rod (Governmental » Transportation) … Abbreviations dictionary
xhr — ISO 639 3 Code of Language ISO 639 2/B Code : ISO 639 2/T Code : ISO 639 1 Code : Scope : Individual Language Type : Ancient Language Name : Hernican … Names of Languages ISO 639-3
XHR — abbr. Xplizit Hardcore Recording … Dictionary of abbreviations
Кроссбраузерное создание объекта запроса¶
Здесь сначала создается запрос, задается открытие ( open ) синхронного соединение с адресом /xhr/test.html и запрос отсылается с null , т. е. без данных: send(null) .
При синхронном запросе браузер "подвисает" и ждет на строчке 3, пока сервер не ответит на запрос. Когда ответ получен - выполняется строка 4, код ответа сравнивается с 200 (ОК), и при помощи alert печатается текст ответа сервера. Все максимально просто.
Этот пример делает то же самое, но асинхронно, т. е. браузер не ждет выполнения запроса для продолжения скрипта. Вместо этого к свойству onreadystatechange подвешивается функция, которую запрос вызовет сам, когда получит ответ с сервера.
Асинхронность включается третьим параметром функции open . В отличие от синхронного запроса, функция send() не останавливает выполнение скрипта, а просто отправляет запрос.
Запрос req регулярно отчитывается о своем состоянии через вызов функции req.onreadystatechange . Состояние под номером 4 означает конец выполнения, поэтому функция-обработчик при каждом вызове проверяет - не настало ли это состояние.
Вообще, список состояний readyState такой:
- 0 - Unitialized
- 1 - Loading
- 2 - Loaded
- 3 - Interactive
- 4 - Complete
Состояния 0-2 вообще не используются.
Вызов функции с состоянием Interactive в теории должен происходить каждый раз при получении очередной порции данных от сервера. Это могло бы быть удобным для обработки ответа по частям, но Internet Explorer не дает доступа к уже полученной части ответа. Firefox дает такой доступ, но для обработки запроса по частям состояние Interactive все равно неудобно из-за сложностей обнаружения ошибок соединения. Поэтому Interactive тоже не используется.
На практике используется только последнее, Complete .
Если хотите углубиться в тонкости багов браузеров c readyState , отличными от 4 , то многие из них рассмотрены в статье на Quirksmode (англ.).
Не используйте синхронные запросы¶
Синхронные запросы применяются только в крайнем случае, когда кровь из носу необходимо дождаться ответа сервера до продолжения скрипта. В 999 случаях из 1000 можно использовать асинхронные запросы. При этом общий алгоритм такой:
- Делаем асинхронный запрос
- Рисуем анимированную картинку или просто запись типа "Loading. "
- В onreadystatechange при достижении состояния 4 убираем Loading и, в зависимости от status вызываем обработку ответа или ошибки.
Кроме того, иногда полезно ставить ограничение на время запроса. Например, хочется генерировать ошибку, если запрос висит более 10 секунд.
Для этого сразу после send() через setTimeout ставится вызов обработчика ошибки, который очищается при получении ответа и обрывает запрос с генерацией ошибки, если истекли 10 секунд.
Таймаут на синхронный запрос ставить нельзя, браузер может висеть долго-долго. А вот на асинхронный - пожалуйста.
Этот пример демонстрирует такой таймаут.
- open( method, URL )
- open( method, URL, async )
- open( method, URL, async, userName )
- open( method, URL, async, userName, password )
URL - адрес запроса. Можно использовать не только HTTP/HTTPS, но и другие протоколы, например FTP и FILE:// . При этом есть ограничения безопасности, так называемая "same origin policy": запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла.
Ниже это ограничение и способы обхода будут рассмотрены подробнее.
async = true задает асинхронные запросы, эта тема была поднята выше.
Отсылает запрос. Аргумент - тело запроса. Например, GET-запроса тела нет, поэтому используется send(null) , а для POST-запросов тело содержит параметры запроса.
abort()¶
Вызов этого метода req.abort() обрывает текущий запрос.
Здесь есть одно НО для браузера Internet Explorer. Успешный вызов abort() на самом деле может не обрывать соединение, а оставлять его в подвешенном состоянии на некоторый таймаут (20-30 секунд). Отловить такие повисшие соединения можно через прокси для отладки, например, Fiddler.
setRequestHeader(name, value)¶
Устанавливает заголовок name запроса со значением value. Если заголовок с таким name уже есть - он заменяется. Например,
getAllResponseHeaders()¶
getResponseHeader(headerName)¶
Возвращает значение заголовка ответа сервера с именем headerName .
onreadystatechange¶
Ссылается на функцию-обработчик состояний запроса. В некоторых браузерах функция имеет аргумент - событие. Не используйте его, он совершенно лишний.
readyState¶
Номер состояния запроса от 0 до 4. Используйте только 4 ("completed").
responseText¶
Текст ответа сервера. Полный текст есть только при readyState=4 , ряд браузеров дают доступ к полученной части ответа сервера при readyState=3 .
responseXML¶
Ответ сервера в виде XML, при readyState=4 .
Это свойство хранит объект типа XML document, с которым можно обращаться так же, как с обычным document. Например,
Чтобы браузер распарсил ответ сервера в свойство responseXML , в ответе должен быть заголовок Content-Type: text/xml .
Иначе свойство responseXML будет равно null .
status¶
Для HTTP-запросов - статусный код ответа сервера: 200 - OK, 404 - Not Found, и т.п. Браузер Internet Explorer может также присвоить status код ошибки WinInet, например 12029 для ошибки "cannot connect".
Запросы по протоколам FTP, FILE:// не возвращают статуса, поэтому нормальным для них является status=0 .
statusText¶
Текстовая расшифровка status , например "Not Found" или "OK".
GET и POST-запросы. Кодировка.¶
Есть два вида кодирования запроса. Первый - это метод GET и POST-формы с кодировкой urlencoded, она же - кодировка по умолчанию. В браузере они определяются как:
При таком способе кодировки ( urlencoded ) название и значение каждой переменной кодируется функцией encodeURIComponent . Формируя XmlHttpRequest , мы должны делать то же самое "руками". Конечно, только с теми переменными, в которых могут быть спецсимволы или не английские буквы, т. е. которые и будут как раз закодированы.
В методе POST параметры передаются не в URL, а в теле, посылаемом через send() . Поэтому params нужно указывать не в адресе, а при вызове send()
Кроме того, при POST обязателен заголовок Content-Type , содержащий кодировку. Это указание для сервера - как обрабатывать (раскодировать) пришедший запрос.
Заголовки Content-Length , Connection в POST-запросах, хотя их и содержат некоторые "руководства", обычно не нужны. Используйте их, только если Вы действительно знаете, что делаете.
Запросы multipart/form-data¶
Второй способ кодирования - это отсутствие кодирования. Например, это нужно для пересылки файлов. Он указывается в форме (только для POST) так:
В этом случае ничего не кодируется. А сервер, со своей стороны, посмотрев на Content-Type ( =multipart/form-data ), поймет, что пришло.
Кодировка¶
Если Вы используете только UTF-8 - пропустите эту секцию.
Все идущие на сервер параметры GET/POST, кроме случая multipart/form-data , кодируются в UTF-8. Не в кодировке страницы, а именно в UTF-8. Поэтому, например, в PHP их нужно при необходимости перекодировать функцией iconv .
С другой стороны, когда ответ с сервера браузер воспринимает в той кодировке, которая указана в заголовке ответа Content-Type . Т. е., опять же, в PHP, чтобы браузер воспринял ответ в windows-1251 и нормально отобразил данные на странице в windows-1251 , нужно послать заголовок в php-коде самим, типа:
Или же, это должен сделать сервер. Например, в apache автоматически добавляется кодировка опцией:
Частые проблемы¶
Кеширование¶
Например, при повторном XmlHttpRequest на тот же URL, Firefox посылает запрос с заголовком " If-Modified-Since " со значением, указанным в заголовке " Last-Modified " предыдущего ответа.
Самое простое решение проблемы - просто убрать кеширование. Например, при помощи заголовков, или добавлением случайного параметра в URL типа:
Пример демонстрирует универсальный код работы с кешем для Internet Explorer и Firefox.
В Internet Explorer, если запрос возвращается из кеша без перепроверки, заголовок Date - пустая строка. Поэтому нужно сделать дополнительный запрос, который на самом деле никакой не дополнительный, т. к. текущий возвращен из кеша.
Пример выше опирается на то, что сервер всегда выдает заголовок " Date ", что верно для большинства конфигураций. В нем делается синхронный запрос. В асинхронном случае, проверка на Date и т. д. нужно делать после получения ответа в функции-обработчике onreadystate .
Чтобы использовать заново XmlHttpRequest, сначала вызывайте метод open() , а затем - присваивайте onreadystatechange . Это нужно потому, что IE неявно очищает объект XmlHttpRequest в методе open() , если его статус " completed ".
Вызывать abort() для перенаправления запроса на другой URL не нужно, даже если текущий запрос еще не завершился.
Утечки памяти¶
Чтобы этого избежать, ряд фреймворков (YUI, dojo. ) вообще не ставят onreadystatechange , а вместо этого через setTimeout проверяют его readyState каждые 10 миллисекунд. Это разрывает круговую связку req <-> onreadystatechange , и утечка памяти не грозит даже в самых глючных браузерах.
Для ограничения XmlHttpRequest используется философия "Same Origin Policy". Она очень проста - каждый сайт в своей песочнице. Запрос можно делать только на адреса с тем же протоколом, доменом, портом, что и текущая страница.
Проксирование¶
Например, при использовании web-сервера Apache, для проксирования нужны директивы ProxyPass , ProxyPassReverse . Кроме того, доступны еще модули, которые по необходимости правят урлы, разархивируют контент и т. п.
Использование наддомена¶
Часто кроссбраузерные запросы - это
Любые запросы допустимы между сайтами, находящимися в доверенной ( trusted ) зоне Internet Explorer. Так что, внутренний корпоративный портал может быть у всех пользователей в этой зоне, и он сможет делать запросы к любым сайтам.
XhrIframeProxy¶
Этот метод, в принципе, вполне жизнеспособен, особенно для небольшого объема данных.
Читайте также: