Правене на HTTP заявки в JavaScript: Изследване на XMLHttpRequest и Fetch API

Въведение

Решаваща необходимост от уеб разработката е способността за взаимодействие със сървъри и получаване на данни. Заявките, направени чрез HTTP (протокол за прехвърляне на хипертекст), са от значение тук. Динамичните и интерактивни уеб преживявания са възможни чрез HTTP заявки, които позволяват обмен на данни между клиент (като уеб браузър) и сървър.

Обработката от страна на клиента на HTTP заявки е значително подпомогната от JavaScript, гъвкав и популярен език за програмиране. С JavaScript програмистите могат да стартират HTTP заявки, да изпращат информация до сървъри и да оценяват резултатите в реално време, всичко това в уеб браузър. Благодарение на тази функционалност разработчиците вече могат да проектират интерактивни уеб приложения, да получават данни в реално време и да се интегрират с външни API.

Има множество налични опции при използване на JavaScript за изпращане на HTTP заявки, включително:

Извличане на данни от отдалечени сървъри: JavaScript позволява извличане на данни от външни източници, като извличане на потребителска информация от RESTful API, извличане на най-новите новинарски заглавия или запитване към база данни за конкретни записи.
Изграждане на интерактивни уеб приложения: Със силата на JavaScript разработчиците могат да създават приложения, които реагират на действията на потребителите в реално време, без необходимост от пълно презареждане на страницата. Това позволява безпроблемно и ангажиращо потребителско изживяване.
Интегриране с услуги и API на трети страни: Много уеб приложения разчитат на интегриране с външни услуги или API, за да предоставят допълнителна функционалност. Способността на JavaScript да прави HTTP заявки улеснява тези интеграции, позволявайки на разработчиците да използват услуги като шлюзове за плащане, платформи за социални медии или услуги за картографиране.
Изпращане на данни към сървъри: В допълнение към извличането на данни, JavaScript позволява изпращане на данни към сървъри. Това е особено полезно при изпращане на формуляри, изпращане на генерирано от потребителите съдържание или актуализиране на ресурси от страна на сървъра.

Вградените функции и библиотеки на JavaScript, съчетани с модерната среда на уеб браузър, предоставят на разработчиците надеждни инструменти за обработка на HTTP заявки без усилие. Независимо дали става въпрос за извличане на данни, взаимодействие с API или изграждане на динамични уеб приложения, способността на JavaScript да обработва HTTP заявки е мощен актив за уеб разработчиците.

В следващите раздели ще разгледаме два често използвани метода в JavaScript за правене на HTTP заявки: XMLHttpRequest и по-новия Fetch API. Тези методи позволяват на разработчиците да инициират HTTP заявки, да обработват отговори и да създават динамични и интерактивни уеб преживявания.

XMLHttpRequest

А. Общ преглед на XMLHttpRequest

Обектът XMLHttpRequest е вградена функция в JavaScript, която предоставя лесен начин за правене на асинхронни HTTP заявки от уеб браузър. Тя ви позволява да комуникирате със сървъри, да изпращате данни и да извличате отговори, без да се налага пълно презареждане на страницата. XMLHttpRequest се поддържа широко от съвременните уеб браузъри и се използва широко в по-стари проекти.

Б. Стъпки за извършване на HTTP заявка с XMLHttpRequest

Създаване на екземпляр на XMLHttpRequest:

За да използвате XMLHttpRequest, трябва да създадете негов екземпляр, като извикате конструктора с thenewkeyword.

Отваряне на заявката:

След като създадете обекта XMLHttpRequest, трябва да отворите заявката, като посочите HTTP метода (напр. GET, POST) и URL адреса на сървъра, с който искате да комуникирате.

Обработка на отговора:

XMLHttpRequest предоставя няколко манипулатора на събития за обработка на различни етапи на заявката. Най-често използваното събитие е onreadystatechange, което се активира, когато състоянието на заявката се промени. Можете да проверите свойството readyState, за да определите текущото състояние, и status, за да проверите HTTP кода на състоянието на отговора.

Изпращане на заявката:

След като отворите заявката и настроите манипулаторите на събития, можете да изпратите заявката до сървъра, като използвате метода send(). За GET заявки не е необходимо да изпращате никакви данни, но за POST заявки можете да включите данни в метода send().

Обработка на грешки:

Важно е да се справят с грешки, които могат да възникнат по време на заявката. Можете да проверите свойството status на обекта XMLHttpRequest, за да определите дали заявката е била успешна (код на състояние 200) или е възникнала грешка.

В. Пример за код, демонстриращ използването на XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

В този пример създаваме XMLHttpRequest обект, отваряме GET заявка към „https://api.example.com/data“ и настройваме манипулатор на събития „onreadystatechange“, който да обработва отговора. Ако заявката е успешна (‘readyState’ е 4 и ‘status’ е 200), анализираме JSON отговора и го записваме в конзолата.

API за извличане

А. Въведение в Fetch API

Fetch API е модерна и по-мощна алтернатива на XMLHttpRequest за правене на HTTP заявки в JavaScript. Той осигурява по-прост и по-гъвкав синтаксис, поддържа Promises и позволява по-ефективно обработване на заявки и отговори. Fetch API може да обработва различни видове заявки, включително GET, POST, PUT, DELETE и други.

Едно значително предимство на Fetch API пред XMLHttpRequest е неговата вградена поддръжка за Promises, която опростява асинхронните операции и осигурява по-чист синтаксис на кода. Освен това Fetch API ви позволява да работите директно с обекта „Отговор“, което улеснява обработката и обработката на различни типове отговори, включително JSON, текстови и двоични данни.

По отношение на поддръжката на браузъра, Fetch API се поддържа в повечето съвременни браузъри, но може да не е наличен в по-стари браузъри. За да осигурите съвместимост, можете да използвате polyfill или библиотека като „fetch“, за да осигурите поддръжка за по-стари браузъри.

В следващия раздел ще проучим стъпките, включени в правенето на HTTP заявка с помощта на Fetch API, като ще подчертаем предимствата му и ще демонстрираме използването му чрез примери на код.

Б. Стъпки за извършване на HTTP заявка с fetch()

Използване на функцията fetch(): За да инициирате HTTP заявка с помощта на Fetch API, можете просто да извикате функцията fetch() и да предоставите URL адреса, който искате да извлечете, като неин параметър. Това връща Promise, което разрешава отговора.
Обработка на отговора: След като Promise се разреши, можете да обработвате отговора, като използвате методи като json() за анализиране на отговора като JSON, text() за извличане на отговора като обикновен текст или blob() за обработка на двоични данни. Тези методи връщат Promises, позволявайки по-нататъшно верижно свързване или обработка на данните за отговор.
Разбор на данните за отговора: В зависимост от типа на отговора можете да използвате подходящи методи за анализ на данните за отговора. Например, ако отговорът е във формат JSON, можете да използвате response.json(), за да го анализирате в JavaScript обект. По подобен начин response.text() може да се използва за извличане на отговора като обикновен текст.
Обработка на грешки с обещания: Fetch API обработва грешки, като отхвърля обещанието, ако заявката е неуспешна (напр. мрежова грешка, грешка на сървъра). Можете да използвате .catch() или try...catch, за да се справите с такива грешки и да предприемете подходящи действия.

В. Пример за код, демонстриращ използването на fetch():

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Request failed with status: ' + response.status);
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

В този пример използваме fetch(), за да изпратим GET заявка до 'https://api.example.com/data'. Отговорът се обработва с помощта на Promises: ако отговорът има успешен код на състоянието (в диапазона 200-299), ние анализираме отговора като JSON с помощта на response.json() и го записваме в конзолата. Ако възникне грешка или отговорът има неуспешен код на състояние, се извежда грешка и се регистрира в конзолата.

Сравнение и най-добри практики

XMLHttpRequest и Fetch API могат да правят HTTP заявки в JavaScript, но имат забележителни разлики:

Прилики:

И двете позволяват отправяне на HTTP заявки и обработка на отговорите асинхронно.
Те поддържат различни HTTP методи.
Заглавките могат да бъдат зададени и е възможно обработване на грешки.

Разлики:

Синтаксис и Promises: XMLHttpRequest използва базирани на събития обратни извиквания, докато fetch() използва Promises, което води до по-чист и по-четлив код с fetch().
Обработка на отговорите: Fetch API предоставя Response обект, който предлага повече функции и гъвкавост за работа с отговори в сравнение с XMLHttpRequest.
Заявки от различен произход: XMLHttpRequest изисква допълнителна конфигурация за заявки от друг произход, докато fetch() следва протокола CORS по подразбиране.
Поддръжка на браузър: XMLHttpRequest има по-добра поддръжка в по-стари браузъри, докато fetch() е по-модерен и широко поддържан в съвременните браузъри.

Най-добри практики за правене на HTTP заявки в JavaScript

Избор на подходящия метод въз основа на изискванията на проекта: Вземете предвид нуждите на проекта, целевата съвместимост на браузъра и предпочитания стил на кодиране, когато решавате между XMLHttpRequest и fetch().
Работа с различни типове отговори (JSON, текст и т.н.): Разберете формата на отговора и използвайте подходящи методи (response.json(), response.text() и т.н.), за да анализирате и обработите съответно данните за отговора.
Стратегии за обработка на грешки и резервни варианти: Внедрете надеждна обработка на грешки чрез проверка на кодовете за състояние на отговора, мрежови грешки и грешки на сървъра. Обмислете резервни стратегии или алтернативни методи в случай на неуспешна заявка.

Като вземете предвид тези най-добри практики и разберете приликите и разликите между XMLHttpRequest и fetch(), можете ефективно да обработвате HTTP заявки в JavaScript и да осигурите надеждна и ефективна комуникация със сървърите.

Заключение

В тази статия изследвахме Fetch API като мощен инструмент за правене на HTTP заявки в JavaScript. Обсъдихме неговите предимства пред XMLHttpRequest, включително използването на Promises, рационализиран синтаксис и поддръжка за различни типове заявки. Предоставихме също инструкции стъпка по стъпка и примерен код, демонстриращ как да направите HTTP заявка с помощта на fetch(). Освен това сравнихме XMLHttpRequest и fetch(), подчертавайки техните разлики и прилики. Накрая обсъдихме най-добрите практики за обработка на HTTP заявки, като подчертахме важността на избора на подходящия метод, обработката на форматите на отговора и прилагането на стратегии за обработка на грешки.

Със солидно разбиране на Fetch API и използването му в JavaScript, можете ефективно да извличате данни, да взаимодействате с API и да създавате динамични уеб приложения, които предоставят изключителни потребителски изживявания.

Препратки

Ръководство за JavaScript HTTP заявки
В този урок ще научите различните начини, по които можете да правите HTTP заявки към отдалечени сървъри и да извършвате CRUD... kinsta.com

Bug Zeroеbug bounty, краудсорсинг платформа за тестване на сигурността. Платформата е посредническа единица, която позволява на клиентските организации да публикуват своите крайни точки на услугата, така че ловците на грешки (изследователи на сигурността / етични хакери), регистрирани в платформата, да могат да започнат да тестват крайните точки без предварителна такса. Ловците на грешки могат да започнат да тестват веднага щом клиентска организация публикува нова програма. Bug Zero предлага и частни програми за награди за грешки за организации с високи изисквания за сигурност.

Bug Zeroсе предлага както за хакери, така и за организации.

За организациии хакери,регистрирайте се с Bug Zero безплатно и нека направим киберпространството безопасно.