JQuery Ajax: Použití a funkce

Termín Ajax je dekódován jako asynchronní Javascript a XML (asynchronní Javascript a XML) a odkazuje na technologii budování dotazů bez opětovného načtení stránky: pokud pošlete nějaké údaje na server, odpoví a stránka není aktualizována. Nejjednodušším příkladem požadavku na Ajax je vyhledávání. Pokud otevřete vyhledávač a začnete psát dotaz, objeví se hned pod linkou tipy, ale stránka se nebude obnovovat. Pro zkrácené nahrávání hovorů metodou Jquery se používá označení dolaru.

Výhody Ajaxu

Ajax vám umožňuje ušetřit provoz a jeho použití je pro uživatele výhodnější, protože nemusíte dlouho čekat na úplné načtení stránky. Ale vývojář používající tuto metodu je nucen neustále sledovat akce uživatelů a vyzvat je, aby pochopili, co se děje na stránce. Je důležité si uvědomit, že staré verze prohlížečů, včetně textu, nepodporují technologii Ajax. Někdy uživatelé zakazují vlastní použití JS, protože skripty mohou přestat fungovat. Proto je důležité přemýšlet o alternativách a ne spoléhat jen na tuto metodu.

Aplikace Ajax a jQuery

Existence interaktivních aplikací by bez technologie Ajax nebyla možná. Používá se v práci úhlové (AngularJS) - rámce pro JS. Použití technologie Ajax na celé stránce je volitelné. Lze jej použít pouze pro některé prvky stránky, která se aktualizuje. Například pro autokorekci, ověření formuláře a hledání.

Knihovna jQuery je sbírka hotových řešení napsaných v JS. Najdete ji dotazem "Ajax libs Jquery". K dispozici je verze jeho připojení prostřednictvím speciální služby společnosti Google. Říká se tomu Ajax Googleapis. Jquery se v tomto případě spojí přímo. Samozřejmě, že urychluje načítání stránky. Nejčastěji uživatelé najdou mini verzi Jquery Ajax na Googleapis.com. Má omezenou funkčnost, ale je vhodnější pro začátečníky. Na stránkách Googleapis.com se volá mini verze Ajaxu Jqueryho - min.js.

Formáty přenosu dat

XML v dekódovacích zkratkách Ajax je formát výměny dat. Zpočátku, když byla technologie poprvé vytvořena, došlo k výměně pouze s její pomocí. XML je velmi podobný HTML, ale v něm musí být všechny tagy uzavřeny. Později se objevil nový formát v jazyce JS - JSON. Bylo to tak jednoduché a pohodlné, že se rozšířilo do jiných jazyků a knihoven. JSON je vhodnější pro přenos malého množství dat až do 20 tisíc řádků. S ním je snadné pracovat, je pro programátora flexibilnější a srozumitelnější. S dalšími informacemi použijte XML. Například posílání požadavků na vyhledávání Yandex je implementováno pomocí tohoto formátu.

Vytvoření nejjednoduššího dokumentu JSON

Ve službě JS popisují všechny vlastnosti jediný globální objekt okna, tedy okno prohlížeče. Všechny knihovny popisují funkce (metody) a vlastnosti tohoto objektu. JSON je samostatná třída, která dědí z objektu a má dvě vlastní metody: analyzovat a strčit. Oba metody budeme diskutovat podrobněji níže.

Můžete pracovat s Ajaxem z JS bez použití jQuery. Řetězec JSON lze převést na objekt JS a naopak. Zvažte, jak to udělat s příklady. Nejprve vytvořte dokument a pojmenujte jej například "člověk" s příponou JSON. Poté postupně provádíme následující kroky:

1. Otevřete soubor v editoru kódu, například PhpStorm nebo Sublime.
2. Formát JSON má vlastní syntaxi. Nejprve je vytvořen objekt - potřebuje kudrnaté příchytky.
3. Klíč a jeho hodnota musí být v závorkách. Klíče musí být v uvozovkách. Ve standardním JS při vytváření objektu je klíč zapsán bez uvozovek. Například pro objekt "člověk" ve formátu JSON je třeba vytvořit klíče "name" (name) a "age" (věk). Výsledkem je následující kód: {"name": "Pavel", "age": 28}.

Pokud potřebujete více objektů, jsou umístěny v poli, které se vyznačuje hranatými závorkami. Je důležité mít na paměti, že formát JSON nepodporuje komentáře. V jakékoliv formě to bude chyba. Neexistuje však pro ně žádnou zvláštní potřebu.

Samotné hodnoty klíčů mohou být následující:

• řetězec;
• číslo;
• pole;
• objekt.

Pole je napsáno v hranatých závorkách, objekty v něm jsou uzavřeny v uvozovkách a odděleny čárkami. Můžete také přidat připojený objekt, například adresu. Musí být uzavřena ve svincích. Tak je rychle vytvořen nejjednodušší dokument JSON. Pro pohodlí při použití a zamilovala se vývojáři.

Konverze řetězce na objekt

Řetězec v JS musí být často převeden na objekt JSON. Mělo by být poznamenáno, že v kódu, kdy se čára přeruší na konci, by měla být lomítka, jinak JS nechápe, že je u konce. Kód v JS bude vypadat takto:

Je třeba zajistit, aby byly klíče v uvozovkách, jinak dojde k chybě. Máme nejjednodušší řetězec. Může pocházet z libovolného serveru. Chcete-li se ujistit, že se jedná o řetězec, můžete jej do konzoly přenést přidáním příkazu "console.log (json)" do kódu. Nyní převeďte řetězec na objekt. Za tímto účelem nejdříve deklarujeme proměnnou a zavoláme speciální třídu pro její analýzu: var jsonObj = JSON.parse (). Poté předáme parametr. Pro práci s formátem JSON v JS existuje speciální třída se stejným jménem. Tak můžete převést řetězec na objekt. Pokud není konverze z nějakého důvodu možná, zobrazí se varování. Chcete-li se ujistit, že je vše správně provedeno, mohou být v konzoli zobrazeny oba proměnné. V prvním případě se při zobrazení řetězce v konzole objeví mezery po hodnotách, jelikož JS počítá jejich číslo před znakem lomítka. Není to chyba, ale pro krásu kódu je vhodné odstranit další mezery.

Převést objekt na řetězec

Můžete udělat opak a převést objekt na řetězec. Za tímto účelem deklarujeme proměnnou a znovu použijeme třídu JSON, přidáme ji přes tečku, ale zvolíme jinou metodu - stringify: var ObjtoStr = JSON.stringify (). Poté přeneseme potřebný parametr. Tento příkaz provádí inverzní transformaci. Tento parametr dokáže přenést vše, co potřebujeme, například pouze název. K tomu musí být přiložen požadovaný klíč v hranatých závorkách. Takže můžete pracovat s JSON z JS.

Odeslání požadavku na server

Nyní půjdeme do Ajaxu a pošleme tuto žádost serveru. Nejprve musíte vytvořit objekt XMLHttpRequest. Tato třída je zodpovědná za odeslání požadavku a umožňuje vám ji vytvořit bez opětovného načtení stránky. Použije se JSON, ale název třídy se nezměnil: XML. Kód pro odeslání požadavku je: var xhr = XMLHttpRequest (). Doposud neodesíláme možnosti. Nyní nakonfigurujte tento dotaz. Chcete-li to provést, napište: xhr.open (). Otevřená metoda nakonfiguruje adresu. Chcete-li to provést, přidejte do závorky slovo "GET". Dále, oddělený čárkou v jednoduchých uvozovkách, napíšeme adresu hostitele, kam odešlete požadavek. Na konci řádku přidejte název objektu, tedy soubor ke stažení - v našem případě je to "man.json".

Synchronní a asynchronní požadavek

Třetí parametr, který je potřebný k odeslání požadavku, je určit, zda bude synchronní nebo ne. Označuje se asynchronní a má dvě hodnoty: false - požadavek se provádí synchronně a je pravdivý - v tomto případě bude asynchronní. Pokud je požadavek synchronní, skript čeká na odpověď. Pokud odpověď trvá sekundu, nebude další řádek kódu zpracován. Synchronní požadavek bude proveden v samostatném podprocesu a skript bude pokračovat v provádění příkazů. V našem případě budeme potřebovat první hodnotu, protože v opačném případě musí být provedena kontrola odpovědí událostí a přiřadit funkci, která bude provedena, jakmile bude požadavek přijat.

Dále přidejte další řádek kódu: xhr.send (). Nyní, v reakci na žádost, by měl kód přijít. Může to být kód "200", což znamená, že server je k dispozici, "404" - dokument nebyl nalezen, "300" - přesměrování a "500" - chyba ze serveru. Chcete-li zjistit, zda se vyskytla chyba, musíte porovnat kód s číslem "200". Chcete-li to provést, přidejte následující řádek do kódu: if (xhr.status! = 200) a výstup hodnotu do konzoly. Je-li vše v pořádku, spustí se další větve, do které přidáme výstup do konzoly s hodnotou "OK". Proto jsme odeslali žádost serveru pomocí JS a dozvěděli se, jak Ajax pracuje z JS. Vytvořili jsme XMLHttpRequest, specifikovali metodu, cestu, synchronicitu nebo asynchronii a získali výsledek.

Jquery ajax

Zkušení programátoři nepoužívají čistou JS pro práci, ale používají libovolnou knihovnu - nejčastěji jQuery. Požadavky JS Ajaxu v jQuery jsou mnohem snadněji vytvářeny, což je důvod, proč se stal tak populární. Pokuste se zkusit skript vylepšit pomocí této knihovny. Nejprve je třeba stáhnout jQuery. Dodává se v několika verzích. Knihovnu můžete propojit prostřednictvím služby Google Code. Existuje možnost pro vývojáře, kde je možnost komentovat a přerušit linku. Další verze je minimální. Je umístěn na adrese: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Má smysl propojit tuto knihovnu na pracovním serveru. Knihovnu můžete přidat pomocí následujícího kódu prostřednictvím služby Google Code:

Tento kód používá jako příklad verzi 3.1.0. Chcete-li pracovat správně, musíte přidat aktuální verzi. Důležité je, že adresa začíná na adrese "//ajax.googleapis.com/ajax/libs/jquery" a vytvoříme nový soubor ve formátu html a propojíme knihovnu zadáním adresy její polohy do značky skriptu a umístěním do hlavy. ($) (document) .ready () Když je dokument připraven, vnořená funkce bude nazývána: (function () {}) .To je nutné pro načtení modelu DOM, se kterým pracujeme , tj. vše, co je v tagu těla, pokud se tak nestane, skript bude zpracován ještě před načtením modelu DOM.

Vytvoření formuláře

Jako příklad jQuery Ajax, vytvořte formulář. Chcete-li to provést, vytvořte div s třídou formuláře a přidejte vstup s typem "text" a atribut name s hodnotou "name". Pak přidáme další vstup, typ "text" a název "adresa". Každému vstupu je přiřazen identifikátor. Jako identifikátor můžete použít hodnoty atributů jména. Přidejte nápovědu pro oba vstupy s nabídkou pro zadání jména a adresy. Volitelně můžete do věku přidat další řádek. Nyní zbývá vytvořit tlačítko pro odeslání formuláře. Uvnitř značky tagu napíšeme slovo "odeslat" a přidáme identifikátor btn. Na každé řádce přidáme oddělovače - br značky - a zkontrolujte, co máme.

Externí odrážky můžete přidat tak, že je zapíšete do značky stylů, ale je to volitelné. Formulář nefunguje. Pro její fungování je nutné událost spojit s tlačítkem, protože data budou odeslána přesně po stisku tlačítka. Chcete-li to provést, vyberte tlačítko na voliči a zadejte událost "klikněte": $ ('# btn'). Nyní, když kliknete na tuto funkci, bude provedena. Používáme metodu on, která na nějakém prvku označuje určitou funkci na události kliknutí. To znamená, že po kliknutí na tlačítko bude fungovat. Zkontrolujeme, že vše funguje pomocí výstupu na konzoli. Metody odeslání požadavku v jQuery Ajaxu nejsou tolik. Můžete použít Get, Post nebo jen Ajax. Protože tato data mohou něco změnit, použijeme metodu Jquery Ajax post.

Získání hodnot polí formuláře

V dalším kroku musíme získat hodnoty všech polí formuláře. V jQuery Ajax existují dvě možnosti, jak to udělat. Tuto funkci můžete použít nebo bez ní provádět. Pro první možnost zapíšeme následující kód: var name = $ ('# name'). Poté přidáme podobné řádky pro adresu a věk. Dostali jsme odkazy na prvky, nikoli na samotné hodnoty. Nyní používáme metodu Jquery Ajax post. Chcete-li to provést, píšeme: $ .post (). Nyní je nutné metodu nakonfigurovat. Vezme adresu URL, kam bude formulář odeslán. K tomu použijeme validátor. V závorkách se píše '/validator.php'.

Přidat další parametr - data samotná: var data = 'name =' + name.val () + '& adresa =' + adresa.val () + '& age =' + age.val (). Nyní máme data získaná metodou Jquery Ajax. Zůstává pouze přidání funkce zpětného volání, která bude volána, když přijde odpověď ze serveru. Musí zaregistrovat následující parametry: data serveru, popis stavu a zda byla žádost provedena. Zobrazujeme parametr dat v konzole a ověříme, zda je vše v pořádku. Je také důležité vzít v úvahu, že žádost o Ajax se vždy provádí v Unicode, protože kódování dokumentu musí být utf-8. Pokud jsou stránky a server v jiném kódování a Ajax je spuštěn v Unicode, server vrátí hieroglyfy a řetězec bude muset být znovu zakódován. Abyste tomu zabránili, doporučujeme udělat vše v utf-8.

Práce s PHP

Nyní použijte jQuery Ajax s PHP. Vytvořte nový soubor a zavolejte jej validator.php. Ukažme si naše data. Za tímto účelem píšeme: $ array = $ post. Nyní vygenerujte všechna data ve formátu JSON: echo JSON_encode ($ array). Zkontrolujeme, jak funguje formulář vyplněním polí a odesláním požadavku na server. Pokud je vše v pořádku, dostaneme objekt se zadanými parametry. Data jsme dostali, nyní je třeba je zpracovávat a zaznamenávat. Napsali jsme: if (isset ($ post ['name']) && (isset ($ post ['age']) && (isset ($ post ['address']) : else {$ array ['status'] = 'chyba'} Zkontrolujeme, zda všechno funguje.Pokud jsou v kódu chyby, hledáme je a opravíme.Vzhledem k asynchronnímu přenosu požadavku může uživatel zadat další informace v okamžiku přenosu Můžete používat nejen programovací jazyk PHP, ale i jiné jazyky serverů.