Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace:
tanszek:oktatas:web_technologia_alapjai:http

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tanszek:oktatas:web_technologia_alapjai:http [2025/03/17 13:14] – [Postman] kissatanszek:oktatas:web_technologia_alapjai:http [2025/04/05 12:17] (current) – [Feladat] kissa
Line 41: Line 41:
 A paraméterek ''név=érték'' formában adhatóak meg. A paramétereket az útvonaltól ''?'', egymástól ''&'' jel választja el. A paraméterek ''név=érték'' formában adhatóak meg. A paramétereket az útvonaltól ''?'', egymástól ''&'' jel választja el.
  
 +Amennyiben az értékek különleges (pl. ékezetes betűk) vagy foglalt karaktereket (pl. perjel, kérdőjel) tartalmazhatnak, [[https://www.w3schools.com/tags/ref_urlencode.ASP|URL kódolást]] szükséges alkalmazni. Ez az [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent|encodeURIComponent()]] függvénnyel könnyen elvégezhető.
 ==== Path paraméterek ==== ==== Path paraméterek ====
 A HTTP szabványnak ugyan nem része, de a szerverek gyakran támogatják a paraméterek átadását a megjelölt útvonal részeként: A HTTP szabványnak ugyan nem része, de a szerverek gyakran támogatják a paraméterek átadását a megjelölt útvonal részeként:
Line 111: Line 112:
   * **Könnyen használható**: Az API-t könnyen elérhetjük GET, POST, PUT, DELETE HTTP kérésekkel.   * **Könnyen használható**: Az API-t könnyen elérhetjük GET, POST, PUT, DELETE HTTP kérésekkel.
  
 +A JSONPlaceholder API könnyen használható különböző eszközökkel, például:
 +
 +  * **Böngésző**: A GET kéréseket közvetlenül a böngésző címsorába írva is megnézheted.
 +  * **Postman**: A Postman segítségével POST, PUT, DELETE kéréseket is küldhetsz.
 +  * **Fetch API**: JavaScript segítségével lekérheted az adatokat és dolgozhatsz velük egy webalkalmazásban.
 ===== HTTP kérések feldolgozása fejlesztői eszközökkel ===== ===== HTTP kérések feldolgozása fejlesztői eszközökkel =====
  
Line 169: Line 175:
 A kész webalkalmazásban természetesen JavaScript kód segítségével szükséges összeállítani a szerver felé küldött HTTP kéréseket. Erre a célra egyebek mellett a [[https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API|Fetch API]] használható. A kész webalkalmazásban természetesen JavaScript kód segítségével szükséges összeállítani a szerver felé küldött HTTP kéréseket. Erre a célra egyebek mellett a [[https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API|Fetch API]] használható.
  
-A Fetch API a kéréseket aszinkron módon, [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise|Promise]]-ok segítségével kezeli, emiatt speciális szintaktikát kell használnunk, a ''then'' metódusnak sikeres kérés esetén lefutó függvényt, míg a ''catch'' metódusnak a hibakezelő függvényt szükséges paraméterként átadni.+A Fetch API a kéréseket aszinkron módon, [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise|Promise]]-ok segítségével kezeli, emiatt speciális szintaktikát kell használnunk! A ''then'' metódusnak a sikeres kérés esetén lefutó függvényt, míg a ''catch'' metódusnak a hibakezelő függvényt szükséges paraméterként átadni.
  
 A következő kód az 1-es azonosítójú bejegyzés tartalmát kérdezi le a szerverről: A következő kód az 1-es azonosítójú bejegyzés tartalmát kérdezi le a szerverről:
Line 182: Line 188:
 A szerver válaszát először JSON objektummá (bizonyos esetekben egyszerű szöveggé) szükséges konvertálni (2. sor), ezt követően elérhetők a válaszban szereplő adatok. A 3. sorban ezeket a konzolra íratjuk, de ehelyett akár a felhasználói felületen is megjeleníthetnénk, a DOM módosításával. A szerver válaszát először JSON objektummá (bizonyos esetekben egyszerű szöveggé) szükséges konvertálni (2. sor), ezt követően elérhetők a válaszban szereplő adatok. A 3. sorban ezeket a konzolra íratjuk, de ehelyett akár a felhasználói felületen is megjeleníthetnénk, a DOM módosításával.
  
-A hibakezelés a ''catch'' metódusban történik. Hiba akkor fordulhat elő, ha a szerver nem küld választ, vagy a válasz nem JSON formátumú.+A hibakezelés a ''catch'' metódusban történik. Ez akkor fordul elő, ha a szerver nem küld választ, vagy a válasz nem JSON formátumú. 
 + 
 +**FONTOS!** Ha a szerver explicit módon, hiba státuszkód küldésével válaszol, a kód végrehajtása a ''then'' ágban folytatódik. A művelet sikerességét a ''response.ok'', illetve ''response.status'' tulajdonságok segítségével ellenőriznünk kell (pl. hiba esetén felugró ablakot jeleníthet meg az alkalmazásunk)! Az egyszerűség kedvéért ettől a fenti példában eltekintettünk.
  
 Előző kérésünk egyszerű ''GET'' kérés volt, mely nem tartalmazott komplex adatokat. A következő kód ''POST'' kérés küldését mutatja be, új bejegyzés létrehozásához. Ebben az esetben a kérés ''Content-Type'' fejlécét is szükséges beállítanunk, jelezve a szervernek, hogy JSON formátumban küldjük a kérés törzsét. A törzset egyszerű szövegként szükséges elküldenünk, így a JavaScript objekumunkból a ''JSON.stringify'' függvény meghívásával JSON sztringet szükséges generálnunk: Előző kérésünk egyszerű ''GET'' kérés volt, mely nem tartalmazott komplex adatokat. A következő kód ''POST'' kérés küldését mutatja be, új bejegyzés létrehozásához. Ebben az esetben a kérés ''Content-Type'' fejlécét is szükséges beállítanunk, jelezve a szervernek, hogy JSON formátumban küldjük a kérés törzsét. A törzset egyszerű szövegként szükséges elküldenünk, így a JavaScript objekumunkból a ''JSON.stringify'' függvény meghívásával JSON sztringet szükséges generálnunk:
Line 200: Line 208:
  
 A válasz kezelése ebben az esetben is a korábban ismertetett módon történik. A válasz kezelése ebben az esetben is a korábban ismertetett módon történik.
 +
 +
tanszek/oktatas/web_technologia_alapjai/http.1742217287.txt.gz · Last modified: 2025/03/17 13:14 by kissa