Как получить ответ xmlhttprequest?

Практические примеры

Загрузка и сохранение файлов в файловой системе HTML5

Предположим, у вас есть галерея изображений и вы хотите сохранить несколько картинок у себя с помощью файловой системы HTML5. Вы можете запросить эти картинки как объекты , создать на основе этих данных объект и записать его с помощью .

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

function onError(e) {
  console.log('Error', e);
}

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {

  window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('image.png', {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {

        writer.onwrite = function(e) { ... };
        writer.onerror = function(e) { ... };

        var bb = new BlobBuilder();
        bb.append(xhr.response);

        writer.write(bb.getBlob('image/png'));

      }, onError);
    }, onError);
  }, onError);
};

xhr.send();

Обратите внимание: для использования этого кода нужно ознакомиться с условиями в руководстве Знакомство с API файловой системы

Отправка файла по частям

API файлов существенно облегчает отправку больших файлов. Методика такова: крупный файл разбивается на несколько мелких, которые затем отправляются с помощью XHR и собираются обратно на сервере. Примерно так же Gmail быстро отправляет большие прикрепленные файлы. Эта технология также позволяет обойти ограничение Google App Engine: 32 МБ на один HTTP-запрос.

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder ||
                     window.BlobBuilder;

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(blobOrFile);
}

document.querySelector('input').addEventListener('change', function(e) {
  var blob = this.files;

  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
  const SIZE = blob.size;

  var start = 0;
  var end = BYTES_PER_CHUNK;

  while(start < SIZE) {

    // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
    if ('mozSlice' in blob) {
      var chunk = blob.mozSlice(start, end);
    } else {
      var chunk = blob.webkitSlice(start, end);
    }

    upload(chunk);

    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

})();

Ниже приведен код для сборки файла на сервере.

Проверьте, как он работает.

#bytes/chunk:

§Uploading Data with XHR

Uploading data via XHR is just as simple and efficient for all data
types. In fact, the code is effectively the same, with the only
difference that we also pass in a data object when calling
send() on the XHR request. The rest is handled by the browser:

var xhr = new XMLHttpRequest();
xhr.open('POST','/upload');
xhr.onload = function() { ... };
xhr.send("text string"); 

var formData = new FormData(); 
formData.append('id', 123456);
formData.append('topic', 'performance');

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { ... };
xhr.send(formData); 

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function() { ... };
var uInt8Array = new Uint8Array(); 
xhr.send(uInt8Array.buffer); 

1. Upload a simple text string to the server

2. Create a dynamic form via FormData API

3. Upload multipart/form-data object to the server

4. Create a typed array (ArrayBuffer) of unsigned, 8-bit integers

5. Upload chunk of bytes to the server

The XHR send() method accepts one of ,
, , ,
, or objects, automatically
performs the appropriate encoding, sets the appropriate HTTP
content-type, and dispatches the request. Need to send a binary blob or
upload a file provided by the user? Simple: grab a reference to the
object and pass it to XHR. In fact, with a little extra work, we can also
split a large file into smaller chunks:

var blob = ...; 

const BYTES_PER_CHUNK = 1024 * 1024; 
const SIZE = blob.size;

var start = 0;
var end = BYTES_PER_CHUNK;

while(start < SIZE) { 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() { ... };

  xhr.setRequestHeader('Content-Range', start+'-'+end+'/'+SIZE); 
  xhr.send(blob.slice(start, end)); 

  start = end;
  end = start + BYTES_PER_CHUNK;
}

1. An arbitrary blob of data (binary or text)

2. Set chunk size to 1 MB

3. Iterate over provided data in 1MB increments

4. Advertise the uploaded range of data (start-end/total)

5. Upload 1 MB slice of data via XHR

XHR does not support request streaming, which means that we must
provide the full payload when calling send(). However, this
example illustrates a simple application workaround: the file is split
and uploaded in chunks via multiple XHR requests. This implementation
pattern is by no means a replacement for a true request streaming API,
but it is nonetheless a viable solution for some applications.

Кодировка multipart/form-data

Кодировка urlencoded за счёт замены символов на может сильно «раздуть» общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: multipart/form-data.

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

Чтобы использовать этот способ, нужно указать его в атрибуте и метод должен быть POST:

Форма при такой кодировке будет выглядеть примерно так:

…То есть, поля передаются одно за другим, значения не кодируются, а чтобы было чётко понятно, какое значение где – поля разделены случайно сгенерированной строкой, которую называют «boundary» (англ. граница), в примере выше это :

Сервер видит заголовок , читает из него границу и раскодирует поля формы.

Такой способ используется в первую очередь при пересылке файлов, так перекодировка мегабайтов через urlencoded существенно загрузила бы браузер. Да и объём данных после неё сильно вырос бы.

Однако, никто не мешает использовать эту кодировку всегда для POST запросов. Для GET доступна только urlencoded.

4 ответа

Лучший ответ

HTTP это протокол. Частью этого протокола является концепция заголовков запросов. Когда происходит xhr, между клиентом и сервером происходит обмен текстом. Заголовки запроса являются частью текста, который клиент отправляет на сервер.

Это способ установить заголовки запроса. Аргументы, которые вы видите

1) настраиваемый заголовок (в данном случае Content-type ) 2) значение заголовка. (в этом случае x-www-form-urlencoded )

20

hvgotcodes
16 Янв 2012 в 16:02

Он устанавливает HTTP-заголовок Content-type для хранения данных в кодировке url, отправленных из формы.

JanL
16 Янв 2012 в 16:03

Это именно то, что он говорит. Он установит информацию «заголовка» для следующего .

Заголовок — это в значительной степени пара ключ / значение. Он используется для передачи метаинформации на целевой сервер для текущего запроса. В вашем конкретном случае он используется, чтобы сообщить серверу, какой тип контента используется для этого запроса.

3

jAndy
16 Янв 2012 в 16:04

HTTP-запросы — это сообщения, передаваемые из одной компьютерной системы в другую в соответствии с установленной процедурой («протокол» — здесь H yper T ext T перевод) P rotocol), чтобы делать такие вещи, как отправка данных, запрос данных для отправки обратно, обновление ранее отправленных данных и т. д.

Заголовок — это, по сути, фрагмент информации о данных в теле HTTP-запроса. Его цель — сообщить машине, получающей запрос, какой тип данных заключен в теле запроса, его форматировании, используемом языке, для установки файла cookie, дате, хост-машине и т. Д.

В HTTP-запрос может быть помещено более одного заголовка, и каждый заголовок имеет компонент «имя» и «значение». На веб-страницах они выглядят как

И вы найдете их чуть ниже верхней части веб-страницы внутри элемента.

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

К этому новому пустому объекту вы намереваетесь добавить данные. Несмотря на свое название, XMLHttpRequest также позволяет отправлять данные в нескольких форматах, отличных от XML, например HTML-код, текст, JSON и т. Д. В вашем примере каждое имя данных будет отделено от его значения символом «=», а каждая пара данных / значений будет отделена от следующей пары символом «&». Этот вид форматирования известен как кодирование URL.

Мы должны сообщить принимающему компьютеру, как кодируются данные в теле HTTP-запроса. Для этого существует , который добавляется в запрос с помощью метода. setRequestHeader (.. ) . Этот метод использует 2 параметра: имя заголовка и значение заголовка. Вся эта операция достигается в линии

Этот метод setRequestHeader (..) должен быть применен к запросу после того, как запрос характеризуется методом open (…) , но before : окончательный запрос отправляется методом send (.) .

Метод open (…) определяет: (1) тип HTTP-запроса, например, GET / POST / PUT и т.д .; (2) веб-страница, которая содержит сценарий обработки для этого запроса, например, некоторый .php файл или конечная точка запроса Node.js, которая делает соответствующий запрос к внутренней базе данных; и (3) характер динамики запроса, например, асинхронным запросам присваивается значение «истина», синхронным запросам присваивается «ложь».

Метод send (.) присоединяет данные для отправки в теле запроса, в вашем случае это переменная с именем ‘parameters’.

На ваш более широкий вопрос о том, в каких ситуациях используется setRequestHeader (..) , я бы сказал, что он используется в большинстве ситуаций HTTP-запросов. Но добавлены в тело HTTP-запрос вызывает настройку по умолчанию для заголовка «Content-Type».

3

Trunk
31 Янв 2020 в 15:54

Генерация ответа XML с помощью PHP

Представленные здесь функции предназначены для программистов PHP, которые не хотят слишком много знать о JavaScript, потому что после отправки первоначального запроса дальнейший JScript не требуется. XML-файл (он генерирует предупреждающее сообщение, например, для случая, когда нажимая на ссылку ниже, создается окно предупреждения JS с текстом «hello world!») — это важный первый шаг на любом языке программирования.

Следующий ответ XML загрузит некоторый текст в элемент на странице. В этом случае вывод, который имеет идентификатор 2, будет отображаться в div. Вместо div можно легко установить содержимое заголовка, абзаца или ячейки таблицы: example2 hello world.

Как упоминалось ранее, можно вставлять HTML, а не текст, а также возвращать динамические, а не статические данные. Следующий XML-запрос генерируется с использованием PHP для вставки текущей даты и времени.

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

Все браузеры с поддержкой DOM принимают backgroundColor, поскольку имя стиля имеет цвет фона, который более «правильный» и работает только в некоторых из них. Значения могут быть сгенерированы «на лету» с использованием PHP или другого сервера. Первая команда устанавливает свойство background-color в поле hello world на желтый цвет (# ff0), а вторая — на случайный (красный, зеленый или синий). Команды, в основном, связаны с формированием полей — установка / сброс значения в поле и установка фокуса. Они полезны при проверке формы на стороне сервера в режиме реального времени, когда нужно просматривать данные без перезагрузки текущей страницы.

Прогресс отправки

Событие срабатывает только на стадии загрузки ответа с сервера.

А именно: если мы отправляем что-то через -запрос, сперва отправит наши данные (тело запроса) на сервер, а потом загрузит ответ сервера. И событие будет срабатывать только во время загрузки ответа.

Если мы отправляем что-то большое, то нас гораздо больше интересует прогресс отправки данных на сервер. Но тут не поможет.

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

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

• – начало загрузки данных.
• – генерируется периодически во время отправки на сервер.
• – загрузка прервана.
• – ошибка, не связанная с HTTP.
• – загрузка успешно завершена.
• – вышло время, отведённое на загрузку (при установленном свойстве ).
• – загрузка завершена, вне зависимости от того, как – успешно или нет.

Примеры обработчиков для этих событий:

Пример из реальной жизни: загрузка файла на сервер с индикацией прогресса:

Основы

XMLHttpRequest имеет два режима работы: синхронный и асинхронный.

Сначала рассмотрим асинхронный, так как в большинстве случаев используется именно он.

Чтобы сделать запрос, нам нужно выполнить три шага:

1. Создать .

2. Инициализировать его.

   Этот метод обычно вызывается сразу после . В него передаются основные параметры запроса:

   • – HTTP-метод. Обычно это или .
   • – URL, куда отправляется запрос: строка, может быть и объект URL.
   • – если указать , тогда запрос будет выполнен синхронно, это мы рассмотрим чуть позже.
   • , – логин и пароль для базовой HTTP-авторизации (если требуется).

   Заметим, что вызов , вопреки своему названию, не открывает соединение. Он лишь конфигурирует запрос, но непосредственно отсылается запрос только лишь после вызова .

3. Послать запрос.

   Этот метод устанавливает соединение и отсылает запрос к серверу. Необязательный параметр содержит тело запроса.

   Некоторые типы запросов, такие как , не имеют тела. А некоторые, как, например, , используют , чтобы отправлять данные на сервер. Мы позже увидим примеры.

4. Слушать события на , чтобы получить ответ.

   Три наиболее используемых события:

   • – происходит, когда получен какой-либо ответ, включая ответы с HTTP-ошибкой, например 404.
   • – когда запрос не может быть выполнен, например, нет соединения или невалидный URL.
   • – происходит периодически во время загрузки ответа, сообщает о прогрессе.

Вот полный пример. Код ниже загружает с сервера и сообщает о прогрессе:

После ответа сервера мы можем получить результат запроса в следующих свойствах :

Код состояния HTTP (число): , , и так далее, может быть в случае, если ошибка не связана с HTTP.

Сообщение о состоянии ответа HTTP (строка): обычно для , для , для , и так далее.

(в старом коде может встречаться как )

Тело ответа сервера.

Мы можем также указать таймаут – промежуток времени, который мы готовы ждать ответ:

Если запрос не успевает выполниться в установленное время, то он прерывается, и происходит событие .

URL с параметрами

Чтобы добавить к URL параметры, вида , и корректно закодировать их, можно использовать объект URL:

Ограничения безопасности. Кросс-доменный XMLHttpRequest

Для ограничения XmlHttpRequest используется философия «Same Origin Policy». Она очень проста — каждый сайт в своей песочнице. Запрос можно делать только на адреса
с тем же протоколом, доменом, портом, что и текущая страница.

Т.е, со страницы на адресе http://site.com нельзя сделать XmlHttpRequest на адрес https://site.com, http://site.com:81 или http://othersite.com

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

Проксирование

Самый простой способ обойти это ограничение — проксирование. Допустим, мы хотим сделать запрос с http://site.com на http://remote.com/get.html.

Чтобы обойти ограничение, вместо указания remote.com в методе open(), там ставится специальный URL вида http://site.com/proxy/remote.com/get.html. Так что запрос приходит на наш веб-сервер, который проксирует его на сервер site.com, который в свою очередь обрабатывает этот запрос, как нужно.

Если remote.com находится на другом сервере, то серверу site.com придется проксировать посетителю как запрос, так и ответ. При этом, разумеется, никак не будут задействованы куки remote.com, так что не получится отдельной авторизации, учета пользователей или чтото в этом роде с отдельными куками.

Проксирование настраивается соответствующим модулем (mod_proxy, proxy module и т.п.) веб-сервера для всех адресов, начинающихся на /proxy.

Например, при использовании web-сервера Apache, для проксирования нужны директивы ProxyPass, ProxyPassReverse. Кроме того, доступны еще модули, которые по необходимости правят урлы, разархивируют контент

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

Часто кроссбраузерные запросы — это

1. Способ обойти ограничения в 2 одновременных соединения к одному домену-порту.
2. Способ использовать два разных сервера в общении с посетителем. Например, на chat.site.ru — чат-демон, на www.site.ru — веб-сервер.

Кросс-доменные запросы с поддомена типа http://a.site.com, http://b.site.com на базовый домен site.com допустимы при использовании свойства document.domain, которое надо установить в site.com

// на странице a.site.com
...
document.domain='site.com'
...
// все, теперь могу делать XmlHttpRequest на site.com
xmlhttp.open(..'http://site.com/feedme.php'..)

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

В браузере Internet Explorer, чтобы сделать запрос на старый домен a.site.com, нужно вернуть свойство document.domain обратно. В остальных браузерах это приводит к ошибке, поэтому можно оформить код типа такого:

var oldDomain = document.domain
document.domain = "site.com"
try {
    // для IE, в остальных браузерах ошибка...
    document.domain = oldDomain;
} catch(e) {  /* ... но в них все и так работает */ }
//... работаем с a.site.com ...

Same origin и фреймы

Приятным бонусом свойства document.domain является возможность коммуникации между фреймами/ифреймами на одном домене.

То есть, например, если

• во фрейме с адреса http://a.site.com установлен document.domain=’site.com’,
• на фрейме с адреса http://b.site.com установлен домен document.domain=’site.com’
• на фрейме с адреса http://site.com установлен (обязательно!) домен document.domain=’site.com’

То эти три фрейма могут свободно общаться посредством javascript и XmlHttpRequest.

Обычно такая коммуникация используется при создании чатов/событий с сервера, когда на site.com находится основной веб-сервер, а на chat.site.com висит чат-демон.

Internet Explorer trusted zone

Любые запросы допустимы между сайтами, находящимися в доверенной (trusted) зоне Internet Explorer. Так что, внутренний корпоративный портал может быть у всех пользователей в этой зоне, и он сможет делать запросы к любым сайтам.

XhrIframeProxy

Еще один хитрый подход называется , и позволяет делать XmlHttpRequest к любым доменам при помощи хитрого iframe-хака. Он основан на том, что фреймы с разных доменов могут читать и менять друг у друга anchor, т.е часть адреса после решетки ‘#’. За счет этого организуется специальный протокол, по которому «проксируется» XmlHttpRequest.

Этот метод, в принципе, вполне жизнеспособен, особенно для небольшого объема данных.

Кросс-доменные запросы в FF3/IE8/Opera9..

В спецификации HTML 5 предусмотрены кросс-доменные запросы .

Создатели Firefox и Opera реализовали этот вариант, см. например MDC: .

Разработчики IE8 пошли другим путем и предлагают .

Оба способа вполне жизнеспособны и уже пригодны для использования в интранет-приложениях, когда на всех машинах администратор ставит одинаковый браузер, например, Firefox 3 ?

§Monitoring Download and Upload Progress

Network connectivity can be intermittent, and latency and bandwidth
are highly variable. So how do we know if an XHR request has succeeded,
timed out, or failed? The XHR object provides a convenient API for
listening to progress events (), which indicate the current status
of the request.

Event type	Description	Times fired
loadstart	Transfer has begun	once
progress	Transfer is in progress	zero or more
error	Transfer has failed	zero or once
abort	Transfer is terminated	zero or once
load	Transfer is successful	zero or once
loadend	Transfer has finished	once

Table 15-1. XHR progress events

Each XHR transfer begins with a loadstart and finishes with a
loadend event, and in between, one or more additional events are
fired to indicate the status of the transfer. Hence, to monitor progress
the application can register a set of JavaScript event listeners on the
XHR object:

var xhr = new XMLHttpRequest();
xhr.open('GET','/resource');
xhr.timeout = 5000; 

xhr.addEventListener('load', function() { ... }); 
xhr.addEventListener('error', function() { ... }); 

var onProgressHandler = function(event) {
  if(event.lengthComputable) {
    var progress = (event.loaded / event.total) * 100; 
    ...
  }
}

xhr.upload.addEventListener('progress', onProgressHandler); 
xhr.addEventListener('progress', onProgressHandler); 
xhr.send();

1. Set request timeout to 5,000 ms (default: no timeout)

2. Register callback for successful request

3. Register callback for failed request

4. Compute transfer progress

5. Register callback for upload progress events

6. Register callback for download progress events

Either the load or error event will fire once to
indicate the final status of the XHR transfer, whereas the
progress event can fire any number of times and provides a
convenient API for tracking transfer status: we can compare the
loaded attribute against total to estimate the amount
of transferred data.

Instance Properties

readyState : Number  readonly

The current state of . Will be one of , , , , or .

Example:

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
console.log(‘readyStatechange: ‘ + request.readyState);
};
console.log(‘Before open: ‘ + request.readyState);
request.open(‘GET’, ‘/’);
request.send();
console.log(‘After send: ‘ + request.readyState);

Results:

response : Object  readonly

Returns the response from the server in the type specified by . Only valid after the event fires.

Example:

var request = new XMLHttpRequest();
request.responseType = ‘arraybuffer’;
request.open(‘GET’, ‘/’);
request.onload = function() {
console.log(request.response);
console.log(request.response.byteLength);
};
request.send();

Results:

responseText : String  readonly

Returns the response from the server as a string. Only valid after the event fires and if is set to (the default) or .

Example:

var request = new XMLHttpRequest();
request.open(‘GET’, ‘/’, /* async = */ false);
request.send();
console.log(request.responseText.substring(0, 150));
console.log(‘…’);

Results:

responseType : String

Determines the type returned by . Must be set to one of the following:

	returns
(default)	Same as

Must be set before reaches .

Example:

var request = new XMLHttpRequest();
request.responseType = ‘arraybuffer’;
request.open(‘GET’, ‘/’);
request.onload = function() {
console.log(request.response);
console.log(request.response.byteLength);
};
request.send();

Results:

responseXML : Document  readonly

status : Number  readonly

The http status code for the request. See for a description of the code.

Example:

var request = new XMLHttpRequest();
request.open(‘GET’, ‘/’, /* async = */ false);
request.send();
console.log(‘status code: ‘ + request.status);

request = new XMLHttpRequest();
request.open(‘GET’, ‘NonExistentPage/’, /* async = */ false);
request.send();
console.log(‘status code: ‘ + request.status);

Results:

statusText : String  readonly

A description of the .

Example:

var request = new XMLHttpRequest();
request.open(‘GET’, ‘/’, /* async = */ false);
request.send();
console.log(‘status: ‘ + request.statusText);

request = new XMLHttpRequest();
request.open(‘GET’, ‘NonExistentPage/’, /* async = */ false);
request.send();
console.log(‘status: ‘ + request.statusText);

Results:

timeout : Number

upload : XMLHttpRequestUpload  readonly

Returns an object associated with this XMLHttpRequest that can be used to track the upload status of the call.

Методы объекта XMLHttpRequest

open()

Варианты вызова:

• open( method, URL )
• open( method, URL, async )
• open( method, URL, async, userName )
• open( method, URL, async, userName, password )

Первый параметр method — HTTP-метод. Как правило, используется GET либо POST, хотя доступны и более экзотические, вроде TRACE/DELETE/PUT и т.п.

URL — адрес запроса. Можно использовать не только HTTP/HTTPS, но и другие протоколы, например FTP и FILE://. При этом есть ограничения безопасности, так называемая
«same origin policy»: запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла.

Ниже это ограничение и способы обхода будут рассмотрены подробнее.

async = true задает асинхронные запросы, эта тема была поднята выше.

userName, password — данные для HTTP-авторизации.

send()

Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется , а для POST-запросов тело содержит параметры запроса.

abort()

Вызов этого метода xmlhttp.abort() обрывает текущий запрос.

Здесь есть одно НО для браузера Internet Explorer. Успешный вызов abort() на самом деле может не обрывать соединение,
а оставлять его в подвешенном состоянии на некоторый таймаут (20-30 секунд). Отловить такие повисшие соединения можно через прокси для отладки, например, Fiddler.

У браузера есть лимит: не более 2 одновременных соединений с одним доменом-портом. Т.е, если два соединения уже висят (и отвиснут по таймауту), то третье открыто не
будет, пока одно из них не умрет. Надеюсь, Вы с такой проблемой не столкнетесь. Ее можно обойти использованием кросс-доменных XmlHttpRequest.

setRequestHeader(name, value)

Устанавливает заголовок name запроса со значением value. Если заголовок с таким name уже есть — он заменяется.

Например,

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

§Brief History of XHR

Despite its name, XHR was never intended to be tied to XML
specifically. The XML prefix is a vestige of a decision to ship the first
version of what became known as XHR as part of the MSXML library in
Internet Explorer 5:

Mozilla modeled its own implementation of XHR against Microsoft’s and
exposed it via the XMLHttpRequest interface. Safari, Opera, and other
browsers followed, and XHR became a de facto standard in all major
browsers—hence the name and why it stuck. In fact, the official W3C
Working Draft specification for XHR was only published in 2006, well
after XHR came into widespread use!

However, despite its popularity and key role in the AJAX revolution,
the early versions of XHR provided limited capabilities: text-based-only
data transfers, restricted support for handling uploads, and inability to
handle cross-domain requests. To address these shortcomings, the
«XMLHttpRequest Level 2» draft was published in 2008, which added a
number of new features:

• Support for request timeouts

• Support for binary and text-based data transfers

• Support for application override of media type and encoding of
  responses

• Support for monitoring progress events of each request

• Support for efficient file uploads

• Support for safe cross-origin requests

In 2011, «XMLHttpRequest Level 2» specification was merged with the
original XMLHttpRequest working draft. Hence, while you will often find
references to XHR version or level 1 and 2, these distinctions are no
longer relevant; today, there is only one, unified XHR specification. In
fact, all the new XHR2 features and capabilities are offered via the same
XMLHttpRequest API: same interface, more features.

FAQ

• Why is my server’s JSON response not parsed? I returned the right content-type.
  • See — you can set it to on a GET request to tell to parse the response body.
  • Without body is returned as-is (a string or when is set and the browser supports it — a result of parsing JSON or XML)
• How do I send an object or array as POST body?
  • should be a string. You need to serialize your object before passing to for sending.
  • To serialize to JSON you can use
    with for convenience — then will do the serialization and set content-type accordingly.
• Where’s stream API? etc.
• Why can’t I send as body by passing it as anymore?
• How do I add an listener?

  xhr({...beforeSendfunction(xhrObject){xhrObject.onprogress=function(){}}})