Ajax Success je nástroj pro stahování dat ze serveru webového prohlížeče, aniž byste museli znovu načíst celou stránku. Ve své práci používá XMLHttpRequest objekt od JavaScriptu odesílat a přijímat informace o serveru asynchronně na pozadí bez zásahu uživatele. Metoda se stala tak populární, že neexistuje téměř žádná jiná aplikace, která nepoužívá Ajax. Příkladem některých velkých online aplikací, které spravuje Ajax Success, jsou Gmail, Mapy Google, Dokumenty Google, YouTube, Facebook, Flickr a další.
Možnosti křížového prohlížeče
Ajax znamená: A je synchronní, javascript, A nd X ml. Jak lze vidět z notace, proces používá javascript, spíše skript nazvaný jquery.js. jQuery je knihovna javascript. Soubor váží pouze 96 KB, napsaný v JavaScriptu a funkce zvané jquery.js, která zjednodušuje programování Javascriptu, které poskytují možnosti cross-prohlížeče pro výběr a zpracování prvků DOM, zpracování událostí, Ajax úspěch dotaz a animace.
jQuery je velmi populární. V květnu 2015 je soubor používán 642% všech webových stránek. Mezi jQuery knihovnami a rámci je podíl jQuery na trhu 952%. Jinými slovy, většina moderních vývojářů pracuje v jQuery, nikoliv v syrovém javascribu. Výhody jQuery:
Podpora pro více prohlížečů. To znamená, že stejný kód jQuery běží v různých prohlížečích: Chrome, Firefox, IE, Safari a Opera. Na druhou stranu, aby zajistila podporu cross-browser v surovém javascript prohlížeče by měl kontrolovat a vydávat příslušné kódy, jak různé prohlížeče (především IE) implementovat funkce odlišně.
Výběr a manipulace s prvky DOM. "Dotaz" se týká volby prvků DOM ve webovém dokumentu pro další manipulaci.
Výkonný přepínač funkce pro selekci buněk založených na názvech HTML tagů, například HTML atribut ID #Ladit, CSS název třídy .error, v případě chyby Ajax úspěchu.
zpracování události
jQuery javascript zjednodušuje zpracování událostí a má speciální efekty a animace, přizpůsobit programy /zavře, fade-in /fade-out, slide-in /vysouvací a vlastní animace. Ajax Úspěch poskytuje jednoduché rozhraní pro posílání žádostí Ajax asynchronní HTTP GET /POST a odpovědi na léčbu.
s jQuery, můžete napsat pár řádků kódu nahradit tucet kód JavaScriptu a běží na všech prohlížečích bez potřeby samostatného testování pro každou z nich. Podpora mezi prohlížeči je zvláště důležitá pro produkci, protože uživatel nemůže testovat javascriptové kódy ve všech prohlížečích. Jquery, Ajax Úspěch využívá více než 60% webových stránek na internetu. Pro práci s proces předpokládá, že uživatel je obeznámen s HTML5 CSS3 a JavaScript, jsou nezbytnými předpoklady pro přechod na jQuery.
Používání jQuery
JQuery má dvě verze. Druhá verze IE nepodporuje proces instalace a konfigurace:
Stažení jQuery knihovnu z webu.
Zkopírujte soubor JavaScript (např jQuery-1.xx.x.min.js) do kořenového dokumentu, obvykle v podadresáři «js». «Min.js» - mini - verze určená pro výrobu, která odstraní nadbytečné mezery a připomínky ke zmenšení velikosti souboru pro rychlé načítání.
Pro testování a studium kódů se používají«.Js» verze.
Zahrňte do dokumentu HTML. V HTML4 /XHTML1.0 musíte zahrnout atribut type = "text /javascript" do otevřené značky.
Jako alternativa může uživatel namísto obsluhy serveru jquery.js používat službu CDN (Content Distribution Network) k obsluze. Tím se ušetří část síťového provozu a pravděpodobně bude poskytována rychlejší odezva. Navíc stahování jquery.js bude ukládáno do mezipaměti k opakovanému použití:
CDN jQuery.com;
CDN Google;
Microsoft CDN.
Někteří uživatelé preferují umístění javascriptu přímo před koncem těla (), nikoliv oddíl pro lepší rychlost, ale také načíst CSS před javascripts, protože se často odkazuje na CSS.
Selektory a operace skriptu
Selektor Jquery, Ajax Success - nejdůležitější funkce jQuery - má speciální syntaxi $ (). Může přijmout název značky, atribut id (s předponou #) nebo název třídy (s předponou bodu). Ve skutečnosti podporuje všechny voliče CSS. Ve srovnání s funkcemi selektoru v javascriptu je JQuery velmi jednoduché a do výše uvedené třídy. Připojí obslužnou rutinu událostí, která bude fungovat po vytvoření stromu DOM. Událost "" se liší od události javascript "", která nečeká na stažení externích odkazů, například obrázků. Tyto kódy jsou umístěny v sekci dříve, než se vytvoří referenční prvky. Jedná se o běžnou praxi jQuery: $ (document) .ready (handler) readyonloadready () Příkladem je volič jQuery a operace.
Požadavek JQuery se týká výběru prvků v HTML - dokumentu pro další manipulaci.
Například:
Vybírá $ (dokument)aktuálního dokumentu.
$ (p) vybírá vše.
Prvky (tag-selektor).
$ (# hello) a $ (# message) vybírá jednu položku s atributem id = "hello" (ID-Selector).
$ (. Red) Vybírá všechny prvky, které mají atribut class = "red" (Class-Selector).
Ve skutečnosti $ () je zkratka (přezdívka) pro hlavní funkci jQuery ().
Metody řízení elementárního obsahu
Uživatel může používat řetězec funkcí pro "Line" a "To", protože většina funkcí vrací použitou položku. V mnoha metodách, jako je html, používá jQuery stejný název metody pro gett a setter, čímž rozlišuje jeho argument. Například html) vrátí innerHTML bez argumentu. Hotový dokument se běžně používá v jQuery, který poskytuje zkrácenou položku napsanou jako $ (function () {}). Typy správy obsahu pro vybranou položku:
html () - get innerHTML;
html (hodnota) - nastavit innerHTML;
připojit (hodnota) - přidání innerHTML do konce;
prepend (hodnota) - přidat před innerHTML;
před (element) - přidat prvek před aktuální prvek;
po (element) - přidání prvku za aktuální prvek;
addClass (hodnota), removeClass (hodnota), toggleClass (hodnota) - přidání, odebrání nebo přepnutí hodnoty třídy atributů.
JQuery vytváří automatickou cyklickou funkci "Line?" A "To?", Například $ ('p') vybírá všechny prvky. $ ('p') append () platí append () pro každý z vybraných prvků v implicitní smyčce.
Uživatel může také použít explicitní smyčku přes .each (function () {}) (Line? To?) Pokud potřebuje použít více operací na vybrané položky. Uvnitř - $ (to) označuje položku při práci.
Příklad zpracování události
V tomto příkladuukazuje, jak programovat obslužnou rutinu událostí pro akce uživatele. Většina kódů jQuery se ve skutečnosti zabývá manipulátory událostí pro výběr vybraných položek.
Příklad znázorňuje volič jQuery a vestavěné funkce.
Postup:
Zvolte zdroj pomocí příslušného voliče jQuery.
Definujte událost, například kliknutí myší, typ klíče.
Napište popisovač událostí a připojte jej ke zdroji.
Funkci psaní událostí můžete připojit k javascribu, například klepnutím, přechodem myší a odesláním do položky pomocí metod jQuery.
Uvnitř funkce $ (to) odkazuje na aktuální objekt. Ačkoli $ (p) vrací prvky do pole, můžete použít stejnou syntaxi pro vazbu obsluhy událostí na prvky EACH. Dříve byl obslužný program událostí javascript umístěn do značek HTML. Práce nyní je nechat je mimo tagy HTML a seskupit je v sekci pro lepší design MVC.
Kód požadavku a odpovědi AJAX
Pokračování procesu:
Chcete-li otestovat data funkce Úspěch Ajax, spusťte skript pomocí webového serveru, například Apache: $ (: submit) volič vybere všechny $ (: text [name = "message"]) Ajax dotaz:
ajax () má asociativní pole jako argument (pár klíč-hodnota); Typ
určuje metodu požadavku, například získat nebo poslat, pro Ajax post Success;
url určí adresu URL akce, ve výchozím nastavení aktuální dokument;
Data poskytují ve formuláři řetězec dotazuasociativní pole;
.done () odešle zpět při přijetí odpovědi na stavový kód 200 (OK). Argument vyžaduje funkci odpovědi HTTP;
.fail () odešle zpět, když je přijata odpověď na stavový kód NO 200 (OK);
Vždy () pošle zpět po dokončení .done a .fail. Jako argument akceptuje funkci no-arg.
javascript rozšíření základy
jQuery je javascript rozšíření, které je snadné pochopit, jestliže uživatel má javascript. Potřebuje sledovat některé operace jQuery pomocí nástrojů Firebug nebo Web Developer. Aplikace jQuery API je k dispozici na webu vývojáře. V jQuery jsou operace umístěny do obslužného programu, který běží po vytvoření stromu DOM, ale před načtením externích zdrojů, například obrázků, což odpovídá umístění skriptů jQuery přímo před závěrečnou značkou. To je mnohem efektivnější než handler javascript. Kromě toho můžete použít několik k zaregistrování několika obslužných programů, které budou provedeny v pořadí, v jakém byly zaregistrovány. javascript lze použít pouze jednou: $ (document) .ready (handler) onloadwindow.onload = handler.ready () window.onload = handler Bere argument, který je nejčastěji anonymní funkcí nebo specifikovaná funkce. Funkce nemá žádné argumenty.
Používá se tak často, že existuje zkratka. $ (Document) .ready (handler) $ (handler).
Iterace pomocí vybraných položek
Volič jQuery může zvolit buď prvky nuly nebo DOM. Vybrané položky jsou zabaleny uvnitř objektu, například ,atd. Můžete provést iteraci pro každý z těchto prvků:
Implicitní iterace pomocí funkce append () pro každý z vybraných prvků v implicitní smyčce.
Explicitní iterace přes .each (funkce).
$ (toto).
Předpokládejme, že uživatel chce použít řadu operací na každý z vybraných prvků, může použít iteraci s vybranými prvky. Přijme argument jako argument, který může být anonymní, buď vyřešen, nebo proměnnou funkcí. Uvnitř této funkce můžete použít odkaz na položku v práci: .each (function) .each () $ (this). Kromě toho $ (to) odkazuje na objekt jQuery, který je v řízení, může také použít ten, který odkazuje na použitý prvek DOM. To je: $ (this)=== tento AND může aplikovat metody JQuery, jako .append (), .html () na $ (toto), ale ne toto. Na druhou stranu může DOM použít tuto operaci, například tuto subdodávku (05), což znamená prvních pět znaků atributu atributu DOM v procesu.
Psaní Ajaxu pomocí jQuery
Výchozí požadavek Ajaxu je asynchronní. Jinými slovy bude .ajax () uvolněn, skript nebude čekat na odpověď, ale předá následujícímu příkazu, aby nezamkl a nezmrazil obrazovku. Uživatel může psát Ajax Success Json pomocí nezpracovaného javascriptu. Ovšem jQuery je mnohem jednodušší pomocí parametrů $ .Ajax nebo parametrů $ .ajax URL. Tato nastavení jsou předmětem párů klíč-hodnota. Často používané klávesy: Adresa URL žádosti, která může být umístěna mimo nastavení posledního formuláře.
Typ - GET nebo POST.
Ajax data Úspěch - zeptá se parametrů (název = páryhodnoty) a vyjádřené jako objekt, například {name: "peter", msg: "hello"} nebo řetězec dotazu "name = peter & msg = hello".
Datový typ je očekávaný typ dat odpovědí, například text, xml, json, skript nebo html.
Záhlaví je objekt pro dvojice klíč-hodnota záhlaví dotazu.
Kontrola serveru pro požadavek na úspěšnost aplikace Ajax php má záhlaví "X-Requested-With: XMLHttpRequest". Serverový program může zkontrolovat, zda se Ajax objevuje prostřednictvím této hlavičky, například v PHP.
Problémy s bezpečností
Chcete-li zabránit útokům XSS (Cross-Site Scripting), objekt XMLHttpRequest může požadovat data ze zdrojového serveru zobrazujícího stránku. Při stahování skriptu musíte být opatrní. Prvek HTML $ stáhne data ze serveru a vloží vrácený kód HTML do dohodnutého prvku. Jedná se o nejjednodušší metodu Ajax pro stahování dat ze serveru. Zde je příklad pro vyžádání funkce Ajax Success na HTTP serveru pro obyčejný text. V tomto příkladu používáme službu Ajax k odeslání požadavku POST asynchronně, abychom požádali o textový soubor.
Toto je text odpovědi na žádost Ajaxu:
Tento příklad běží pod HTTP serverem (například Apache), protože odešle požadavek HTTP, který bude použit jako plnivo pro text odpovědi. Obsahuje také hypertextový odkaz pro spuštění dotazu Ajax (prostřednictvím loadAjaxText ()). Požadavek Ajaxu s parametry POST pro server PHP-HTTP získat dynamickou odpověď.
Kód HTML klienta obsahuje dvě "c" pro vstup a výstup. Obsahuje také hypertextový odkaz, který spouští žádost o přístup k programu Ajax Success php (prostřednictvím javascript loadText ()).
Získané výsledky skriptuProces asynchronní výměny dat z webového serveru pomocí javascriptu potvrzuje, že i bez aktualizace stránky webové aplikace pracují rychle a efektivně. Aplikace web používá model požadavku nebo odpovědi na serveru HTML a získá úplnou stránku. Výsledkem je, že uživatel obdrží výsledek po klepnutí na tlačítko a čekání na odpověď na server, opět stiskněte a čeká na odpověď. Ajax provádí operace s požadavkem /odpovědí, nevyžaduje od uživatelů čekat na odpovědi ze serveru.
