Ajax úspech - to znamená, že sťahovanie dát z webového prehliadača servera bez prekládky celú stránku. Vo svojej práci používa XMLHttpRequest objekt od JavaScriptu odosielať a prijímať informácie o serveri asynchrónne na pozadí bez zásahu užívateľa. Metóda sa stala tak populárnou, že je sotva iná aplikácia, ktorá nepoužíva Ajax. Príklady niektorých veľkých on-line aplikácií riadený Ajax úspech, je: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr a ďalšie.
Možnosti v rámci viacerých prehľadávačov
Ajax znamená: A - simultánne, JavaScript, nd X ml. Ako je zrejmé z procesu označenie používa JavaScript, alebo skôr scenár nazvaný jquery.js. jQuery je knižnica javascript. Súbor váži iba 96 KB, napísaný v JavaScripte a funkcie zvanej jquery.js, ktorá zjednodušuje programovanie Javascriptu, ktoré poskytujú možnosti cross-prehliadača pre výber a spracovanie prvkov DOM, spracovanie udalostí, Ajax úspech dotaz a animácie.
jQuery je veľmi populárny. V máji 2015 súbor používa 642% všetkých webových stránok. Medzi knižníc a rámcov jQuery javascript podiel na trhu 952%. Inými slovami, väčšina súčasných vývojári pracujúci v jQuery, skôr ako surové javascriptu. Výhody jQuery:
Podpora pre viacerých prehliadačov. Toho istého jQuery kód bežiaci v rôznych prehliadačoch: Chrome, Firefox, Internet Explorer, Safari a Opera. Na druhú stranu, aby zabezpečila podporu cross-browser v surovom javascript prehliadača by mal kontrolovať a vydávať príslušné kódy, ako rôzne prehliadače (predovšetkým IE) implementovať funkcie odlišne.
Výber a manipulácia prvkov DOM. "Dotaz" sa týka výberu prvkov DOM v webovom dokumente pre ďalšiu manipuláciu.
Výkonný prepínač funkcie pre selekciu buniek založených na názvoch HTML tagov, napríklad HTML atribút ID #Ladit, CSS názov triedy .error, v prípade chyby Ajax úspechu.
spracovanie udalosti
jQuery javascript zjednodušuje spracovanie udalostí a má špeciálne efekty a animácie, prispôsobiť programy /zatvorí, fade-in /fade-out, slide-in /vysúvacie a vlastné animácie. Ajax Úspech poskytuje jednoduché rozhranie pre posielanie žiadostí Ajax asynchrónny HTTP GET /POST a odpovede na liečbu.
s jQuery, môžete napísať pár riadkov kódu nahradiť tucet kód JavaScriptu a beží na všetkých prehliadačoch bez potreby samostatného testovania pre každú z nich. Podpora pre viacerých prehliadačov je pre produkciu obzvlášť dôležitá, pretože používateľ nemôže otestovať svoje javascriptové kódy vo všetkých prehliadačoch. Jquery, Ajax Úspech využíva viac ako 60% webových stránok na internete. Pre prácu s proces predpokladá, že používateľ je oboznámený s HTML5 CSS3 a JavaScript, sú nevyhnutnými predpokladmi pre prechod na jQuery.
Používanie jQuery
JQuery má dve verzie. Druhá verzia nepodporuje protokol IE Postup inštalácie a konfigurácie:
Stiahnite si knižnicu jQuery z lokality.
Skopírujte súbor javascript (napríklad jquery-1.xx.x.min.js) do koreňového adresára dokumentu spravidla pod podadresárom js. «Min.js» - mini - verzia určená pre výrobu, ktorá odstráni nadbytočné medzery a pripomienky k zmenšeniu veľkosti súboru pre rýchle načítanie.
Na testovanie a štúdium sa používajú kódy".Js» verzia.
Zahrnúť do dokumentu HTML. V HTML4 /XHTML1.0 musíte uviesť atribút type = "text /javascript" v úvodnej značke.
Alternatívou je, že namiesto použitia servera jquery.js môže používateľ použiť službu CDN (Content Distribution Network). Tým sa ušetrí časť sieťovej prevádzky a pravdepodobne bude poskytnutá rýchlejšia reakcia. Okrem toho bude na stiahnutie jquery.js cache pre opätovné použitie:
CDN jQuery.com;
CDN Google;
Microsoft CDN.
Niektorí používatelia uprednostňujú umiestňovanie javascriptu priamo pred koncom tela (), namiesto rozdelenia pre lepšiu rýchlosť, a takisto načítať CSS pred javascripts, pretože často odkazuje na CSS.
Voľby a operácie skriptu
Jquery selector, Ajax Success - najdôležitejšia funkcia jQuery - má špeciálnu syntax $ (). Môže prijať názov značky, atribút id (s predponou #) alebo názov triedy (s predponou bodu). V skutočnosti podporuje všetky výbery CSS. V porovnaní s funkciami selektora v javascripte je JQuery veľmi jednoduché a do vyššie uvedenej triedy. Pripojí obsluhu udalosti, ktorá bude fungovať po vytvorení stromu DOM. Udalosť "" sa líši od udalosti javascript "", ktorá nečaká na prevzatie externých odkazov, napríklad obrázkov. Tieto kódy sú umiestnené v sekcii skôr, ako sa vytvoria referenčné prvky. Toto je bežná prax jQuery: $ (document) .ready (handler) readyonloadready () Príkladom je selektor a operácie jQuery.
Požiadavka JQuery sa týka výberu prvkov v HTML - dokumentu pre ďalšiu manipuláciu.
Napríklad:
vyberie $ (dokument)aktuálny dokument.
$ (p) vyberie všetko.
Prvky (Tag-Selector).
$ (# hello) a $ (# message) vyberie jednu položku s atribútom id = "hello" (ID-Selector).
$ (. Red) Vyberie všetky prvky, ktoré majú atribút class = "red" (Class-Selector).
Skutočne, $ () je skratka (prezývka) pre hlavnú funkciu jQuery ().
Metódy riadenia elementárneho obsahu
Používateľ môže použiť reťazec funkcií pre "Line" a "To", pretože väčšina funkcií vráti použitú položku. V mnohých metódach, ako napríklad html, jQuery používa rovnaký názov metódy pre getra aj setter, pričom rozlišuje jeho argument. Napríklad html) vráti innerHTML bez argumentu. Hotový dokument sa bežne používa v jQuery, ktorý poskytuje skrátenú položku napísanú ako $ (funkcia () {}). Typy správy obsahu pre vybranú položku:
html () - získať innerHTML;
html (hodnota) - nastavenie innerHTML;
pridať (hodnota) - pridať innerHTML do konca;
prepend (hodnota) - pridať pred innerHTML;
pred (element) - pridajte prvok pred aktuálny prvok;
po (element) - pridať prvok za aktuálny prvok;
addClass (hodnota), removeClass (hodnota), toggleClass (hodnota) - pridať, odstrániť alebo prepnúť hodnotu triedy atribútov.
JQuery vytvára automatickú cyklickú funkciu "Line?" A "To?", Napríklad $ ('p') vyberie všetky prvky. $ ('p') append () platí append () pre každý z vybraných prvkov v implicitnej slučke.
Používateľ môže tiež použiť explicitnú slučku cez .each (funkcia () {}) (Line? To?) Ak potrebuje použiť viac operácií na vybrané položky. Vo vnútri. - $ (toto) označuje položku pri práci.
Príklad spracovania udalosti
V tomto príkladeukazuje, ako programovať obsluhu udalostí pre akcie používateľa. Väčšina kódov jQuery sa v skutočnosti zaoberá spracovateľmi udalostí pre výber vybraných položiek.
Príklad znázorňuje volič jQuery a vstavané funkcie.
Postup:
Vyberte zdroj pomocou príslušného voliča jQuery.
Definujte udalosť, napríklad kliknutie myšou, typ kľúča.
Napíšte popisovač udalostí a pripojte ho k zdroju.
sa môže pripojiť k udalosti handler javascriptu, napríklad na tlačidlo, mouseover a predložiť k položke pomocou metódy JQuery.
môže zabrániť spusteniu predvolený pre spracovanie, vracia z .click (popisovač) .mouseover (popisovač) .submit (obslužný) falošné.
Vo vnútri funkcie $ (to) sa vzťahuje na aktuálny objekt. Hoci $ (p) vráti pole prvkov), môžete použiť rovnakú syntax pre väzbu na každej obsluhy udalostí prvkov. Predtým, handler udalosti javascript bol umiestnený v HTML tagoch. Praxou je teraz nechať ich mimo tagov HTML a zoskupiť ich do sekcie pre lepšiu konštrukciu MVC.
Kód žiadosti a odpovede AJAX
Pokračovanie procesu:
Ak chcete otestovať údaje Úspešné údaje Ajax, spustite skript pomocou webového servera, napríklad Apache: $ (: submit) selektor vyberie všetky $ (: text [name = "message"]) Ajax otázka:
Ajax () berie ako argument asociatívne pole (pary "kľúč-hodnota"); Typ
špecifikuje metódu požiadavky, napríklad získať alebo poslať, pre Ajax post Success;
Údaje poskytujú vo formulári reťazec dopytovasociačné pole;
.done () posiela späť, keď je prijatá odpoveď na stavový kód 200 (OK). Argument vyžaduje funkciu odozvy HTTP;
.fail () pošle späť, keď dostane odpoveď s kódom stavu NIE 200 (OK);
Vždy () posiela späť po dokončení .done a. Ako argument akceptuje funkciu no-arg.
rozšírením JavaScript
jQuery - je rozšírenie pre JavaScriptu, ktorý sa ľahko zistiť, či má používateľ JavaScript. Len potrebuje sledovať niektoré operácie jQuery pomocou nástrojov Firebug alebo Web Developer. Aplikácia jQuery API je dostupná na stránkach vývojára. JQuery umiestnené v prevádzke v handlerunder, ktorý začína po vytvorení stromu DOM, ale pred stiahnutím externých zdrojov, ako obrazy, čo zodpovedá jeho umiestnením bezprostredne jQuery skriptu pred uzavretím. Toto je efektívnejšie ako obsluha javascript. Okrem toho môžete použiť niekoľko na zaregistrovanie viacerých spracovateľov, ktoré budú vykonané v poradí, v akom boli zaregistrované. javascript možno použiť iba raz: $ (document) .ready (handler) onloadwindow.onload = handler.ready () window.onload = psovod berie argument najčastejšie anonymný funkcie alebo nastavenia. Táto funkcia nemá žiadne argumenty.
Často sa používa, čo je skratka. $ (Document) .ready (popisovač) $ (rutinu).
Iterácia prostredníctvom vybratých položiek
Volič jQuery môže zvoliť buď prvky nuly alebo DOM. Vybrané predmety zabalené vo vnútri objektu, ako, a tak ďalej D. možno vykonávať iterácie pre každý z týchto položiek:
.Implicitná iterácia pomocou funkcie append () pre každý z vybratých prvkov v implicitnej slučke.
Explicitná iterácia prostredníctvom funkcie .each (funkcia).
$ (toto).
Predpokladajme, že používateľ chce použiť sériu operácií pre každý z vybraných prvkov, môže použiť iteráciu s vybranými prvkami. Prijme argument ako argument, ktorý môže byť anonymný, buď vyriešený, alebo premennú funkciu. V rámci funkcie môžete použiť prepojenie na položku v práci: .each (function) .each () $ (this). Okrem toho $ (to) odkazuje na objekt jQuery, ktorý je pod kontrolou, môže tiež použiť ten, ktorý sa vzťahuje na použitý prvok DOM. To je: $ (this)=== tento AND môže použiť metódy JQuery, ako napríklad .append (), .html () na $ (to), ale nie toto. Na druhej strane môže DOM použiť túto operáciu, napríklad toto.id.substring (05), čo znamená prvých päť znakov atribútu atribútu DOM v tomto procese.
Napísanie Ajaxu pomocou jQuery
Predvolená požiadavka na Ajax je asynchrónna. Inými slovami .ajax () bude uvoľnený, skript nebude čakať na odpoveď, ale prejde na nasledujúce vyhlásenie, aby sa zamknúť alebo zmraziť obrazovku. Používateľ môže napísať Ajax Success Json pomocou nespracovaného javascriptu. Avšak, jQuery uľahčuje nastavenie $ .Ajax alebo parametre $ .ajax URL. Tieto nastavenia sú predmetom párov kľúč-hodnota. Často používané klávesy: Adresa URL žiadosti, ktorá môže byť umiestnená mimo nastavenia posledného formulára.
Typ - GET alebo POST.
Ajax data Úspešnosť - spýta sa parametrov (meno = páryhodnoty) a vyjadrené ako objekt, napríklad, {názov: "Peter", správa: "Dobrý deň,"} alebo reťazca dotazu "name = Peter & Co. spr = Dobrý deň".
Datatype - očakávané odozvy typu dát, ako napríklad text, XML, JSON, skriptu alebo HTML.
Záhlavie je objekt pre páry kľúč-hodnota hlavičky dotazu.
Kontrola požiadavke na serveri je Ajax Success záhlaví php "X-Požadované-S: XMLHttpRequest". Serverový program môže skontrolovať, či sa Ajax zobrazuje prostredníctvom tejto hlavičky, napríklad v PHP.
Bezpečnostné otázky
Aby sa zabránilo útoku XSS (Cross-Site Scripting), XMLHttpRequest objekt môže požadovať dáta zo zdrojového servera obsluhujúci stránky. Pri sťahovaní skriptu je potrebné dávať pozor. Element HTML $ načíta dáta zo servera a vráti HTML vrátený do dohodnutého elementu. Toto je najjednoduchšia metóda Ajax na sťahovanie údajov zo servera. Tu je príklad požadovania funkcie Ajax Úspech na serveri HTTP pre obyčajný text. V tomto príklade používame program Ajax na odoslanie žiadosti POST asynchrónne, aby sme požiadali o textový súbor.
Toto je text odpovede žiadosti Ajax:
Tento príklad sa vykonáva za HTTP-servera (napríklad Apache), pretože sa pošle HTTP požiadavka, ktorý bude použitý ako zástupný textu odpovede. Obsahuje tiež hypertextový odkaz na spustenie dotazu Ajax (cez loadAjaxText ()). Požiadavka Ajax s parametrami POST pre server PHP-HTTP získa dynamickú odpoveď.
Kód HTML klienta obsahuje dve "c" pre vstup a výstup. Obsahuje aj hypertextový odkaz na spustenie žiadosti o Ajax Success php (prostredníctvom javascript loadText ()).
Získali sa výsledky skriptuProces asynchrónnej výmeny údajov z webového servera pomocou javascriptu potvrdzuje, že aj bez aktualizácie stránky webovej aplikácie pracujú rýchlo a efektívne. Aplikácie web používa model vyžiadania alebo odpovede z HTML servera a získa úplnú stránku. V dôsledku toho používateľ dostane výsledok po kliknutí na tlačidlo a čaká na odpoveď na server, opäť stlačením a čakaním na odpoveď. Ajax vykonáva operácie žiadosti /odpovede, nevyžaduje, aby používatelia čakali na odpovede zo servera.
