В 2005 году Джесси Джеймс Гарретт написал статью «Ajax — новый подход к веб-приложениям», в которой описывалось приложение под названием Ajax (технология асинхронного JavaScript+XML). Этот метод предполагает отправку серверу запроса на дополнительные данные без обновления страницы, что повышает удобство работы пользователя. Гарретт объясняет, как эта технология меняет традиционную модель «нажми и подожди», которая существовала с момента появления Интернета.
Ключевой технологией, которая вывела Ajax на историческую сцену, является объект XMLHttpRequest (XHR). До появления XHR связь в стиле Ajax должна была обеспечиваться с помощью некоторой черной технологии, в основном с использованием скрытых или встроенных панелей. XHR предоставляет разумный интерфейс для отправки запросов к серверу и получения ответов. Этот интерфейс может получать дополнительные данные с сервера асинхронно, что означает, что пользователи могут получать данные без обновления страницы. После получения данных через объект XHR вы можете использовать методы DOM для вставки данных на веб-страницу.
API-интерфейс объекта XHR обычно считается сложным в использовании, и API-интерфейс Fetch быстро стал более современной альтернативой стандарту XHR после его автоматического создания. API-интерфейс Fetch поддерживает запланированные обещания и потоки обслуживания (сервис-воркеры) и стал чрезвычайно мощной сетью. инструмент разработки.
Основным ограничением связи Ajax через XHR является политика безопасности между источниками. По умолчанию XHR может получить доступ только к ресурсам в том же домене, что и страница, инициировавшая запрос. Это ограничение безопасности предотвращает определенное вредоносное поведение. Однако браузеры также должны поддерживать легальный доступ из разных источников.
Совместное использование ресурсов между источниками (CORS) определяет, как браузеры и серверы реализуют связь между источниками. Основная идея CORS заключается в использовании пользовательских заголовков HTTP, позволяющих браузеру и серверу понимать друг друга и определять, должен ли запрос или ответ быть успешным или неудачным.
Для простых запросов, таких как запросы GET или POST, пользовательские заголовки отсутствуют, а тело запроса имеет тип text/plain. Такие запросы при отправке будут иметь дополнительный заголовок Origin. Заголовок Origin содержит источник (протокол, доменное имя, порт) страницы, отправляющей запрос, чтобы сервер мог определить, предоставлять ли на него ответ.
Современные браузеры изначально поддерживают CORS через объект XMLHttpRequst, который автоматически запускается при попытке доступа к ресурсам из разных источников. Чтобы отправить запрос источнику в другом домене, вы можете использовать стандартный объект XHR и передать абсолютный URL-адрес методу open(), например:
let xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){
если (xhr.readyState == 4) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
оповещение (xhr.reaponseText);
}еще{
alert("Запрос не удался:"+xhr.status);
}
}};xhr.open("get","http://www.nezha.con/page/",true);xhr.send(null); Междоменные объекты XHR предоставляют доступ к свойствам status и statusText, а также также разрешить синхронизацию Запросы, которые междоменные объекты XHR также налагают некоторые дополнительные ограничения по соображениям безопасности.
Вы не можете использовать setRequestHeader() для установки пользовательских заголовков;
вы не можете отправлять и получать файлы cookie;
метод getAllResponseHeaders() всегда возвращает пустую строку,
поскольку один и тот же интерфейс используется как для однодоменных, так и для междоменных запросов. доступ к локальным ресурсам. Используйте относительные URL-адреса и абсолютные URL-адреса при доступе к удаленным ресурсам. Это позволяет более четко различать сценарии использования и избежать проблемы ограничения доступа к информации заголовка или файлов cookie при доступе к локальным ресурсам.
CORS использует механизм проверки сервера, называемый предполетным запросом, позволяющий использовать настраиваемые заголовки, методы, отличные от GET и POST, а также различные типы содержимого тела запроса. При отправке запроса с использованием одного из вышеперечисленных расширенных параметров на сервер сначала отправляется предполетный запрос. Этот запрос отправляется с использованием метода OPTIONS и содержит следующие заголовки:
Origin: то же, что и простой запрос:
метод Access-Control-Request
-Headers: (необязательно) запятая
-разделенные значения для использования пользовательского списка заголовков.
API-интерфейс Fetch может выполнять все задачи объекта XMLHttpRequest, но его проще использовать, интерфейс более современный и может использоваться в таких веб-инструментах, как Рабочие веб-потоки. XMLHttpRequest может быть асинхронным, тогда как Fetch API должен быть асинхронным.
Метод fetch() доступен в глобальной области видимости, включая поток выполнения главной страницы, модули и рабочие потоки. Вызов этого метода заставляет браузер отправлять запрос на указанный URL-адрес.
1. Запрос на отправку
fetch() имеет только один обязательный входной параметр. В большинстве случаев этот параметр представляет собой URL-адрес для получения ресурса, и этот метод возвращает обещание:
let r = fetch('/bar');console.log(r);//Promise<pending> Формат URL-адреса (относительный путь , абсолютные пути и т. д.) интерпретируются так же, как объекты XHR.
Когда запрос будет завершен и ресурсы станут доступны, будет обработан объект Response. Этот объект представляет собой инкапсуляцию API, через который можно получить соответствующие ресурсы. Используйте свойства и методы этого объекта, чтобы получить ресурсы, понять ответ и преобразовать балансировку нагрузки в полезную форму.
2. Прочитайте ответ. Самый простой способ прочитать содержимое ответа — получить его в текстовом формате, просто используя метод text(). Этот метод возвращает обещание, которое позволяет получить полное содержимое ресурса.
3. Обработка кодов состояния и ошибок запросов
API Fetch поддерживает проверку статуса ответа с помощью свойств status и statusText Response. Запросы, на которые успешно получен ответ, обычно выдают код состояния со значением 200.
4. Общие режимы запроса выборки:
отправка данных JSON,
отправка параметров в теле запроса,
отправка файлов
, загрузка файлов Blob
, отправка междоменных запросов,
запросы прерываний.
Сокет веб-сокета. Целью веб-сокета является достижение полнодуплексного и двух-дуплексного режима. способ связи с сервером посредством долговременного соединения. При создании веб-сокета в JavaScript на сервер отправляется HTTP-запрос для инициализации соединения. После ответа сервера соединение переключается с протокола HTTP на протокол веб-сокета с использованием заголовка Upgrade в HTTP. Это означает, что веб-сокет не может быть реализован через стандартный HTTP-сервер, а должен использовать собственный сервер, поддерживающий этот протокол.
Поскольку веб-сокет использует собственный протокол, схема URL-адресов немного изменилась: http:// или https:// больше нельзя использовать, но необходимо использовать ws:// и wss://. Первое — это небезопасное соединение, а второе — безопасное соединение. При выполнении URL-адресов веб-сокетов необходимо включать схему URL-адресов, поскольку в будущем могут поддерживаться дополнительные схемы.
Преимущество использования специального протокола вместо протокола HTTP заключается в том, что клиент и сервер могут отправлять очень мало данных, не создавая при этом никакой нагрузки на HTTP. Использование меньших пакетов данных делает веб-сокеты идеальными для мобильных приложений, где значительные проблемы с пропускной способностью и задержкой. Недостаток использования специального протокола заключается в том, что определение протокола занимает больше времени, чем определение API JavaScript. Websocket поддерживается всеми основными браузерами.
