Использование XMLHttpRequest

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

Включены примеры как распространённых, так и менее распространённых случаев использования XMLHttpRequest.

Для отправки HTTP запроса:

1. Создать объект XMLHttpRequest
2. Открыть URL
3. Отправить запрос.

После завершения транзакции объект XMLHttpRequest будет содержать полезную информацию, такую как тело ответа и код состояния HTTP результата.

function reqListener() {
  console.log(this.responseText);
}

const req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();

Запрос, выполненный через XMLHttpRequest , может извлечь данные двумя способами: асинхронно или синхронно. Тип запроса определяется необязательным аргументом async (третьим аргументом), который устанавливается в методе XMLHttpRequest.open(). Если этот аргумент true или не указан, обработка XMLHttpRequest выполняется асинхронно, в противном случае — синхронно. Подробное обсуждение и демонстрации этих двух типов запросов можно найти на странице синхронных и асинхронных запросов. Синхронные запросы нельзя использовать вне веб-рабочих процессов, так как они блокируют основное интерфейс.

Существует несколько типов атрибутов ответа, определённых для конструктора XMLHttpRequest(). Они сообщают клиенту, выполняющему XMLHttpRequest важную информацию о состоянии ответа. Некоторые случаи, когда требуется работа с типами ответов, отличными от текста, могут включать некоторую манипуляцию и анализ, описанные в следующих разделах.

Если вы используете XMLHttpRequest для получения содержимого удалённого XML-документа, свойство responseXML будет объектом DOM, содержащим распарсенный XML-документ. Это может оказаться сложным для обработки и анализа. Существует четыре основных способа анализа этого XML-документа:

1. Использование XPath для адресации (или указания) его частей.
2. Ручное парсирование и сериализация XML в строки или объекты.
3. Использование XMLSerializer для сериализации деревьев DOM в строки или файлы.
4. RegExp может быть использован, если вам заранее известно содержимое XML-документа. Вы можете захотеть удалить символы перевода строки, если используете RegExp для сканирования с учётом перевода строк. Однако этот метод является "методом последней инстанции", так как при небольшом изменении XML-кода он, скорее всего, потерпит неудачу.

Если вы используете XMLHttpRequest для получения содержимого удалённой HTML-веб-страницы, свойство responseText — это строка, содержащая исходный HTML. Это может оказаться сложным для обработки и анализа. Существует три основных способа анализа и парсинга этой исходной HTML-строки:

1. Используйте свойство XMLHttpRequest.responseXML, как описано в статье HTML в XMLHttpRequest.
2. Вставьте содержимое в тело фрагмента документа document fragment через fragment.body.innerHTML и пройдитесь по DOM фрагмента.
3. RegExp может быть использован, если вам заранее известно содержимое HTML-responseText. Вы можете захотеть удалить символы перевода строки, если используете RegExp для сканирования с учётом перевода строк. Однако этот метод является "методом последней инстанции", так как при небольшом изменении HTML-кода он, скорее всего, потерпит неудачу.

Хотя XMLHttpRequest чаще всего используется для отправки и получения текстовых данных, он может использоваться для отправки и получения бинарного содержимого. Существует несколько хорошо проверенных методов принуждения ответа XMLHttpRequest к отправке бинарных данных. Они включают использование метода overrideMimeType() объекта XMLHttpRequest и являются работоспособным решением.

const req = new XMLHttpRequest();
req.open("GET", url);
// retrieve data unprocessed as a binary string
req.overrideMimeType("text/plain; charset=x-user-defined");
/* … */

Однако доступны более современные методы, так как атрибут responseType теперь поддерживает ряд дополнительных типов содержимого, что делает отправку и получение бинарных данных намного проще.

Например, рассмотрите этот фрагмент кода, который использует свойство responseType объекта "arraybuffer" для получения удалённого содержимого в объект ArrayBuffer, который хранит исходные бинарные данные.

const req = new XMLHttpRequest();

req.onload = (e) => {
  const arraybuffer = req.response; // not responseText
  /* … */
};
req.open("GET", url);
req.responseType = "arraybuffer";
req.send();

Для получения дополнительных примеров обратитесь к странице Отправка и приём бинарных данных.

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

Поддержка мониторинга событий DOM progress для XMLHttpRequest переводов соответствует спецификации для событий прогресса: эти события реализуют интерфейс ProgressEvent. Фактические события, которые вы можете отслеживать, чтобы определить состояние текущей передачи:

progress

Изменилось количество полученных данных.

load

Передача завершена; все данные теперь в response

const req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress);
req.addEventListener("load", transferComplete);
req.addEventListener("error", transferFailed);
req.addEventListener("abort", transferCanceled);

req.open();

// …

// progress on transfers from the server to the client (downloads)
function updateProgress(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    // …
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

function transferComplete(evt) {
  console.log("The transfer is complete.");
}

function transferFailed(evt) {
  console.log("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  console.log("The transfer has been canceled by the user.");
}

Мы добавляем обработчики событий для различных событий, которые отправляются при выполнении передачи данных с помощью XMLHttpRequest.

Обработчик события progress, определённый функцией updateProgress() в данном примере, получает общее количество байт для передачи и количество переданных байтов в полях total и loaded события. Однако, если поле lengthComputable ложно, общий размер неизвестен и будет равен нулю.

События прогресса существуют как для загрузки, так и для отправки. События загрузки срабатывают на самом объекте XMLHttpRequest , как показано в примере выше. События отправки срабатывают на объекте XMLHttpRequest.upload , как показано ниже:

const req = new XMLHttpRequest();

req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
req.upload.addEventListener("abort", transferCanceled);

req.open();

События progress появляются для каждого блока полученных данных, включая последний блок в тех случаях, когда последний пакет получен, а соединение закрыто до срабатывания события progress. В этом случае событие progress автоматически срабатывает при возникновении события load для этого пакета. Это позволяет вам надёжно отслеживать прогресс, следя только за событием "progress".

Можно также определить все три условия завершения загрузки (abort, load, или error ) с помощью события loadend:

req.addEventListener("loadend", loadEnd);

function loadEnd(e) {
  console.log(
    "The transfer finished (although we don't know if it succeeded or not).",
  );
}

Обратите внимание, что из информации, полученной событием loadend , невозможно определить, какое условие привело к завершению операции; однако вы можете использовать это для обработки задач, которые необходимо выполнить во всех сценариях завершения передачи.

Создадим две функции:

function getHeaderTime() {
  const lastVisit = parseFloat(
    window.localStorage.getItem(`lm_${this.filepath}`),
  );
  const lastModified = Date.parse(this.getResponseHeader("Last-Modified"));

  if (isNaN(lastVisit) || lastModified > lastVisit) {
    window.localStorage.setItem(`lm_${this.filepath}`, Date.now());
    isFinite(lastVisit) && this.callback(lastModified, lastVisit);
  }
}

function ifHasChanged(URL, callback) {
  const req = new XMLHttpRequest();
  req.open("HEAD" /* use HEAD - we only need the headers! */, URL);
  req.callback = callback;
  req.filepath = URL;
  req.onload = getHeaderTime;
  req.send();
}

И для тестирования:

// Let's test the file "your-page.html"
ifHasChanged("your-page.html", function (modified, visit) {
  console.log(
    `The page '${this.filepath}' has been changed on ${new Date(
      nModified,
    ).toLocaleString()}!`,
  );
});

Если вы хотите узнать, изменилась ли текущая страница, обратитесь к статье о document.lastModified.

Современные браузеры поддерживают межсайтовые запросы, реализуя стандарт Cross-Origin Resource Sharing (CORS). Пока сервер настроен на разрешение запросов с источника вашего веб-приложения, XMLHttpRequest будет работать. В противном случае будет выброшено исключение INVALID_ACCESS_ERR.

Подход, совместимый с различными браузерами, для обхода кэша заключается в добавлении отметки времени к URL, обязательно используя «?» или «&», как нужно. Например:

http://example.com/bar.html -> http://example.com/bar.html?12345
http://example.com/bar.html?foobar=baz -> http://example.com/bar.html?foobar=baz&12345

Так как локальный кэш индексируется по URL, каждый запрос становится уникальным, тем самым обходя кэш.

Вы можете автоматически изменять URL с помощью следующего кода:

const req = new XMLHttpRequest();

req.open("GET", url + (/\?/.test(url) ? "&" : "?") + new Date().getTime());
req.send(null);

Рекомендуемый способ включения межсайтового сценария – использование заголовка Access-Control-Allow-Origin HTTP в ответе на XMLHttpRequest.

Если вы получаете в XMLHttpRequest значения status=0 и statusText=null, это означает, что запрос не был разрешен к выполнению. Он был UNSENT. Вероятной причиной является изменение XMLHttpRequest источника (при создании XMLHttpRequest) после того, как XMLHttpRequest был open(). Такая ситуация может возникнуть, например, когда XMLHttpRequest запускается при событии onunload для окна, ожидаемый XMLHttpRequest создаётся, когда закрываемое окно ещё существует, и, наконец, отправляет запрос (иными словами, open()) после того, как это окно потеряло фокус, а другой получил фокус. Наиболее эффективным способом избежать этой проблемы является установка обработчика события DOMActivate в новом окне, который устанавливается после того, как для закрываемого окна сработает событие unload.

• Использование Fetch API
• HTML в XMLHttpRequest
• Управление доступом к ресурсам (CORS)
• XMLHttpRequest - REST и богатый пользовательский интерфейс
• Объект XMLHttpRequest: спецификация WHATWG