HTTP na Webu

73. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Jaké tagy patří do základní struktury HTML?
Jak fungují základní argumenty v JS?
Uloží se data ve Vuex, když se znova přenačte stránka?
Čím se liší veřejné a neveřejné vlastnosti / metody?
K čemu slouží filter na poli v JS?

Opakování

  • HTTP
    • požadavky: metody
    • odpovědi: status kódy
  • API
  • backend
  • CRUD
  • formáty dat

Jak odešleme HTTP požadavek v JS?

Správa obsahu

Práce

Zkusme navrhnout API (endpointy), které slouží ke správě obsahu na webových stránkách. Tedy: příspěvky, uživatele, komentáře a další.

E-shop

Práce

Zkusme navrhnout API (endpointy), které slouží ke správě obchodu (bez administrace), tedy: předměty, přihlášení, košík, objednávka a další.

AJAX

  • = Asynchronous JavaScript And XML
  • dovoluje nám vytvářet dynamické stránky
  • prakticky získáváme údaje pro stránku v kódu
  • není nutné refreshovat stránku
  • odesílání dat na server

Jak se liší aktuální přístup získávání stránek a AJAX?

Odesílání požadavků

  • požadavky odesíláme pomocí XMLHttpRequest
  • jsou to předpřipravené třídy určené k odesílání požadavků
  • jako v HTTP definujeme metodu, cíl, hlavičky a další

Ukázka XMLHttpRequest

Líbí se Vám tento postup?

Odesílání pomocí FetchAPI

  • modernější než XMLHttpRequest
  • CanIUse Fetch
  • zcela využívá Promises

Ukázka Fetch

Jak Fetch dokázal přečíst string JSONu do objektů?

  • v JS máme k dispozici třídu JSON
  • dovoluje převádět JSON ⟷ string
  • JSON.stringify(obj)
  • JSON.parse(str)

Ukázka JSON

Jaký problém by mohl nastat, když můžeme v JS posílat požadavky?

CORS

  • = Cross-origin resource sharing
  • mechanismus zabezpečení webové stránky
  • každý server si může říct, jaké domény mají k datům přístup
  • prohlížeč potom tyto nastavení kontroluje

CORS hlavičky

  • Access-Control-Allow-Origin: https://cajthaml.eu
  • Access-Control-Allow-Origin: *
  • odesílá server např. při požadavku OPTIONS

Je možné v ACAO hlavičce nastavit více domén?

Nástroje pro HTTP

  • někdy potřebujeme dělat HTTP requesty i jiny než v kódu
  • existují různé nastroje:

Morsmordre

Práce

https://morsmordre.cajthaml.eu

Splňte cíle API — projděte veškeré endpointy a podívejte, se co vracejí a odpovězte na otázky. Svojí práci pomocí daného API odevzdejte.

Klíč k přihlášení naleznete v portálu.

  • (question_1) Je API RESTful? Zdůvodněte.
  • (question_2) Kolik endpointů má API?
  • (question_3) Jak API pozná, že jste přihlášen?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/