Xmlhttprequest - это интерфейс браузера, который позволяет JavaScript выполнять связь HTTP (S).
Сначала Microsoft представила этот интерфейс в IE 5. Поскольку он настолько полезен, другие браузеры подражали и развернулись, поэтому рождались операции Ajax.
Однако этот интерфейс не был стандартизирован, и реализация каждого браузера более или менее отличается. После того, как концепция HTML 5 была сформирована, W3C начал рассматривать стандартизацию этого интерфейса. В феврале 2008 года был предложен проект 2 -го уровня Xmlhttprequest.
В этой новой версии Xmlhttprequest предлагается много полезных новых функций, которые будут значительно продвигать инновации в Интернете. Эта статья подробно представляет эту новую версию.
1. Старая версия объекта Xmlhttprequest
Прежде чем представить новую версию, давайте рассмотрим использование старой версии.
Во -первых, создайте новый экземпляр Xmlhttprequest.
var xhr = new xmlhttprequest ();
Затем для удаленного хоста выдается HTTP -запрос.
Кода -копия выглядит следующим образом:
xhr.open ('get', 'example.php');
xhr.send ();
Затем подождите, пока отдаленный хост ответит. В настоящее время вам необходимо контролировать изменения состояния объекта Xmlhttprequest и указать функцию обратного вызова.
xhr.onreadystatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {alert (xhr.responsetext); } else {alert (xhr.statustext); }};Приведенный выше код содержит основные свойства старой версии объекта xmlhttprequest:
Кода -копия выглядит следующим образом:
* xhr.readystate: статус объекта xmlhttprequest, равный 4, означает, что данные были получены.
* xhr.status: код состояния, возвращаемый сервером, равен 200, означает, что все нормально.
* xhr.responsetext: текстовые данные, возвращаемые сервером
* xhr.responsexml: данные формата XML, возвращаемые сервером
* xhr.statustext: текст состояния, возвращаемый сервером.
2. Недостатки старой версии
Старая версия объекта xmlhttprequest имеет следующие недостатки:
* Поддерживается только передача текстовых данных и не может использоваться для чтения и загрузки двоичных файлов.
* При передаче и получении данных нет информации о прогрессе, поэтому вы можете только запрашивать, была ли она завершена.
* Из -за «той же политики происхождения» вы можете запросить данные только с серверов с тем же доменным именем.
3. Функции новой версии
Новая версия объекта Xmlhttprequest внесла значительные средства в недостатки старой версии.
Кода -копия выглядит следующим образом:
* Вы можете установить ограничение по времени для HTTP -запросов.
* Объекты FormData могут использоваться для управления данными формы.
* Файлы могут быть загружены.
* Вы можете запросить данные под разными доменными именами (перекрестный запрос).
* Вы можете получить двоичные данные на стороне сервера.
* Вы можете получить информацию о прогрессе передачи данных.
Далее я представлю эти новые функции один за другим.
4. Ограничение по времени для HTTP -запросов
Иногда операции Ajax занимают много времени, и невозможно предсказать, сколько времени это займет. Если скорость интернета очень медленная, пользователям, возможно, придется ждать долгое время.
Новая версия объекта Xmlhttprequest добавила атрибут тайм -аута, который может установить ограничение по времени для HTTP -запросов.
xhr.timeout = 3000;
Приведенное выше оператор устанавливает максимальное время ожидания до 3000 миллисекунд. После того, как этот срок пройдет, HTTP -запрос будет автоматически остановлен. Существует также событие тайм -аута, которое указывает функцию обратного вызова.
Кода -копия выглядит следующим образом:
xhr.ontimeout = function (event) {
Alert ('Time -Out!');
}
В настоящее время Opera, Firefox и IE 10 поддерживают это свойство. Это свойство IE 8 и IE 9 принадлежит объекту XdomainRequest, в то время как Chrome и Safari не поддерживают его.
5. FormData объект
Операции AJAX часто используются для передачи данных формы. Чтобы облегчить обработку формы, HTML 5 добавил объект FormData для издевательств.
Во -первых, создайте новый объект FormData.
var formData = new FormData ();
Затем добавьте к нему элемент формы.
FormData.Append («Имя пользователя», «Чжан Сан»);
FormData.Append ('id', 123456);
Наконец, напрямую передавайте этот объект FormData. Это точно так же, как отправка веб -формы.
xhr.send (formdata);
Объект FormData также может использоваться для получения значения веб -формы.
Кода -копия выглядит следующим образом:
var form = document.getElementbyId ('myform');
var formData = new FormData (form);
FormData.Append ('secret', '123456'); // Добавить элемент формы
xhr.open ('post', form.action);
xhr.send (formdata);
6. Загрузить файлы
Новая версия объекта xmlhttprequest может не только отправлять текстовую информацию, но и загружать файлы.
Предполагая, что файлы являются элементом формы (input [type = "file"]) из «Select File», мы загружаем его в объект FormData.
Кода -копия выглядит следующим образом:
var formData = new FormData ();
для (var i = 0; i <files.length; i ++) {
formdata.append ('files []', files [i]);
}
Затем отправьте этот объект FormData.
xhr.send (formdata);
7. Обмен ресурсами междоменного (CORS)
Новая версия объекта xmlhttprequest может выдавать HTTP -запросы на серверы с разными доменными именами. Это называется «совместное использование ресурсов по перекрестному происхождению» (CORS).
Предварительным условием для использования «совместного использования ресурсов» является то, что браузер должен поддерживать эту функцию, и сервер должен согласиться с этой «междоменной». Если приведенные выше условия могут быть выполнены, код написан точно так же, как и в запросах, не связанных с Cross-Domain.
xhr.open ('get', 'http: //other.server/and/path/to/script');
В настоящее время, в дополнение к IE 8 и IE 9, основные браузеры поддерживают CORS, а IE 10 также будут поддерживать эту функцию. Для настройки на стороне сервера обратитесь к «Контроль доступа на стороне сервера».
8. Получить двоичные данные (метод A: переписать миметип)
Старая версия объекта xmlhttprequest может извлечь только текстовые данные с сервера (в противном случае его имя не будет начинаться с XML), в то время как новая версия может получить двоичные данные.
Вот два разных способа. Более старый подход состоит в том, чтобы переопределить миметип данных, замаскировать двоичные данные, возвращаемые сервером в виде текстовых данных, и сообщите браузеру, что это определенный пользователем набор символов.
xhr.OverridemimeType ("text/plain; charset = x-user defined");
Затем используйте свойство ответа RepactEtext для получения двоичных данных, возвращаемых сервером.
var binstr = xhr.responsetext;
Поскольку браузер рассматривает его как текстовые данные в настоящее время, он должен быть восстановлен до двоичных данных один за другим.
Кода -копия выглядит следующим образом:
for (var i = 0, len = binstr.length; i <len; ++ i) {
var c = binstr.charcodeat (i);
var byte = c & 0xff;
}
Операция битов «C & 0xff» последней строки означает, что среди двух байтов каждого символа сохраняется только следующий байт, и предыдущий байт выбрасывается. Причина в том, что когда браузер интерпретирует символы, он автоматически интерпретирует символы в разделе Unicode 0xf700-0xf7ff.
8. Получить двоичные данные (метод B: свойство ответа)
Более новым способом извлечения двоичных данных с сервера является использование вновь добавленного свойства ответа. Если сервер возвращает текстовые данные, значение этого свойства - «текст», что является значением по умолчанию. Новые браузеры также поддерживают другие значения, то есть они могут получать данные в других форматах.
Вы можете установить ответную реакцию на Blob, что означает, что сервер отправляет обратно двоичный объект.
Кода -копия выглядит следующим образом:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.responsetype = 'blob';
При получении данных просто используйте объект Blob, который поставляется с вашим браузером.
var blob = new Blob ([xhr.response], {type: 'image/png'});
Обратите внимание, что он должен прочитать xhr.response, а не xhr.responsetext.
Вы также можете установить ответтип на ArrayBuffer и установить двоичные данные в массиве.
Кода -копия выглядит следующим образом:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.responsetype = "arraybuffer";
При получении данных вам необходимо пройти через этот массив.
Кода -копия выглядит следующим образом:
var arraybuffer = xhr.response;
if (arraybuffer) {
var bytearray = new uint8array (arraybuffer);
для (var i = 0; i <bytearray.bytelength; i ++) {
// что -нибудь делай
}
}
Более подробное обсуждение см. В отправке и получении бинарных данных.
9. Информация о прогрессе
Новая версия объекта xmlhttprequest имеет событие прогресса при передаче данных, которое используется для возврата информации о прогрессе.
Он разделен на две ситуации: загрузить и загрузить. Скачанное событие прогресса принадлежит объекту xmlhttprequest, а загруженное событие прогресса принадлежит объекту xmlhttprequest.upload.
Давайте сначала определим функцию обратного вызова события Progress.
Кода -копия выглядит следующим образом:
xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
Затем, в функции обратного вызова, используйте некоторые свойства этого события.
Кода -копия выглядит следующим образом:
Функция UpdateProgress (Event) {
if (event.lengthcomputable) {
var penootcomplete = event.loaded / event.total;
}
}
В приведенном выше коде event.total - это общее количество байтов, которые необходимо перенести, а Event.loaded - это байты, которые были переданы. Если event.length -Computable не правда, Event.total равен 0.
Существует пять других событий, связанных с событием Progress, которые могут указать функцию обратного вызова отдельно:
* Загрузка события: передача завершена успешно.
* Событие прерывания: передача была отменена пользователем.
* Событие ошибки: произошла ошибка во время передачи.
* Событие LoadStart: Transfer начинается.
* Событие Loadend: передача заканчивается, но я не знаю, удастся ли она или терпит неудачу.
10. Чтение материалов
1. Введение в XMLHTTPRequest Уровень 2: Комплексное введение в новые функции.
2. Новые трюки в Xmlhttprequest 2: Некоторые введения использования.
3. Использование XMLHTTPREQUEST: некоторые расширенные использование, в основном нацеленные на браузеры Firefox.
4. HTTP Control Access: CORS Обзор.
5. Контроль доступа DOM с использованием обмена ресурсами кроссоригина: 9 типов информации о заголовке HTTP CORS
6. Управление доступа на стороне сервера: настройки CORS на стороне сервера.
7. Включить CORS: настройки сервера CORS.