Бързо опресняване на AJAX и свързаните с него концепции

Синхронни срещу асинхронни операции

Синхронен / Сериен

Изчакайте, докато нещо завърши, преди да направите следващото нещо.

Асинхронен

Започнете няколко неща наведнъж и се погрижете за всяко, когато е готово.

Функции за обратно извикване

Функцията за обратно извикване се използва често за асинхронни операции. Операцията - която може да отнеме известно време - изпълнява функцията за обратно извикване, когато приключи.

В примера по-долу setTimeout приема обратно извикване като параметър, за да посочи какво се случва, когато таймерът изгасне.

setTimeout(hey, 2000)
function hey() {
   alert("hey");
}

Основи на AJAX

  • Съкращение за асинхронен JavaScript и XML
  • Извлича данни асинхронно от уеб сървър, без да е необходимо да опреснявате или презареждате страницата
  • Работи с всяка част от данните, когато е готова
  • Изпраща данни във фонов режим, без да е необходимо да чака отговор

Концептуален изглед

XMLHTTPRequest

  • XMLHTTPRequest обектите се използват за взаимодействие със сървъри.
  • Може да се използва за извличане на данни от URL, без да се налага пълно опресняване на страницата. След това уеб страницата може да актуализира само част от страница, без да прекъсва това, което потребителят прави.
  • Използва се силно в програмирането на AJAX.

Ключови компоненти на XMLHTTPRequest

  • readystate → Свойство, което има стойност между 0 до 4, за да посочи състоянието на заявка.
  • onreadystatechange → Събитие, което се задейства, когато има промяна в стойността на readystate.
  • open() & send() → Методи, които настройват и след това изпращат заявката.
  • Самите данни обикновено са във формат JSON или XML.


JSON Refresher
Бързо опресняване на JSON концепцииmedium.com



Readystate Стойности

  • 0 — Неизпратено → open() не е извикано
  • 1 — Отворен → send() все още не е извикан
  • 2 — Получени заглавия → извикване на send() и open().
  • 3 — Зареждане → Данните се получават
  • 4 — Готово → Операцията е завършена

Общи кодове за HTTP състояние

  • 200 rus → Успех
  • 201 → Ресурсът е създаден
  • 204 → Заявката е успешна, но не са получени данни
  • 404 rus → Страницата не е намерена

Параметри Open().

  • Публикувай или получавай
  • Адрес на файла за обработка на сървъра (относителен път)
  • Boolean — това трябва ли да бъде изпратено асинхронно (обикновено вярно)

Параметри Send().

  • Изпратете заявката, може да бъде JSON низ или в други формати

Създаване на XMLHTTPRequest

var req = new XMLHttpRequest();
req.open("POST","data.php",true);
req.send("id:101"); // Uses a JSON string

Пример

function requestData() {
   var reqObj = new XMLHTTPRequest();
   if (!reqObj) 
      {alert("Unable to create HTTP Request object"); return;}
   data = "id:101"; 
   reqObj.onreadystatechange = getMyData();
   reqObj.open("POST", "getData.php", true);
   reqObj.send(data);
}
function getMyData() {
   if (this.readyState==4 && this.status==200){
      var data = this.responseText;
      var info = JSON.parse(data);
      for(i in info) {
         document.write(i + ":" + info[i]);
      }
   }
}

Споделяне на заявки от различни източници (CORS)

  • Политика за сигурност, която се прилага, когато вашият браузър извлича активи за уеб страница като шрифтове, изображения и скриптове.
  • Cross-Origin означава, че заявката идва от друг домейн – дори HTTP срещу HTTPS се считат за различни.
  • Сървърът ще посочи какво може да получи достъп и как те получават достъп.
  • Политиките за сигурност минимизират рисковете, свързани с кода, който може да хакне браузър, като изтегляне на злонамерен код, отвличане на браузъра или добавяне на нежелани добавки.

Работа с API

  • API или интерфейс за програмиране на приложения може да се отнася до специализирана функционалност, която съществува на уеб сървър.
  • API позволява на организацията да предостави достъп до своите данни, без да компрометира данните си.
  • Често API може да бъде достъпен с AJAX.
  • Може да се нуждаете от API ключ за достъп до данните.
// Example of getting city data for a zip code
var req = new XMLHttpRequest();
req.open("GET,"http://api.zippopotam.us/us/02145",true);
req.onreadystatechange = function() {
   if(req.readyState ==4) {
      console.log(req.responseText); 
   }
};
req.send();

Пощальон

Postman е уеб приложение, което помага да се тества API извикване без необходимост от кодиране.

Колекция пощальон е JSON обект, който описва правилните параметри за извикване на API.

Достъп до API с REST

  • REST означава Прехвърляне на представително състояние
  • Създаден е от Рой Филдинг през 2000 г
  • Друг вариант за прилагане на асинхронен достъп
  • Когато се извика RESTful API, той прехвърля представяне на състоянието на искания ресурс към клиента - обикновено в JSON


Поредица от интервюта за Java: REST API
Основни въпроси и концепции за подготовка за уеб услуги на RESTfulmedium.com



Асинхронни повиквания с помощта на обещание

  • Обещаниее контейнер за резултата от асинхронна операция
  • Обещанията често ще се използват с API
  • Обещанията могат да бъдат разрешени успешно или неуспешно
new Promise (resolve, reject) => {
   // api call here
   // uses the resolve and reject function on success / failure of the call
}

Пример

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

извличане ()

Функцията fetch() консолидира много от общите елементи на XMLHttpRequest.

res = fetch("http://secretcheese.com/demo/location.json")
.then(res => res.text()); 
.then(data => console.log(data)); 
.catch(error => console.log(error));
// Using fetch() with an API
res = fetch("http://secretcheese.com/demo/location.json")
.then(res => res.text()); 
.then(data => {
   data.JSON.parse(data);
   data = data.current.temp;
   console.log("the current temperature is " + data + "degrees")
}); 
.catch(error => console.log(error));

Асинхронен / Изчакване

Понякога редът на операциите е критичен при асинхронно повикване. С други думи, въпреки че процесът е асинхронен, все пак е важно някои операции да са завършени преди други да бъдат изпълнени.

Те често се използват заедно с обещания/API извиквания.

Пример

  • Проблем:Имате достъп до база данни. Опитвате се асинхронно да отворите базата данни. След това се опитвате да затворите базата данни, но тя все още не е отворена. Това ще доведе до грешка.
  • Решение: Изчакайте операцията(ите) на базата данни да бъдат завършени, преди да затворите базата данни.
  • Механизъм: изчакване

Изчакайте

  • Модификаторът за изчакване стои пред операция
  • Системата няма да продължи, докато операцията не приключи
  • await може да се използва само във функция, която има модификатора async
async function doSomething() {
   await thisCouldTakeAWhile();
   doMore(); // this will not happen until the await piece is done
}


Опресняване на JavaScript (JS) за React
Бързо опресняване на JS концепциите, необходими за изучаване и разбиране на Reactmedium.com



Повече съдържание в PlainEnglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter иLinkedIn. Присъединете се към нашата общност Discord.