METANIT.COM

XMLHttpRequest.response

Свойство XMLHttpRequest response возвращает содержимое тела ответа в виде ArrayBuffer , Blob , Document , JavaScript Object или DOMString в зависимости от значения свойства responseType .

Синтаксис

var body = XMLHttpRequest.response;

Value

Соответствующий объект, основанный на значении responseType . Вы можете попытаться запросить данные в определённом формате, установив значение responseType после вызова open() для инициализации запроса, но перед вызовом send() для отправки запроса на сервер.

Значение равно null , если запрос ещё не завершён или был неудачным, за исключением того, что при чтении текстовых данных с использованием responseType «text» или пустой строки ( «» ), ответ может содержать ответ до тех пор, пока запрос все ещё находится в состоянии LOADING readyState (3) .

Типы ответов описаны ниже.

Значение	Описание
«»	Пустая строка responseType обрабатывается так же, как «text» , тип по умолчанию (следовательно, как DOMString .)
«arraybuffer»	response в JavaScript ArrayBuffer содержит двоичные данные.
«blob»	response в Blob object содержит двоичные данные.
«document»	response является HTML Document или XML XMLDocument , в зависимости от ситуации, основанный на MIME-типе полученных данных. См. HTML in XMLHttpRequest (en-US) , чтобы узнать больше об использовании XHR для извлечения содержимого HTML.
«json»	response является JavaScript object, созданный путём анализа содержимого полученных данных как JSON.
«text»	response является текстом в DOMString object.
«moz-chunked-arraybuffer»	Похож на «arraybuffer» , но данные принимаются в потоке. При использовании этого типа ответа значение в response доступно только в обработчике для события progress (en-US) и содержит только данные, полученные с момента последнего события progress , а не совокупные данные, полученные с момента отправки запроса.Доступ к response во время события progress возвращает полученные данные. За пределами обработчика событий progress значение response всегда равно null .
«ms-stream»	response является частью потоковой загрузки; этот тип ответа разрешён только для запросов на загрузку и поддерживается только Internet Explorer.

Пример

В этом примере представлена функция load() , которая загружает и обрабатывает страницу с сервера. Он работает путём создания объекта XMLHttpRequest и создания обработчика события с событием readystatechange , чтобы при изменении readyState на DONE (4) response получался и передавался в колбэк-функцию, предоставляемую load() .

Содержимое обрабатывается как необработанные текстовые данные (поскольку здесь ничто не переопределяет responseType по умолчанию).

var url = 'somePage.html'; //A local page function load(url, callback)  var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function()  if (xhr.readyState === 4)  callback(xhr.response); > > xhr.open('GET', url, true); xhr.send(''); > 

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

Совместимость браузера

BCD tables only load in the browser

Смотрите также

Источник

Javascript get response message

Для представления ответа от сервера в Fetch API применяется интерфейс Response . Функция fetch() возвращает объект Promise, функция-коллбек в котором в качестве параметра получает объект Response с полученным от сервера ответом:

fetch("/hello").then(response => /* действия с response */ )

Либо можно использовать async/await для получения объекта Response

С помощью свойств объекта Response можно получить из полученного ответа различную информацию. Объект Response имеет следующие свойства:

• body : содержимое ответа в виде объекта ReadableStream
• bodyUsed : хранит булевое значение, которое указывает, было ли содержимое ответа уже использовано.
• headers : набор заголовков ответа в виде объекта Headers
• ok : хранит булевое значение, которое указывает, завершился ли запрос успешно (то есть если статусной код ответа находится в диапазоне 200-299)
• redirected : хранит булевое значение, которое указывает, является ли ответ результатом переадресации
• status : хранит статусный код ответа
• statusText : хранит сообщение статуса, которое соответствует статусному коду
• type : хранит тип ответа
• url : хранит адрес URL. Если в процессе запроса происходит ряд переадресаций, то хранит конечный адрес URL после всех переадресаций

Стоит отметить, что все эти свойства доступны только для чтения. Например, используем ряд свойств для получения информации об ответа сервера. Для этого определим следующий сервер на Node.js, который обрабатывает запросы:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < if(request.url == "/hello")< response.end("Fetch на METANIT.COM"); >else < fs.readFile("index.html", (error, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

На странице index.html вызовем функцию fetch и получим информацию об ответе:

Аналогичный пример с async/await:

getResponse(); async function getResponse() < const response = await fetch("/hello"); console.log(response.status); // 200 console.log(response.statusText); // OK console.log(response.url); // http://localhost:3000/hello >

Свойство ok возвращает true , если статусный код ответа в диапазоне от 200 до 299, что обычно говорит о том, что запрос успешно выполнен. И мы можем проверять это свойство перед ббработкой ответа:

Получение заголовков

С помощью свойства headers можно получить заголовки ответа, которые представляют интерфейс Headers .

Для получения данных из заголовков мы можем воспользоваться один из следующих методов интерфейса Headers:

• entries() : возвращает итератор, который позволяет пройтись по всем заголовкам
• forEach() : осуществляет перебор заголовков
• get() : возвращает значение определенного заголовка
• has() : возвращает true , если установлен определенный заголовок
• keys() : получает все названия установленных заголовков
• values() : получает все значения установленных заголовков

Например, получим все заголовки ответа:

Каждый заголовок представляет массив из двух элементов, где первый элемент — название заголовка, а второй — его значение.

Вывод консоли браузера в моем случае:

connection : keep-alive content-length : 22 date : Fri, 03 Dec 2021 17:09:34 GMT keep-alive : timeout=5

Другой пример — проверка заголовка и при его наличии вывод его значения:

Таким образом, мы можем получать и кастомные заголовки, которые устанавливаются на стороне сервера. Например, пусть сервер node.js устанавливает заголовок «Secret-Code»:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < if(request.url == "/hello")< response.setHeader("Secret-Code", 124); response.end("Fetch на METANIT.COM"); >else < fs.readFile("index.html", (error, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

Для установки заголовка в node.js применяется метод response.setHeader() , первый параметр которого — название заголовка, а второй его значение.

Получим этот заголовок на веб-странице:

Если заголовок не установлен, то метод response.headers.get() возвращает null.

Переадресация

Если в процессе запроса произошла переадресация, то свойство redirected равно true , а свойство url хранит адрес, на который произошла переадресация. Например, пусть сервер на node.js выполняет переадресацию с адреса «/hello» на адрес «/newpage»:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < if(request.url == "/hello")< response.statusCode = 302; // 302 - код временной переадресации response.setHeader("Location", "/newpage"); // переадресация на адрес localhost:3000/newpage response.end(); >else if(request.url == "/newpage") < response.setHeader("Secret-Code", "New Page Code: 567"); // для теста устанавливаем заголовок response.end("This is a new page"); >else < fs.readFile("index.html", (error, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

Выполним запрос по адресу «/hello» на веб-странице:

Произошел редирект на адрес http://localhost:3000/newpage New Page Code: 567

По консольному выводу, а именно по заголовку Secret-Code мы видим, что функция fetch получила ответ от нового адреса — «/newpage».

Источник

Response

The Response interface of the Fetch API represents the response to a request.

You can create a new Response object using the Response() constructor, but you are more likely to encounter a Response object being returned as the result of another API operation—for example, a service worker FetchEvent.respondWith , or a simple fetch() .

Constructor

Creates a new Response object.

Instance properties

Stores a boolean value that declares whether the body has been used in a response yet.

The Headers object associated with the response.

A boolean indicating whether the response was successful (status in the range 200 – 299 ) or not.

Indicates whether or not the response is the result of a redirect (that is, its URL list has more than one entry).

The status code of the response. (This will be 200 for a success).

The status message corresponding to the status code. (e.g., OK for 200 ).

The type of the response (e.g., basic , cors ).

Static methods

Returns a new Response object associated with a network error.

Returns a new response with a different URL.

Returns a new Response object for returning the provided JSON encoded data.

Instance methods

Returns a promise that resolves with an ArrayBuffer representation of the response body.

Returns a promise that resolves with a Blob representation of the response body.

Creates a clone of a Response object.

Returns a promise that resolves with a FormData representation of the response body.

Returns a promise that resolves with the result of parsing the response body text as JSON .

Returns a promise that resolves with a text representation of the response body.

Examples

Fetching an image

You’ll notice that since we are requesting an image, we need to run Response.blob to give the response its correct MIME type.

const image = document.querySelector(".my-image"); fetch("flowers.jpg") .then((response) => response.blob()) .then((blob) =>  const objectURL = URL.createObjectURL(blob); image.src = objectURL; >); 

You can also use the Response() constructor to create your own custom Response object:

const response = new Response(); 

An Ajax Call

Here we call a PHP program file that generates a JSON string, displaying the result as a JSON value, including simple error handling.

// Function to do an Ajax call const doAjax = async () =>  const response = await fetch("Ajax.php"); // Generate the Response object if (response.ok)  return response.json(); // Get JSON value from the response body > throw new Error("*** PHP file not found"); >; // Call the function and output value or error message to console doAjax().then(console.log).catch(console.log); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 26, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник