# 16: Úvod do Ajaxu Triky CSS

Anonim

Ajax je na najvyšších priečkach z najväčších dôvodov, prečo používať jQuery. Nielenže jQuery opravuje problémy s rôznymi prehliadačmi, ale aj robí syntax veľmi ľahko použiteľnou a zrozumiteľnou.

V tomto videu bodneme a vysvetlíme, čo je Ajax vôbec. Pozeráme sa na prvok formulára, ktorý po odoslaní vykoná požiadavku GET alebo POST (podľa určenia atribútu method) na vami zadanú adresu URL (podľa určenia atribútu action). To je iba HTML, vôbec sa tam nedeje žiadny backendový kód alebo JavaScript. Toto zadanie ale spôsobí zmenu stránky, doslova nové načítanie na novú adresu URL, rovnako ako kliknutie na odkaz.

Ajax nám umožňuje vykonať túto požiadavku GET alebo POST na pozadí bez opätovného načítania stránky. V jadre to je celá podstata Ajaxu. A je veľmi silný. Nesie veľkú zodpovednosť za to, prečo moderné webové stránky fungujú a cítia sa tak, ako fungujú.

Ajax zvykol „zastupovať“ asynchrónny JavaScript a XML, ale dnes je to do veľkej miery ignorované, pretože to neznamená veľa. Preto tiež dekapitalizácia. Tiež by ste niekedy mohli vidieť „XHR“, čo je skratka pre XMLHttpRequest, čo je natívna základná technológia Ajaxu.

Rozdiel medzi GET a POST je v zásade: GET slúži na získavanie informácií a nemal by byť zodpovedný za zmenu údajov a POST je konkrétne za zmenu údajov. Neváhajte a prečítajte si o tom viac v tomto vlákne StackOverflow.

Zadanie požiadavky GET v jQuery je neuveriteľne ľahké:

$.get( "URL", function(data) ( // do something with data )); ));

Adresa URL je miesto, odkiaľ dúfate, že získate údaje. Druhým parametrom je funkcia spätného volania, ktorá sa spustí, keď bola požiadavka Ajaxu úspešná. Najdôležitejším parametrom je prvý, údaj, ktorý obsahuje informácie, ktoré získal z požiadavky.

Požiadavky Ajaxu môžu niekedy zlyhať. Jedným z dôvodov tohto zlyhania môže byť samotný prehľadávač a jeho bezpečnostné politiky. Samotné prehliadače obsahujú pravidlá, odkiaľ sa dá požadovať obsah. Žiadosti je možné vždy odosielať na tú istú doménu, z ktorej žiadosť pochádza. Ale ak je zapojená iná doména, bude to musieť osobitne povoliť.

Všetko o tom si môžete prečítať na enable-cors.org. CORS znamená „zdieľanie zdrojov naprieč pôvodmi“. Pozeráme sa na príklad, keď CORS nie je povolený a požiadavka Ajaxu zlyhá. Jedným zo štandardných a ľahkých spôsobov, ako to vyriešiť, za predpokladu, že server je Apache, je nastavenie hlavičky, ktorá konkrétne umožňuje CORS prostredníctvom súboru .htaccess:

Header set Access-Control-Allow-Origin "*"

Vo videu iba presunieme požiadavku Ajaxu na CodePen, ktorý Ajax štandardne dobre spracováva.

Jednoduché kýčovité:

Prezrite si Pen fBInl od Chrisa Coyiera (@chriscoyier) na stránkach CodePen