Obsah
AJAX Obsahuje sadu technik a technologií, které nám umožňují navázat asynchronní komunikaci mezi tím, co klient vidí na webu, a informacemi, které existují na serverové straně webové stránky.Jednou z hlavních charakteristik, které můžeme zdůraznit, je to, že závisí na různých metodách HTTP Co POST, GET, PUT nebo DELETE aby bylo možné odeslat potřebná data do aplikací na serveru.
V rané fázi vývoje s AJAX hovory musely být vytvořeny pomocí Javascript flat, což nám však generovalo spoustu kódu jQuery nám pomáhá věci zjednodušit zavedením této techniky a technologií mezi masy, a to vše ve prospěch vývojáře i uživatele.
Co je AJAX?AJAX odpovídá Asynchronní Javascript a XML a to Javascript Y XML asynchronní, což také znamená, že je to něco, co nezávisí na pevné struktuře, jako je skript PHP kde jsou instrukce prováděny postupně, samozřejmě ukládání volání metod a funkcí tříd a objektů.
Výše uvedené vysvětlení nám dává možnost načíst informace nebo je odeslat bez nutnosti znovu načíst nebo provést „úplný“ požadavek na server, dáváme je do uvozovek, protože volání AJAX Jsou to běžné požadavky, jednoduše není nutné stránku aktualizovat celou, pokud to není požadované chování.
Používání těchto technik a technologií představuje některé výhody, které si mnozí neuvědomují o své existenci, mnohokrát ji používáme pouze pro záležitost trendu, ale pokud porozumíme jejím výhodám, budeme schopni vědět, na které projekty ji můžeme aplikovat, abychom získali nejvíc z toho. Podívejme se níže na některé z nejdůležitějších výhod používání AJAX:
Snížení využití šířky pásmaToho docílíme zejména díky požadavkům sekcí, čímž docílíme například toho, že nebudeme muset znovu načítat obecné styly nebo obrázky, pokud chceme obnovit text.
Lepší uživatelské prostředíZvýšením rychlosti webové aplikace má uživatel znatelné zlepšení v používání, navíc nám jako vývojářům dává příležitost zvýšit míru interakce s prvky, které jsme uspořádali.
Odstranit závislost prohlížečePři použití jQuery odpadá potřeba psát kód, který je závislý na prohlížeči, což nám pomáhá zlepšit rychlost vývoje a produktivitu naší doby.
Protože při používání není nic dokonalé AJAX Musíme také pochopit, že existují určité nevýhody, které nás mohou přimět přemýšlet a přemýšlet o tom, zda je to nejlepší volba pro náš projekt. Dále uvidíme některé z těchto bodů, abychom měli úplnější obrázek před spuštěním technické části tutoriálu.
ZávislostPokud klient nebo uživatel používá velmi starý prohlížeč nebo používá Javascript deaktivována, naše aplikace může trpět nebo nemusí fungovat, což nám dává povinnost vytvářet speciální případy, kdy ji nemůžeme používat AJAX.
Napište další kódPodle naší aplikace musíme napsat další kód, abychom mohli integrovat odpovědi, které získáváme z požadavků AJAX, například odpovědi, které přicházejí s HTML Y CSS.
V současné době je samozřejmě velmi obtížné najít prohlížeč, se kterým není kompatibilní Javascript Y jQueryV závislosti na naší oblasti však můžeme najít některé případy, které mohou velmi zkomplikovat život.
Žádost AJAX z jQuery musí mít základní strukturu, kde musíme stanovit některé parametry nezbytné pro rámec, musíme stanovit metodu HTTP žádosti, trasu, na kterou bude žádost podána, formát odpovědi a nakonec, co je třeba udělat v případě, že je žádost úspěšná nebo dojde k chybě. Podívejme se v následujícím nefunkčním kódu, jak to můžeme vidět:
$ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: / / www.example.com/request dataType: "Type of data", / / html, xml, json success: funkce při úspěchu, chyba: funkce při chybě}); Vidíme, že každá z částí, které jsme popsali, jsou parametry, které náš požadavek obdrží a že se to provádí pomocí metody $ .ajax () který dodává jQuery přímo, a je to maska pro kód Javascript letadlo, které odpovídá každému enginu každého podporovaného prohlížeče, což jsou v tuto chvíli téměř všechny nejnovější reklamy jako např Chrome, Firefox, Opera, Safari Internet Explorer, a ty odvozené z motorů těchto, které jsme zmínili.
Nyní při zadávání žádosti uvedeme do praxe to, co jsme viděli v předchozí části AJAX ze stránky HTML které budeme stavět v následujícím příkladu. Musíme vědět, že budeme vyžadovat nejaktuálnější verzi jQuery můžeme získat, ale můžeme použít ten, který ukládají do svých CDN, budeme také potřebovat malý webový server, abychom mohli asynchronně směrovat soubory, které se chystáme získat, k tomu můžeme použít WAMP v Oknanebo instalace SVÍTILNA v systémech Linux, pokud jde o platformy MAC, které můžeme použít XAMP nebo podobné.
V následujícím kódu zahrneme jako první jQuery, pak v těle vytvoříme štítek s jedinečným ID, kam umístíme obsah odpovědi na náš požadavek a poblíž konce dokumentu uděláme štítek skript kde vygenerujeme kód pro podání požadavku v atributu url uděláme požadavek na index složky, kde jsou umístěny naše soubory, uděláme to, abychom ukázali fungování našeho kódu, ale způsob, jak to udělat, je požádat o jiný soubor, který bude sloužit potřebnou odpověď, pojďme viz kód:
Příklad požadavku AJAXProces AJAX
Na následujícím obrázku vidíme, jak vše fungovalo, kde můžeme vidět úspěšnou odpověď z našeho kódu.
Jedna z věcí, které jQuery chce, abychom neztráceli čas a kódováním věcí na dlouhou cestu, proto nám nabízí zkratky pro hovory AJAX nejběžnější metody jako např DOSTAT Y POŠTA, takže pomocí zástupce uložíme několik řádků kódu a tím můžeme snížit hmotnost naší aplikace.
K tomu v oficiální dokumentaci jQuery Máme všechny existující případy, nicméně předchozí příklad předěláme pomocí v tomto případě zkratky, ale než uvidíme funkční kód, podívejme se na nefunkční příklad:
$ .get (cesta, data, SuccessFunction, ResponseType);
Jak jsme si všimli, toto volání je mnohem menší, což nám pomáhá mít čistší a lehčí kód. Nyní, když to použijeme na náš předchozí příklad, bude to následující:
Příklad požadavku AJAXProces AJAX
Vidíme, že počet řádků a znaků byl výrazně snížen, což by zlepšilo náš přenos dat použitím nižší šířky pásma. Pokud spustíme vše v prohlížeči, dalo by nám to následující odpověď:
