Probrali jsme základní mechaniku metody $.ajax() jQuery. Nyní by bylo dobré zvážit případy z reálné praxe: jak a odkud lze získat data pro přenos pomocí Ajax požadavku.
Příjem dat z formuláře.Existuje několik způsobů, jak získat data z polí formuláře:
Zastavme se u posledních dvou a ne tolik u toho, jak data získat ( vše je zde jednoduché), ale o tom, jak je zpracovat na straně serveru. Vezměte si například tento formulář:
HTML ( soubor index.html)
CELÉ JMÉNO:
E-mailem:
Pohlaví muž žena
Chcete-li přijímat dopisy:
Ano
Ne
A pojďme napsat tento JS kód
jQuery( soubor script.js)
$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), fData = $that.serialize(); // serializujte data // NEBO // fData = $that.serializeArray(); $.ajax(( url: $that.attr("action"), // převezměte cestu k obsluze z atributu typu akce: $that.attr( "metoda"), // metoda přenosu - převzato z atributu metody data: (form_data: fData), dataType: "json", success: function(json)( // Pokud je požadavek úspěšně dokončen. .. if(json)( $that.replaceWith(json); // nahraďte formulář daty přijatými v odpovědi. ) ) )); )); ));
Nyní napišme handler tak, abychom jasně viděli rozdíl mezi metodami serialize() a serializeArray()
PHP handler ( soubor handler.php)
$(jméno):
Tento příklad zde nebudu podrobně popisovat, protože... podrobně jsme se na to podívali v předchozím článku (pouze pomocí metody post()). Jen poznamenám, že jsme zde kromě typu použili několik dalších parametrů. K určení cíle požadavku POST se používá parametr url popsaný výše. Data, která se mají odeslat, se zadávají pomocí parametru data, jehož hodnota se nastavuje pomocí metody serialize() popsané v předchozím článku. Typ dat přijatých ze serveru je určen v parametru dataType.
Práce s Ajax EventsNěkolik parametrů vám umožňuje určit funkce pro zpracování událostí, které lze spouštět během životního cyklu požadavku Ajax. Takto určíte funkce zpětného volání, které hrají tak důležitou roli v požadavcích Ajaxu. S jedním z nich jste se již seznámili při zvažování parametru úspěchu v předchozím příkladu. Seznam parametrů souvisejících s událostmi spolu s jejich stručným popisem je uveden v tabulce níže:
Vyřizování úspěšných požadavkůVe výše uvedených příkladech byly při použití parametru success z volání funkce vynechány dva argumenty – zpráva popisující výsledek požadavku a objekt jqXHR. Níže je uveden příklad použití funkce, která přebírá tyto argumenty:
$(funkce() ( $.ajax(( url: "mydata.json", success: function(data, stav, jqxhr) ( console.log("Status: " + stav); console.log("jqXHR status: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ))); ));
Argument status je řetězec popisující výsledek požadavku. Funkce zpětného volání, kterou specifikujeme pomocí parametru success, se provádí pouze pro úspěšné požadavky, takže hodnota tohoto argumentu je obvykle úspěch. Výjimkou je použití parametru ifModified, který je popsán dále.
Funkce zpětného volání pro všechny události Ajax se řídí stejným vzorem, ale tento argument je nejužitečnější pro řadu dalších událostí.
Posledním argumentem je objekt jqXHR. Než začnete s tímto objektem pracovat, nemusíte zjišťovat stav požadavku, protože víte, že funkce se provede pouze tehdy, když požadavek uspěje. Tento příklad používá objekt jqXHR k získání informací o stavu požadavku a hlavičkách, které server zahrnul do odpovědi, ak vytištění těchto informací do konzoly.
V tomto případě výsledek vypadá takto (v závislosti na tom, který server používáte, můžete mít jinou sadu záhlaví):
Parametr error se používá k určení funkce, která by měla být volána, když požadavek selže. Odpovídající příklad je uveden níže:
Chyba (barva: červená; okraj: středně plná červená; odsazení: 4 pixely; okraj: auto; šířka: 200 pixelů; zarovnání textu: na střed)
$(function() ( $.ajax(( url: "NoSuchFile.json", success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), error: function(jqxhr, status, errorMsg) ( $("") .text( "Stav: " + stav + " Chyba: " + errorMsg) .insertAfter("h1"); ) )); ));
Zde je požadován soubor NoSuchFile.json, který se na serveru nenachází, a proto požadavek evidentně nelze dokončit, v důsledku čehož bude zavolána funkce zadaná pomocí parametru error. Argumenty této funkce jsou objekt jqXHR, zpráva o chybovém stavu a chybová zpráva přijatá v odpovědi serveru. Uvnitř této funkce je do dokumentu přidán prvek div, který zobrazuje hodnoty argumentů status a errorMsg, jak je znázorněno na obrázku:
Parametr beforeSend umožňuje zadat funkci, která bude volána před odesláním požadavků. To vám umožňuje nakonfigurovat požadavek na poslední chvíli přidáním nebo nahrazením parametrů předávaných metodě ajax() (což může být zvláště užitečné, pokud více požadavků používá stejný objekt obsahující požadované hodnoty parametrů). Příklad použití tohoto přístupu je uveden níže:
$(function() ( $.ajax(( success: function(data) (var template = $("#flowerTmpl")); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); ), error: function(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " Chyba: " + errorMsg) .insertAfter("h1"); ), beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); ));
Argumenty této funkce jsou objekt jqXHR (který může být užitečný pro přizpůsobení hlaviček požadavků nebo zrušení požadavku před jeho odesláním) a objekt obsahující parametry předané metodě ajax(). V tomto příkladu je adresa URL pro požadavek Ajax nastavena pomocí parametru beforeSend.
Nastavení více obslužných rutin událostíV předchozích příkladech jsme reagovali na výskyt událostí spojených s požadavky Ajax voláním jediné funkce, ale v parametrech success, error, complete a beforeSend můžete zadat pole funkcí, z nichž každá bude provedena, když bude odpovídající událost je spuštěna. Jednoduchý příklad je uveden níže:
$(function() ( $.ajax(( success: , beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); function processData(data, status, jqxhr) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) funkce reportStatus(data, status, jqxhr) ( console.log("Stav: " + stav + " Kód výsledku: " + jqxhr.status); ) ));
V tomto příkladu je parametr úspěchu nastaven na pole sestávající ze dvou funkcí, z nichž jedna používá data k přidávání prvků do dokumentu a druhá tiskne informace do konzoly.
Nastavení kontextu pro událostiParametr context umožňuje zadat prvek, který bude přiřazen k proměnné this, když je zavolána obsluha události. To lze použít pro přístup k cílovým prvkům v dokumentu, aniž byste je museli vybírat ve funkci handleru. Odpovídající příklad je uveden níže:
$(function() ( $.ajax(( success: function(data) (var template = $("#flowerTmpl")); template.tmpl(data.slice(0, 3)).appendTo("#row1") ; template.tmpl(data.slice(3)).appendTo("#row2"); ), beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ), kontext: $("h1 "), complete: function(jqxhr, status) ( var color = status == "úspěch" ? "green" : "red"; this.css("border", "silná plná " + barva); ) )); ));
Zde je parametr kontextu nastaven na objekt jQuery obsahující prvky h1 dokumentu. Ve funkci definované parametrem complete orámujeme vybrané prvky (v tomto případě prvek, protože v dokumentu je pouze jeden prvek h1) voláním metody css() na objektu jQuery (odkazovaném tímto). Barva ohraničení je určena na základě stavu požadavku.
Parametr context lze použít k nastavení libovolného objektu jako kontextu a vy jste zodpovědní za provádění pouze platných operací s tímto objektem. Pokud například nastavíte kontext na HTMLElement, musíte tento objekt předat funkci $() před voláním jakékoli metody jQuery na něm.
Nastavení základních parametrů pro požadavky AjaxExistuje skupina parametrů, pomocí kterých můžete provést základní nastavení požadavku Ajax (některé z nich, adresu URL a typ, jsme probrali výše). Tyto jsou ze všech dostupných možností nejméně zajímavé a jejich názvy většinou mluví za vše. Příslušné parametry jsou uvedeny v tabulce níže:
| přijímá | Nastaví požadavek na hlavičku Accept, která určuje typy MIME podporované prohlížečem. Ve výchozím nastavení je tato hodnota určena parametrem dataType |
| mezipaměti | Hodnota false znamená, že obsah požadavku by server neměl ukládat do mezipaměti. Ve výchozím nastavení jsou všechny datové typy kromě skriptu a jsonp ukládány do mezipaměti |
| typ obsahu | Nastavuje hodnotu záhlaví obsahu prohlídky pro požadavek |
| datový typ | Určuje, jaké typy dat jsou očekávány od serveru. Pokud je tato možnost použita, jQuery bude ignorovat informace poskytnuté serverem o typu požadavku |
| hlavičky | Určuje další záhlaví a hodnoty, které by měly být součástí požadavku |
| jsonp | Určuje řetězec, který se má použít místo funkce zpětného volání při vytváření požadavků JSONP (požadavek mezi doménami). Tento parametr vyžaduje souhlas se serverem |
| jsonpCallback | Určuje název funkce zpětného volání, která by měla být použita namísto automaticky generovaného náhodného názvu používaného jQuery ve výchozím nastavení |
| Heslo | Určuje heslo, které by mělo být použito v požadavku při předávání autentizační procedury |
| scriptCharset | Sděluje jQuery, kterou znakovou sadu použít při kódování požadovaného obsahu JavaScriptu |
| Časový limit | Nastavuje dobu trvání časového limitu (v milisekundách) pro požadavek |
| uživatelské jméno | Určuje uživatelské jméno, které má být použito v požadavku na ověření |
Uživatelé si často ani neuvědomují, že požadavky Ajaxu se provádějí, a proto není špatný nápad zadat přijatelnou dobu časového limitu, protože to uživatelům ušetří únavné čekání na dokončení nějakého neznámého procesu. Příklad nastavení časového limitu pro požadavek je uveden níže:
$(function() ( $.ajax(( timeout: 5000, headers: ( "X-HTTP-Method-Override": "PUT" ), success: function(data) ( var template = $("#flowerTmpl")) ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), chyba: function(jqxhr , status, errorMsg) ( console.log("Chyba: " + stav); ) )); ));
V tomto příkladu parametr timeout nastavuje maximální dobu časového limitu na 5 sekund. Pokud není požadavek do této doby dokončen, bude zavolána funkce zadaná pomocí parametru error a zobrazí se kód chyby určený parametrem status.
Časovač se spustí okamžitě po odeslání požadavku do prohlížeče a většina prohlížečů ukládá omezení na počet požadavků, které lze provést současně. To znamená, že existuje riziko, že v době, kdy vyprší časový limit, požadavek ani nebude spuštěn. Abyste tomu zabránili, musíte si být vědomi omezení prohlížeče a velikosti a očekávané doby trvání všech ostatních požadavků Ajaxu, které jsou spuštěny.
Tento příklad níže navíc používá parametr headers k přidání záhlaví k požadavku. Objekt zobrazení dat se používá k určení záhlaví. Zde použitá hlavička může být užitečná pro vytváření webových aplikací, které podporují architektonický styl REST, pokud jej server správně rozpozná.
Použití dalších možností konfiguraceNásledující části popisují nejužitečnější a nejpozoruhodnější pokročilé možnosti, které se vztahují na požadavky Ajax. Obvykle se používají zřídka, ale když jsou potřeba, jsou nepostradatelné. Tyto možnosti vám umožňují vyladit, jak jQuery spolupracuje s Ajaxem.
Vytváření synchronních požadavkůRežim provádění dotazu je řízen pomocí asynchronní parametr. Výchozí hodnota true pro tento parametr znamená, že požadavek bude proveden v asynchronním režimu, zatímco hodnota false je synchronní režim.
Když je požadavek spuštěn synchronně, metoda ajax() se chová jako normální funkce a prohlížeč pokračuje ve vykonávání dalších instrukcí skriptu až po dokončení požadavku.
Ignorování dat, která zůstanou nezměněnaPoužíváním parametr ifModified Je možné zajistit, aby data byla přijata pouze v případě, že se od posledního požadavku změnila. Toto chování je určeno hlavičkou Last-Modified. Vyhnete se tak zbytečným datovým přenosům, které uživateli neposkytnou žádné nové informace oproti tomu, co již má. Ve výchozím nastavení je ifModified false, což říká jQuery, aby ignorovalo hlavičku Last-Modified a přesto poskytlo data.
Příklad použití tohoto parametru je uveden níže:
$(funkce() ( $("tlačítko").click(funkce(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status) ( if (status == ") success") ( $("#row1, #row2").children().remove(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) else if (status == "notmodified") ( $("img").css("border" , "hustá plná zelená"); ) ) )); e.preventDefault(); )) ));
Tento příklad nastaví parametr ifModified na hodnotu true. Funkce úspěchu je volána vždy, ale pokud se obsah od posledního požadavku nezměnil, pak argument data bude nedefinovaný a argument status bude nemodifikovaná hodnota.
V tomto případě jsou provedené akce určeny hodnotou argumentu status. Pokud je hodnota tohoto argumentu úspěch, pak se argument data použije k přidání prvků do dokumentu. Pokud není argument status změněn, pak použijeme metodu css() k orámování prvků, které již v dokumentu jsou.
V reakci na událost click spojenou s tlačítkem je zavolána metoda ajax(). To umožňuje opakovat stejný dotaz vícekrát a demonstrovat účinek parametru ifModified, jak je znázorněno na obrázku:
Jakkoli je tato možnost užitečná, doporučuji ji používat opatrně. Pokud je požadavek odeslán jako výsledek akce uživatele (například kliknutí na tlačítko), existuje možnost, že uživatel na tlačítko klikl, protože předchozí požadavek nebyl dokončen podle očekávání.
Představte si, že požadujete data, ale metoda uvedená v parametru success obsahuje chybu, která brání správné aktualizaci obsahu dokumentu. Vaší další akcí bude pokus o opětovné kliknutí na tlačítko, abyste dosáhli očekávaného výsledku. Pokud parametr ifModified použijete špatně, můžete ignorovat akce uživatele a donutit je, aby provedli vážnější akci k vyřešení problému.
Zpracování kódu odpovědiparametr statusCode umožňuje vybrat možnosti pro další akce v závislosti na kódu odpovědi na požadavky HTTP. Lze jej použít buď místo parametrů úspěchu a chyby, nebo navíc k nim. Níže je uveden příklad nezávislého použití parametru statusCode:
$(function() ( $.ajax(( url: "mydata.json", statusCode: ( 200: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), 404: function(jqxhr, status, errorMsg) ( $("") .text("Stav: " + stav + " Chyba: " + errorMsg) .insertAfter("h1"); ) ) )); ));
Zde je parametr statusCode specifikován jako objekt, který vytváří vztah mezi kódy odpovědí na požadavky HTTP a odpovídajícími funkcemi, které je třeba na serveru provést. Které argumenty jsou předány funkcím, závisí na tom, zda kód odpovědi odráží úspěšný požadavek nebo chybu.
Pokud kód (například 200) odpovídá úspěšnému požadavku, pak jsou argumenty stejné jako ty, které by byly předány funkci určené parametrem úspěchu. V opačném případě (například kód odezvy 404 označující, že požadovaný soubor nebyl nalezen) jsou argumenty stejné jako ty, které by byly předány funkci určené parametrem error.
Jak vidíte, tento nástroj neposkytuje přímé informace o kódech odpovědí. Často jej používám při ladění interakcí mezi prohlížečem a serverem, obvykle proto, abych zjistil, proč se jQuery nechová tak, jak bych chtěl. V tomto případě používám kromě parametrů úspěchu a chyby parametr statusCode a odesílám informace do konzole. Pokud se tyto parametry použijí společně, nejprve se provedou funkce úspěchu a chyby a poté se provedou funkce definované parametrem statusCode.
Data odezvy předčištěníPoužíváním parametr dataFilter můžete zadat funkci, která bude volána k předběžnému vyčištění dat vrácených serverem. Tento nástroj je nepostradatelný v případech, kdy vám data odesílaná serverem nejsou zcela vyhovující, ať už proto, že jsou naformátována nevhodným způsobem, nebo proto, že obsahují data, která nechcete zpracovávat.
Tento nástroj mi hodně pomáhá při práci se servery Microsoft ASP.NET, které připojují cizí data k datům JSON. Odstranění takových dat pomocí parametru dataFilter vyžaduje pouze minimální úsilí. Příklad použití parametru dataFilter je uveden níže:
$(function() ( $.ajax(( url: "mydata.json", success: function(data)) (var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), dataType: "json", dataFilter: function(data, dataType) ( if (dataType = = "json") ( var filterData = $.parseJSON(data); filterData.shift(); return JSON.stringify(filteredData.reverse()); ) else ( return data; ) ) )); ));
Funkce předává data přijatá ze serveru a hodnotu parametru dataType. Pokud dataType není použit, druhý argument je nastaven na hodnotu undefined. Vaším úkolem je vrátit filtrovaná data. V tomto příkladu jsou předmětem naší pozornosti data ve formátu JSON:
Var filterData = $.parseJSON(data); filterData.shift(); return JSON.stringify(filteredData.reverse()); ...
Aby byl příklad názornější, provádí některé další operace. Nejprve jsou data JSON analyzována do pole JavaScript pomocí metody jQuery parseJSON. Poté se první prvek z pole odstraní pomocí metody shift() a pořadí zbývajících prvků se obrátí pomocí metody reverse().
Vše, co funkce potřebuje, je vrátit řetězec, takže zavoláme JSON.stringify() s vědomím, že jQuery převede data na objekt JavaScript, než zavolá funkci pro úspěch. Tento příklad demonstroval schopnost odstranit prvek z pole, nicméně v závislosti na situaci jsme mohli provést jakýkoli jiný typ zpracování.
Konečný výsledek je znázorněn na obrázku:
Uložil jsem si recenzi jednoho z mých oblíbených nastavení jako poslední. Možná jste si všimli, že jQuery automaticky provádí některé pohodlné konverze při načítání určitých typů dat. Například při přijímání dat JSON poskytuje jQuery úspěšnou funkci, která používá objekt JavaScript spíše než původní nezpracovaný řetězec JSON.
Ke správě takových transformací se používá parametr převodníků. Hodnota tohoto parametru je objekt, který vytváří mapování mezi datovými typy a funkcemi používanými k jejich zpracování. Níže uvedený příklad ukazuje, jak použít tuto možnost k automatickému převodu dat HTML na objekt jQuery:
$(funkce() ( $.ajax(( url: "flowers.html", // V tomto příkladu načteme označení HTML, nikoli data JSON úspěch: function(data, status, jqxhr) ( var elems = data.filter( "div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ), převodníky: ( " text html": function(data) ( return $(data); ) ) )); ));
Tento příklad registruje funkci pro datový typ text html. Všimněte si mezery mezi komponentami zadaného typu MIME (na rozdíl od formy text/html). Funkce přijímá data přijatá ze serveru a vrací převedená data. V tomto případě transformace dat spočívá v předání fragmentu HTML obsaženého v souboru flowers.html funkci $() a vrácení výsledku. To znamená, že normální metody jQuery platí pro objekt předaný jako datový argument úspěchu.
Při práci s převodníky dat se můžete nechat příliš unést. Vždy se snažím vyhnout pokušení dělat s těmito funkcemi víc, než bych měl. Někdy jsem například v pokušení použít šablonu na data JSON a předat zpět výsledné prvky HTML. I když je tato technika velmi pohodlná, nebude vám dobře sloužit, pokud se někdo bude snažit váš kód rozšiřovat nebo například vy sami budete muset později intenzivně zpracovávat data, abyste jej dostali do původní podoby.
Nastavení a filtrování požadavků AjaxNyní, když jste se seznámili s metodou ajax() a dostupnými možnostmi pro práci s ní, můžeme se podívat na několik dalších metod, které jQuery poskytuje pro snazší přizpůsobení požadavků.
Definování výchozích nastaveníMetoda ajaxSetup() vám umožňuje nastavit hodnoty parametrů, které budou ve výchozím nastavení použity ve všech požadavcích Ajax, čímž vás zbaví nutnosti konfigurovat parametry u každého požadavku. Příklad použití této metody je uveden níže:
") .text("Status: " + status + " Error: " + errorMsg) .insertAfter("h1"); ), převodníky: ( "text html": function(data) ( return $(data); ) ) )); $.ajax(( url: "flowers.html", success: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice( 0, 3).appendTo("#řádek1"); elems.slice(3).appendTo("#řádek2"); ) )); ));
Metoda ajaxSetup() se volá pomocí funkce jQuery $ stejným způsobem, jako byla volána metoda ajax(). Argument metody ajaxSetup() je objekt obsahující hodnoty parametrů, které chcete standardně používat pro všechny požadavky Ajax. V tomto příkladu nastavíme výchozí hodnoty pro parametry timeout, global, error a konvertory.
Po zavolání metody ajaxSetup() potřebujeme pouze definovat hodnoty parametrů, které chceme změnit, nebo ty, které nejsou standardně poskytovány. To poskytuje významnou úsporu času v případech, kdy musíte provádět mnoho dotazů se stejnými hodnotami parametrů.
Žádost o filtrováníMetoda ajaxSetup() definuje základní hodnoty konfiguračních parametrů, které platí pro všechny požadavky Ajax. Schopnost dynamicky konfigurovat parametry pro jednotlivé požadavky Ajax poskytuje metoda ajaxPrefilter(). Příklad použití této metody je uveden níže:
$(function() ( $.ajaxSetup(( časový limit: 15000, globální: false, error: function(jqxhr, status, errorMsg) ( $("") .text("Status: " + status + " Error: " + errorMsg) .insertAfter("h1"); ), převodníky: ( "text html": function(data) ( return $(data); ) ) ); $.ajaxPrefilter("json html", function(settings, originalSettings , jqxhr) ( if (originalSettings.dataType == "html") ( settings.timeout = 2000; ) else ( jqxhr.abort(); ) )) $.ajax(( url: "flowers.html", dataType: " html ", success: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems .slice(3).appendTo("#řádek2"); ) )); ));
Funkce, kterou určíte, bude provedena pro každý nový požadavek Ajax. Argumenty předávané funkci jsou parametry požadavku (včetně všech výchozích hodnot, které nastavíte pomocí metody ajaxSetup()), stejně jako původní parametry předané metodě ajax() (s výjimkou jakýchkoli výchozích hodnot) a požadavek jqXHR objekt.
Provádíme změny v objektu předávaném jako první argument, jak je znázorněno v příkladu. Pokud je v tomto scénáři mezi parametry předávanými metodě ajax() přítomen parametr dataType, pak je doba trvání časového limitu nastavena na dvě sekundy. Aby se zabránilo odeslání všech ostatních požadavků, je na objektu jqXHR zavolána metoda abort().
Požadavky skriptu jsou pouze GET a mají potíže se sledováním chyb. Ale pak - mohou být provedeny na libovolných doménách,
což je hlavní oblast použití této dopravy.
Pomocí DOM lze vytvořit libovolné značky a přidat je do dokumentu. Pokud vytvoříte uzel s odkazem na externí zdroj,
poté, když do dokumentu přidáte značku, spustí se proces stahování. A server dynamicky generuje odpověď javascript a vkládá tam potřebná data.
Následující funkce přidá takovou značku do dokumentu s požadovaným id a src. Přidává prvky do hlavy, takže nebude fungovat, pokud není přítomna hlava.
Funkce attachmentScript(id, src)( var element = dojo.doc.createElement("script") element.type = "text/javascript" element.src = src element.id = id document.getElementsByTagName("head").appendChild (živel)
Například zavolejte
AttachScript("script1","/service/newMail.js?name=Vasya")
přidá značku do záhlaví dokumentu:
Prohlížeč značku okamžitě zpracuje: vyžádá si newMail.js z dané URL a provede ji.
Když je skript načten, musí se nějak ohlásit, že data byla načtena a lze s nimi manipulovat.
Obvykle se k tomu používá zpětné volání, to znamená, že na konci skriptu je volána speciální funkce.
Aby bylo jasné, který skript má volat které zpětné volání, je název funkce předán jako samostatný parametr. Například,
... // nastaví handler var handler = function (data) ( ... ) // získal číslo pro další skript handlerId++ // ve skutečnosti není zpětným voláním samotný handler, ale servisní funkce // která navíc zpracuje úspěšné načítání a vyčistí nadbytečnou značku skriptu scriptHandlers["script_"+handlerId] = makeHandler(handler) attachmentScript(handlerId, "/service/newMail.js?name=Vasya&callback=scriptHandlers.script_"+handlerId)
Server se podívá na hodnotu parametru zpětného volání a přidá do skriptu volání scriptHandlers.script_XXX, kde script_XXX je hodnota parametru zpětného volání.
Server obvykle jednoduše předá data klientovi a na požadavek odpoví podobným voláním
ScriptHandlers.script_XXX((odesílatel:"Petya",senderId:6))
Tento formát se nazývá JSONP: JSON with P přidávání, protože objekty javascript se používají pro výměnu dat (nikoli XML atd.) a používá se
doplňková funkce (vycpávka).
Délka adresy URL v požadavcích GET je omezená. Záleží na serveru prohlížeče, přibližně 1kb je bezpečná hodnota.
Proto se pro odesílání větších fragmentů na server používá vícedílný protokol.
Každý požadavek je dodáván se dvěma parametry: jedinečným ID a číslem dílu.
První prvek vícedílného požadavku má part=1, poslední nemá parametr part. Server tak může počítat kousky, které obdrží.
Chyby v komunikaciKaždý požadavek vytváří časovač. Pokud je požadavek úspěšný, časovač se vymaže. Po 10 sekundách se časovač spustí a vygeneruje chybu požadavku.
Takové zpracování je mnohem horší než v iframe nebo XmlHttpRequest, kde se chyba na straně serveru (404 500) okamžitě projeví.
Sada párů klíč/hodnota, které konfigurují požadavek AJAX. Všechny parametry jsou volitelné. Je přijatelné, ale nedoporučuje se nastavit výchozí hodnotu pro jakýkoli parametr pomocí metody $.ajaxSetup().Metoda $.ajax() podporuje následující parametry:
- "xml" - vrátí XML dokument, který lze vykreslit pomocí jQuery.
- "html" - vrátí HTML jako prostý text budou značky zpracovány a spuštěny po vložení do modelu objektu dokumentu ( DOM).
- "script" - vyhodnotí odpověď jako JavaScript a vrátí jej jako prostý text. Zakáže ukládání do mezipaměti přidáním parametru _= do řetězce dotazu, i když je parametr mezipaměti true . Tím se metoda obrátí POŠTA PROTI DOSTAT pro požadavky napříč doménami.
- "json" - vyhodnotí odpověď jako JSON a vrátí objekt JavaScript. Více domén "json" požadavky jsou převedeny na "jsonp", pokud jsonp není uvedeno v parametrech požadavku: false . Data JSON jsou analyzovány v přísném pořadí a musí být v souladu s obecně uznávaným formátem, jakékoli nesprávné JSON je odmítnut a je vyvolána chyba. Od jQuery 1.9 se prázdná odpověď nepřijímá, server musí jako odpověď vrátit NULL nebo ().
- "jsonp" - načte data ve formátu JSON, pomocí formátu ke stažení JSONP. Přidá na konec další parametr "?callback=?" URL adresy pro zadání názvu funkce handleru. Zakáže ukládání do mezipaměti přidáním parametru _= do URL adresu, i když je parametr cache true .
- "text" je běžný textový řetězec.
- více hodnot - hodnoty jsou odděleny mezerou. Od verze 1.5 může jQuery převést datový typ přijatý v Content-Type hlavičky na datový typ, který požadujete. Pokud například chcete, aby byla textová odpověď interpretována jako XML, použijte pro tento datový typ "text XML". Můžete také vytvořit požadavek JSONP, přijmout jej jako text a interpretovat jej jako XML: "jsonp text XML" . Následující řádek udělá totéž: "jsonp XML" , jQuery se pokusí převést JSONP PROTI XML, po neúspěšném pokusu o konverzi JSONP do textu a poté z textu do XML.
Typ: Function(jqXHR jqXHR, Tětiva textStatus, Tětiva chybaHozena).
Funkce zpětného volání, která je volána, pokud nebyl dokončen požadavek AJAX. Funkce obdrží tři argumenty:- jqXHR- objekt jqXHR (v jQuery 1.4.x objekt XMLHttpRequest).
- textStatus- řetězec popisující typ chyby, ke které došlo. Možné hodnoty (jiné než null) nejsou "Časový limit", "chyba", "potrat" A "chyba analyzátoru".
- chybaHozena- další objekt výjimky, pokud došlo. Když dojde k chybě HTTP argument přijímá textová část stavu, kupř. "Nenalezeno" nebo "Interní chyba serveru".
globální (výchozí: true ).
Typ: Boolean.
Booleovský parametr, který určuje, zda je pro tento požadavek povoleno volat obslužné nástroje globálních událostí AJAX. Výchozí hodnota je true . Pokud potřebujete zabránit volání globálních obslužných rutin událostí, jako je .ajaxStart() nebo .ajaxStop(), použijte false .záhlaví (výchozí: ( ) ).
Typ: PlainObject.
Objekt, který obsahuje páry klíč/hodnota dalších hlaviček požadavku, které se mají odeslat spolu s požadavkem pomocí objektu XMLHttpRequest. Vezměte prosím na vědomí, že název X-Requested-With: XMLHttpRequest se vždy přidá, ale hodnotu XMLHttpRequest lze ve výchozím nastavení změnit pomocí tohoto parametru. Hodnoty záhlaví lze také přepsat parametrem beforeSend. Přidáno v jQuery 1.5.ifModified (výchozí: false ).
Typ: Boolean.
Ve výchozím nastavení je hodnota false , ignoruje pole záhlaví požadavku HTTP, a když je nastaveno na hodnotu true, požadavek AJAX se přenese do úspěšného stavu ( úspěch), pouze pokud se odpověď ze serveru od posledního požadavku změnila. Ověření se provádí zaškrtnutím pole hlavičky Last-Modified. Od verze jQuery 1.4, kromě hlavičky Last-Modified se kontroluje také „etag“ ( značka entity) je soukromý identifikátor přiřazený webovým serverem konkrétní verzi zdroje nalezeného na adrese URL. Pokud se obsah zdroje pro tuto adresu změní na nový, je přiřazen nový etag.isLocal (výchozí: závisí na aktuální poloze).
Typ: Boolean.
Použijte true k definování aktuálního prostředí jako "lokálního" (např. file:///url), i když jej jQuery jako takové ve výchozím nastavení nerozpozná. Následující protokoly jsou aktuálně uznávány jako místní: soubor, *-rozšíření A widget. Pokud potřebujete změnit parametr isLocal, doporučuje se to provést jednou pomocí funkce $.ajaxSetup(). Přidáno v jQuery 1.5.1.Typ: Boolean nebo String.
Přepíše název funkce zpětného volání v JSONPžádost. Tato hodnota bude použita místo "callback" ( "http://domain.ru/test.php?callback=?") jako součást řetězce dotazu v adrese URL. Například hodnota (jsonp: "onLoad") bude serveru předána jako následující řetězec dotazu "http://domena/test.php?onLoad=?".
Od verze jQuery 1.5 nastavení parametru jsonp na hodnotu false zabrání přidání řetězce „?callback“ do adresy URL nebo se pokusí použít k vyřešení odpovědi „=?“. V tomto případě musíte dodatečně zadat hodnotu parametru jsonpCallback, například: ( jsonp : false , jsonpCallback : "callbackName " ) Z bezpečnostních důvodů, pokud nedůvěřujete cíli svých požadavků AJAX, pak se doporučuje nastavte hodnotu parametru jsonp na false .jsonpCallback.
Typ: Řetězec nebo Funkce.
Určuje název funkce zpětného volání pro JSONPžádost. Tato hodnota bude použita namísto náhodného názvu, který je automaticky vygenerován a přiřazen jQuery. Doporučuje se, aby si jQuery vygeneroval jedinečný název sám, usnadní to správu požadavků a řešení případných chyb. V některých případech nastavení vlastního názvu funkce zlepší ukládání do mezipaměti prohlížeče DOSTATžádosti.
Od jQuery 1.5 můžete zadat funkci jako hodnotu parametru jsonpCallback. V tomto případě musí být hodnota parametru jsonpCallback nastavena na návratovou hodnotu této funkce.metoda (výchozí: "DOSTAT").
Typ: Řetězec.
Metoda HTTP, použitý pro dotaz (např. "POŠTA", "DOSTAT", "DÁT"). Přidáno v jQuery 1.9.0.mimeType.
Typ: Řetězec.
Typ MIME, který přepíše výchozí typ MIME určený v objektu XHR. Přidáno v jQuery 1.5.1.Heslo.
Typ: Řetězec.
Heslo, které bude použito s XMLHttpRequest v odpovědi na žádost o ověření přístupu HTTP.processData (výchozí: true).
Typ: Boolean.
Ve výchozím nastavení budou data předaná datovému parametru jako objekt zpracována a převedena na řetězec dotazu vhodný pro výchozí datový typ "application/x-www-form-urlencoded". Pokud potřebujete odeslat DOMDocument nebo jiná nezpracovaná data, nastavte tento parametr na false .scriptCharset.
Typ: Řetězec.
Nastaví atribut charset (kódování znaků) na značku HTML použitou v požadavku. Používá se, když se kódování na stránce liší od kódování vzdáleného skriptu. Upozorňujeme, že parametr scriptCharset se vztahuje pouze na požadavky mezi doménami s parametrem typu s hodnotou "DOSTAT"(výchozí) a parametr dataType s hodnotou "jsonp" nebo "skript".statusCode (výchozí: ( ) ).
Typ: PlainObject.
Objekt číselných kódů HTTP a funkce, které budou volány, když má kód odezvy serveru příslušnou hodnotu (specifický kód HTTP). Například následující funkce bude volána, pokud je ze serveru přijat kód odpovědi 404 nebo "Nenalezeno"(standardní kód odezvy HTTP označující, že klient byl schopen komunikovat se serverem, ale server nenašel požadovaná data.): $.ajax(( statusCode : ( 404: function ()( // spuštění funkce, pokud HTTP) kód odpovědi 404 alert("stránka nenalezena"); ), 403: function ()( // provedení funkce, pokud je kód odpovědi HTTP 403 alert("přístup odepřen"); ) ) ) );úspěch.
Typ: Funkce (Cokoliv data, Tětiva textStatus,jqXHR jqXHR).
Funkce zpětného volání, která je volána, pokud je požadavek AJAX úspěšný. Funkci jsou předány tři argumenty:- data- data vrácená ze serveru. Data jsou formátována podle parametrů dataType , nebo dataFilter , pokud je zadán
- textStatus- řetězec popisující stav požadavku.
- jqXHR- objekt jqXHR (až do verze jQuery 1.4.x objekt XMLHttpRequest).
Časový limit.
Typ: Číslo.
Instaluje se v milisekundy zažádat o timeout. Význam 0 znamená, že nebyl nastaven žádný časový limit. Upozorňujeme, že tento parametr přepíše hodnotu časového limitu nastavenou pomocí funkce $.ajaxSetup(). Časový limit čekání začíná v okamžiku volání metody $.ajax().tradiční.
Typ: Boolean.
Pokud plánujete použít tradiční možnosti serializace (vhodné pro použití v řetězci URLžádost nebo žádost AJAX), pak nastavte hodnotu tohoto parametru na true .typ (výchozí: "DOSTAT").
Typ: Řetězec.
Alias pro parametr metody. Pokud používáte verze, měli byste použít typ jQuery před 1.9.0.url (výchozí: aktuální stránku).
Typ: Řetězec.
Řádek obsahující URL adresu, na kterou je žádost zaslána.uživatelské jméno.
Typ: Řetězec.
Uživatelské jméno, které má být použito s XMLHttpRequest v odpovědi na žádost o ověření přístupu HTTP.xhr (výchozí: ActiveXObject, když bude dostupný ( internet Explorer), v ostatních případech XMLHttpRequest .
Typ: Function() .
Zpětné volání k vytvoření objektu XMLHttpRequest. Pomocí tohoto parametru můžete přepsat objekt XMLHttpRequest a poskytnout svou vlastní implementaci.xhrFields.
Typ: PlainObject.
Objekt obsahující dvojice název_pole:hodnota_pole, které budou nastaveny na objekt XHR. Můžete například definovat, zda mají být požadavky mezi doménami vytvářeny pomocí přihlašovacích údajů, jako je např cookie, autorizační hlavičky nebo certifikáty TLS: $.ajax(( url : "cross_domain_url", // adresa, na kterou bude odeslán požadavek xhrFields : ( withCredentials: true // podporováno v jQuery 1.5.1 + ) ) );
přijímá (výchozí: závisí na dataType ).
Typ: PlainObject.
Sada párů klíč/hodnota, které jsou odesílány Akceptovat záhlaví požadavku. Tato hlavička sděluje serveru, jaký druh odpovědi požadavek přijme jako odpověď. Všimněte si, že hodnota parametru zadaného v parametru dataType (typ dat, který očekáváme od serveru) je mapována na hodnotu zadanou v parametru. Kromě toho, abyste správně zpracovali odpověď ze serveru, musíte v parametru converters zadat funkci, která vrátí převedenou hodnotu odpovědi. Například: $.ajax((přijímá : ( mycustomtype: "application/x-some-custom-type") , // specifikuje způsob zpracování převodníků odpovědí : ( "text mycustomtype": function ( výsledek) ( // vrátí převedenou hodnotu odpovědi return newresult; ) ), // Očekávaný datový typ ("mycustomtype") dataType : "mycustomtype" ) );
asynchronní (výchozí: true ).
Typ: Boolean.
Ve výchozím nastavení jsou všechny požadavky odesílány asynchronně; pokud potřebujete uspořádat synchronní požadavky, nastavte tento parametr na hodnotu false . Všimněte si, že dotazy mezi doménami a prvek, jehož parametr dataType je "jsonp" nepodporují požadavky v synchronním režimu. Vezměte prosím na vědomí, že pomocí synchronních požadavků můžete dočasně zablokovat prohlížeč deaktivací jakýchkoli akcí, když je požadavek aktivní.
Funkce zpětného volání, která bude volána před provedením požadavku AJAX. Funkce vám umožňuje změnit objekt jqXHR (v jQuery 1.4.x objekt XMLHTTPRequest) před jeho odesláním. Objekt jqXHR je doplněk, který rozšiřuje objekt XMLHttpRequest, objekt obsahuje mnoho vlastností a metod, které umožňují získat úplnější informace o odpovědi serveru, a objekt také obsahuje metody Promise. Pokud funkce beforeSend vrátí hodnotu false , bude požadavek AJAX zrušen. Od verze jQuery 1.5 funkce beforeSend bude volána bez ohledu na typ požadavku.
mezipaměť (výchozí: true, pro dataType "skript" A "jsonp" Nepravdivé ).
Typ: Boolean.
Pokud je nastaveno na hodnotu false, způsobí to, že požadované stránky nebudou prohlížečem uloženy do mezipaměti. Pamatujte, že false bude správně fungovat pouze s HLAVA A DOSTATžádosti.
kompletní.
Typ: Function(jqXHR jqXHR, Tětiva textStatus).
Funkce, která je volána, když požadavek skončí (funkce se provede po událostech AJAX "úspěch" nebo "chyba"). Funkce jsou předány dva parametry: jqXHR(v objektu jQuery 1.4.x XMLHTTPRequest) a řádek odpovídající stavu požadavku ( "úspěch", "neupraveno", "žádný obsah", "chyba", "Časový limit", "potrat" nebo "chyba analyzátoru"). Od jQuery 1.5 může úplný parametr přijmout pole funkcí, které budou volány jedna po druhé.
obsah.
Typ: PlainObject.
Objekt sestávající z párů řetězec/regulární výraz, které určují, jak jQuery zpracuje (analyzuje) odpověď v závislosti na typu obsahu. Přidáno v jQuery 1.5.
contentType (výchozí: "application/x-www-form-urlencoded; charset=UTF-8").
Typ: Boolean nebo String.
Definuje typ obsahu, který je zadán v požadavku při odesílání dat na server. Od jQuery 1.6 je možné zadat hodnotu false , v takovém případě jQuery nepředá pole v záhlaví Typ obsahu vůbec.
kontext.
Typ: PlainObject.
Při provádění funkcí zpětného volání AJAX je jejich kontext provádění objekt okna. Parametr context vám umožňuje nakonfigurovat kontext provádění funkce tak, že $(this ) bude odkazovat na konkrétní prvek DOM nebo objekt. Například: $.ajax(( url : "test.html ", context : $(.myClass "), // kontext provedení nové funkce úspěch : function ()( // pokud je požadavek úspěšný, zavolejte funkci $ (toto ).html ("Všechno je v pořádku"); // přidání textového obsahu do prvku pomocí class.myClass ) ) );
převodníky
Výchozí hodnoty:
( "* text ": window.String, // libovolný typ v textu "text html": true, // text v html "text json": jQuery.parseJSON, // text v JSON "text xml": jQuery.parseXML // text v XML) Typ: PlainObject.
Objekt obsahující datový typ, který se má převést, a způsob, jak jej převést. Hodnota každého převodníku je funkce, která vrací převedenou hodnotu odezvy. Přidáno v jQuery 1.5.
crossDomain (výchozí: false pro požadavky v rámci stejné domény, true pro požadavky mezi doménami).
Typ: Boolean.
Pokud chcete provést požadavek mezi doménami ve stejné doméně (například požadavek jsonp), nastavte tento parametr na hodnotu true . To umožní například přesměrovat požadavek na jinou doménu z vašeho serveru. Přidáno v jQuery 1.5.
Typ: PlainObject nebo String nebo Array.
Data, která budou odeslána na server. Pokud se nejedná o řetězec, převedou se na řetězec dotazu. Pro DOSTAT požadavky, bude řetězec přidán k URL. Abyste zabránili automatickému zpracování, můžete použít parametr processData s hodnotou false . Pokud jsou data přenášena jako součást objektu, musí sestávat z párů klíč/hodnota. Pokud je hodnotou pole, jQuery serializuje více hodnot se stejným klíčem (v závislosti na hodnotě tradičního parametru, který umožňuje tradiční typ serializace založený na metodě $.param).
dataFilter.
Typ: Function(String data, Tětiva typ) => Cokoli .
Funkce je volána po úspěšném dokončení požadavku AJAX a umožňuje vám zpracovat „surová“ data přijatá z odpovědi serveru. K vrácení údajů musí dojít ihned po zpracování. Funkce má dva argumenty: data- data přijatá ze serveru ve formě řetězce a typ- typ těchto dat (hodnota parametru dataType).
dataType (výchozí: xml, json, skript nebo html).
Typ: Řetězec.
Definuje typ dat, která očekáváte od serveru. Pokud není datový typ zadán, jQuery se jej pokusí určit na základě typu MIME z odpovědi ( XML typ MIM bude mít za následek XML, od jQuery 1.4 json dá předmět JavaScript, skript spustí skript a vše ostatní bude vráceno jako řetězec).
Základní typy (výsledek je předán jako první argument funkci zpětného volání úspěchu):
