9. előadás Flashcards
(12 cards)
MI AZ AJAX?
AJAX = Asynchronous JavaScript and XML
Egy webfejlesztési technológia, mely lehetővé teszi, hogy a weblap újratöltése nélkül kommunikáljunk a szerverrel.
AJAX célja
- Információcsere a kliens (böngésző) és a szerver között teljes oldalfrissítés nélkül
- Gyorsabb felhasználói élmény
- Kevesebb szerverterhelés
AJAX működése
Kommunikáció típusa:
Aszinkron (nem blokkolja a felhasználót)
Szemben a szinkron működéssel, ahol a kliens megvárja a szerver válaszát, itt a kliens közben tovább dolgozik.
AJAX alapja
Alapja: XMLHttpRequest objektum
Ez egy JavaScript objektum, ami lehetővé teszi:
HTTP-kérések küldését a szerver felé
Válasz fogadását
Kérés paramétereinek beállítását
AJAX MEGVALÓSÍTÁSA JAVASCRIPT SEGÍTSÉGÉVEL
Get vagy Post A két adatátadási módszer meghívása minimálisan tér el egymástól.
Mindkét esetben létre kell hoznunk egy új XMLHttpRequest nevű objektumot kliens oldalon JavaScriptből, majd ezt kell konfigurálnunk az open metóduson keresztül.
xmlhttp = new XMLHttpRequest();
AZ OPEN METÓDUS
- open() metódus
A open() metódussal állítjuk be a kérés paramétereit. Ez három dolgot vár:
Az adatküldés típusa – legtöbbször ez GET (de lehet POST is).
A cél URL – vagyis melyik szerveroldali programnak küldjük az adatot. Ez lehet pl. PHP, ASP.NET vagy shell script.
Aszinkron mód – true, ha aszinkron kérést szeretnénk, ez jellemző az AJAX-ra.
A GET módszer esetén az elküldeni kívánt adatokat az URL-ben kell megadni, például így:
feldolgozo.php?nev=Anna&kor=20
Ezután hívjuk meg a send() metódust, hogy a kérés ténylegesen elküldésre kerüljön.
send() metódus
A send() küldi el a kérést a szerver felé. Ha GET módszert használunk, akkor az adatok már az URL részeként szerepelnek, így csak ezt kell hívni:
javascript
xhr.send();
A válasz figyelése – onreadystatechange
A szerver válaszát az onreadystatechange eseményen keresztül tudjuk figyelni. Ez az esemény minden alkalommal lefut, amikor a kérés állapota megváltozik. A kérés aktuális állapota a readyState nevű tulajdonságban tárolódik, ami 0 és 4 közötti érték lehet.
Akkor kell feldolgoznunk a választ, ha a readyState értéke 4 (vagyis a válasz teljesen megérkezett), és a status értéke 200 (vagyis sikeres volt a kérés).
JavaScript keretrendszerek
Egy JavaScript keretrendszer(framework) olyan szoftveres platform, amely előre elkészített kódkönyvtárakat (library) és eszközöket biztosít a fejlesztőknek webalkalmazások létrehozásához.
Miért érdemes JavaScript keretrendszert használni?
Gyorsabb fejlesztés
Beépített könyvtárak és eszközök révén kevesebb idő kell az alkalmazás elkészítéséhez.
Kevesebb kódolás
Sok előre elkészített függvény (pl. formák, események kezelése), így kevesebb saját kódra van szükség.
Megoldások rutinfeladatokra
Gyakori feladatokhoz (pl. űrlapvalidálás, AJAX, animációk) kész megoldásokat kínál.
Nagyobb biztonság
Beépített védelmek (XSS, CSRF ellen), kisebb sebezhetőség.
Helyes kódolási gyakorlatok
Strukturált mappaszerkezet, jól szervezett projekt.
Jobb csapatmunka
Egységes szabályok → könnyebb együttműködés több fejlesztő között.
TOP 3 JavaScript keretrendszer
🔴 Angular
Google fejlesztette, 2010-ben jelent meg.
TypeScript-alapú, teljes körű keretrendszer.
Az „Angular” név ma már az Angular 2+ verziókra utal.
🔵 React
Facebook fejlesztette, 2013 óta elérhető.
Könyvtár (library) UI komponensekhez.
Facebook és Instagram is ezt használja.
🟢 Vue
2014-ben készült, a Google egy volt fejlesztője által.
Egyszerű, tanulóbarát, de komoly projektekhez is alkalmas.
Népszerűsége folyamatosan nő.
Érdemes-e egy adott projektre keretrendszert használnunk?
ha pár sornyi kóddal meg tudunk oldani egy adott feladatot, akkor kár lenne külön keretrendszert használni
