JavaScript свойство XMLHttpRequest.responseType

Определение и применение

Свойство XMLHttpRequest.responseType задаёт способ представления ответа. "text" даёт строку, "blob" и "arraybuffer" — двоичные данные. Для "json" некорректный JSON даёт null; для "document" результат зависит от MIME-типа и возможности разбора документа. Это не универсальная проверка формата серверного ответа.

Значение по умолчанию — пустая строка: ответ обрабатывается как текст, так же как при значении "text".

Типы возможных ответов представлены ниже:

Изменить значение responseType в синхронном XMLHttpRequest можно только в том случае, если запрос выполняется в воркере (Worker). Это ограничение частично предназначено для обеспечения того, чтобы синхронные операции не использовались для больших операций, которые блокируют основной поток браузера, и деструктивны для пользовательского интерфейса.

XMLHttpRequest асинхронны по умолчанию, для перехода в синхронный режим, необходимо передать логическое значение false как значение необязательного параметра async при вызове метода open(), который позволяет инициализировать запрос. Синхронные запросы в основном потоке устарели: они блокируют интерфейс, и браузеры выводят предупреждение. Попытки установить значение responseType в "document" в воркере игнорируются.

Поддержка браузерами

Спецификация: xhr.spec.whatwg

✓Поддерживается во всех основных браузерах с 2016 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.XMLHttpRequest.responseType

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
responseType	✓31	✓12	✓6	✓18…	✓5.1	✓31	✓50	✓18…	✓5	✓2.0	✓4.4.3	✓5
arraybuffer value	✓31	✓12	✓6	✓18…	✓5.1	✓31	✓50	✓18…	✓5	✓2.0	✓4.4.3	✓5
blob value	✓31	✓12	✓6	✓18…	✓5.1	✓31	✓50	✓18…	✓5	✓2.0	✓4.4.3	✓5
document value	✓31	✓12	✓11	✓18…	✓7	✓31	✓50	✓18…	✓7	✓2.0	✓4.4.3	✓7
json value	✓31	✓79	✓10	✓18…	✓7	✓31	✓50	✓18…	✓7	✓2.0	✓4.4.3	✓7
Ещё 4 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

// чтение
const type = xhr.responseType;

// запись
xhr.responseType = type;

Спецификация

XMLHttpRequest Standard.

Исключения

Пример использования

Пример ниже демонстрирует загрузку двоичного объекта с помощью объекта XMLHttpRequest методом "GET" и передает этот объект заданной функции обратного вызова:

function getBlob(url, callback) {
  let xhr = new XMLHttpRequest(); // инициализируем только что созданный запрос
  xhr.open("GET", url); // определяем параметры для запроса
  xhr.responseType = "blob"; // указываем тип данных, ожидаемых в ответе
  xhr.onload = function() { // добавляем обработчик события
    callback(xhr.response); // передаем ответ сервера функции обратного вызова
  };
  xhr.send(); // отправляем запрос на сервер
}

Пример ниже демонстрирует получение строкового значения от сервера, содержащее ответ на запрос в виде текста:

let xhr = new XMLHttpRequest(); // инициализируем только что созданный запрос
xhr.open("GET", "/info"); // определяем параметры для запроса
xhr.responseType = "text"; // указываем тип данных, ожидаемых в ответе
xhr.onreadystatechange = function() { // добавляем обработчик события
   // проверяем состояние запроса и числовой код состояния HTTP ответа
   if (xhr.readyState === 4 && xhr.status === 200) {
     const resultText = xhr.responseText; // строковое значение, содержащее ответ на запрос в виде текста
     console.log(resultText); // выводим в консоль это значение
   }
};
xhr.send(); // отправляем запрос на сервер

<button id="load" type="button">Загрузить профиль</button>
<button id="cancel" type="button">Отменить запрос</button>
<pre id="result" aria-live="polite"></pre>

const result = document.querySelector('#result')
const loadButton = document.querySelector('#load')
let request
loadButton.addEventListener('click', () => {
    const xhr = new XMLHttpRequest()
    request = xhr
    loadButton.disabled = true
    result.textContent = 'Загрузка…'
    xhr.open('GET', 'user-profile.json')
    xhr.timeout = 5000
    xhr.responseType = 'json'
    xhr.onload = () => {
        if (xhr.status < 200 || xhr.status >= 300) {
            result.textContent = 'Ошибка HTTP: ' + xhr.status
        } else if (!xhr.response || typeof xhr.response.phone !== 'string') {
            result.textContent = 'Ожидался JSON-объект со строковым полем phone'
        } else {
            result.textContent = 'Телефон: ' + xhr.response.phone
        }
    }
    xhr.onerror = () => {
        result.textContent = 'Сетевая ошибка или запрет CORS'
    }
    xhr.ontimeout = () => {
        result.textContent = 'Превышено время ожидания'
    }
    xhr.onabort = () => {
        result.textContent = 'Запрос отменён'
    }
    xhr.onloadend = () => {
        loadButton.disabled = false
        request = null
    }
    xhr.send()
})
document.querySelector('#cancel').addEventListener('click', () => request?.abort())