Differences

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

--- tanszek:oktatas:web_technologia_alapjai:http [2025/03/17 12:59] – [HTTP kérések feldolgozása JavaScript segítségével] kissa
+++ tanszek: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.
+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 ====
 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 104: / Line 105: @@
 //[[https://tools.ietf.org/html/rfc2616#section-10|(Elérhető státuszkódok)]]//
+===== Példa - JSONPlaceholder API =====
+A [[https://jsonplaceholder.typicode.com/|JSONPlaceholder]] egy ingyenes, nyilvánosan elérhető API, amelyet elsősorban kezdő webfejlesztők használnak HTTP API-k tesztelésére és gyakorlására. Az API különböző adatokkal rendelkezik, például felhasználókkal, bejegyzésekkel, kommentekkel és egyéb információkkal, amelyeket HTTP kérésekkel kérhetünk le vagy módosíthatunk.
+  * **Ingyenes**: Bármikor használhatjuk, nem szükséges regisztráció vagy autentikáció.
+  * **Fiktív adatok**: Az API-ban szereplő adatok nem valódiak, hanem példák, amelyek segítenek a fejlesztőknek a gyakorlásban.
+  * **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 küldésére és válaszok fogadására számos módszer áll rendelkezésre, amelyek az egyszerű parancssori alkalmazásoktól (pl. curl, wget) kezdve a grafikus felülettel rendelkező eszközökön (pl. webböngészők, Postman) át a programozói könyvtárakig (pl. Fetch API, Axios, OkHttp) terjednek. Míg a programkönyvtárakat általában webalkalmazások fejlesztésére használjuk, addig a parancssori eszközök és a GUI-val rendelkező alkalmazások elsősorban tesztelési célokat szolgálnak, lehetővé téve a HTTP kérések gyors ellenőrzését és elemzését.
+HTTP kérések küldésére és válaszok fogadására számos módszer áll rendelkezésre, amelyek az egyszerű parancssori alkalmazásoktól (pl. curl, wget) kezdve a grafikus felülettel rendelkező eszközökön (pl. webböngészők, Postman) át a programozói könyvtárakig (pl. Fetch API, Axios, OkHttp) terjednek.
+Míg a programkönyvtárakat általában webalkalmazások fejlesztésére használjuk, addig a parancssori eszközök és a GUI-val rendelkező alkalmazások elsősorban tesztelési célokat szolgálnak, lehetővé téve a HTTP kérések gyors ellenőrzését és elemzését.
 ==== Google Chrome ====
@@ Line 138: / Line 153: @@
   - Nyissunk új lapot a Postman-ben!
-  - Állítsuk be a POST HTTP metódust!
+  - Állítsuk be a ''POST'' HTTP metódust!
-  - Állítsuk be a hívott útvonalat: ''https://jsonplaceholder.typicode.com/posts''
+  - Állítsuk be a szükséges útvonalat: ''https://jsonplaceholder.typicode.com/posts''
   - A kérés törzsének beállításához váltsunk a Body fülre!
   - A kérés formátumának beállításához válasszuk a **raw** opciót!
@@ Line 160: / 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 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:
 <sxh javascript>
@@ Line 167: / Line 185: @@
   .catch(error => console.error("Hiba:", error));
 </sxh>
+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. 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:
 <sxh javascript>
@@ Line 176: / Line 202: @@
   body: JSON.stringify({ title: "Teszt", body: "Ez egy teszt.", userId: 1 })
 })
-.then(response => response.json())
+  .then(response => response.json())
-.then(data => console.log(data))
+  .then(data => console.log(data))
-.catch(error => console.error("Hiba:", error));
+  .catch(error => console.error("Hiba:", error));
 </sxh>
+A válasz kezelése ebben az esetben is a korábban ismertetett módon történik.