Úvod do Ajaxu. Ako môžem prinútiť jQuery, aby vykonal synchrónnu namiesto asynchrónnej požiadavky Ajax? Synchrónny ajax Jquery

Odošle požiadavku na server bez opätovného načítania stránky. Ide o nízkoúrovňovú metódu s množstvom nastavení. Je základom fungovania všetkých ostatných metód ajax. Má dve možnosti použitia:

url — adresa žiadosti.
nastavenia - v tomto parametri môžete zadať nastavenia pre túto požiadavku. Určené pomocou objektu vo formáte (názov:hodnota, názov:hodnota...) . Nevyžaduje sa žiadne z nastavení. Predvolené nastavenia môžete nastaviť pomocou metódy $.ajaxSetup().

Zoznam nastavení

↓ name :type (predvolená hodnota)

Keď sa vykoná požiadavka, hlavičky označujú povolené typy obsahu očakávané od servera. Hodnoty týchto typov budú prevzaté z akceptovaného parametra.

Štandardne sa všetky požiadavky bez opätovného načítania stránky vyskytujú asynchrónne (to znamená, že po odoslaní požiadavky na server stránka neprestane fungovať počas čakania na odpoveď). Ak potrebujete vykonať požiadavku synchrónne, nastavte parameter na hodnotu false . Požiadavky viacerých domén a požiadavky „jsonp“ nemožno vykonávať synchrónne.

Upozorňujeme, že synchrónne spúšťanie požiadaviek môže viesť k zablokovaniu stránky, kým sa požiadavka úplne nedokončí.

Toto pole obsahuje funkciu, ktorá sa zavolá bezprostredne pred odoslaním požiadavky ajax na server. Táto funkcia môže byť užitočná na úpravu objektu jqXHR (v starších verziách knižnice (do 1.5) sa namiesto jqXHR používa XMLHttpRequest). Môžete napríklad zmeniť/špecifikovať potrebné hlavičky atď. Objekt jqXHR bude odovzdaný funkcii ako prvý argument. Druhým argumentom sú nastavenia požiadavky.

V tomto poli môžete zadať ďalšie hlavičky požiadaviek. Tieto zmeny budú zadané pred volaním Send, kde je možné vykonať finálne úpravy hlavičky.

Ak je toto nastavenie nastavené na hodnotu true , požiadavka sa vykoná so stavom „úspešná“ iba v prípade, že sa odpoveď zo servera líši od predchádzajúcej odpovede. jQuery kontroluje túto skutočnosť pohľadom na hlavičku Last-Modified. Od jQuery-1.4 sa okrem Last-Modified kontroluje aj „etag“ (obe poskytuje server a sú potrebné na upozornenie prehliadača, že požadované údaje zo servera sa od predchádzajúcej požiadavky nezmenili) .

Umožňuje vám nastaviť zdrojový stav stránky na lokálny (ako keby to bolo cez protokol súborov), aj keď ho jQuery rozpoznal inak. Knižnica rozhodne, že stránka beží lokálne v prípade nasledujúcich protokolov: file, *-extension a widget.

Odporúča sa nastaviť hodnotu parametra isLocal globálne – pomocou funkcie $.ajaxSetup(), a nie v nastaveniach jednotlivých ajaxových požiadaviek.

Definuje názov parametra, ktorý sa pridá do adresy URL počas požiadavky jsonp (predvolene sa používa „callback“ - „http://siteName.ru?callback=...“).

Od verzie jQuery-1.5 nastavenie tohto parametra na hodnotu false zabráni pridania ďalšieho parametra do adresy URL. V tomto prípade musíte explicitne nastaviť hodnotu vlastnosti jsonpCallback. Napríklad: (jsonp:false, jsonpCallback:"callbackName") .

Definuje názov funkcie, ktorá sa zavolá, keď server odpovie na požiadavku jsonp. Štandardne jQuery generuje vlastný názov pre túto funkciu, čo je preferovaná možnosť, ktorá zjednodušuje prácu knižnice. Jedným z dôvodov, prečo špecifikovať svoju vlastnú funkciu spracovania požiadaviek jsonp, je zlepšiť ukladanie žiadostí GET do vyrovnávacej pamäte.

Od verzie jQuery-1.5 môžete v tomto parametri zadať funkciu, aby ste mohli sami spracovať odpoveď servera. V tomto prípade musí zadaná funkcia vrátiť dáta prijaté zo servera (v zadanej funkcii budú dostupné v prvom parametri).

V predvolenom nastavení sú všetky údaje prenášané na server vopred skonvertované do reťazca (formát adresy URL: fName1=hodnota1&fName2=hodnota2&...) zodpovedajúci "application/x-www-form-urlencoded". Ak potrebujete odoslať údaje, ktoré nemôžu byť predmetom takéhoto spracovania (napríklad dokument DOM), mali by ste zakázať možnosť processData.

Tento parameter sa používa pre cross-domain ajax requesty typu GET, dataType môže byť buď "jsonp" alebo "script". Definuje kódovanie, v ktorom sa vykoná požiadavka medzi doménami. Je to potrebné, ak server v cudzej doméne používa kódovanie, ktoré sa líši od kódovania na serveri jeho natívnej domény.

(Toto nastavenie bolo zavedené v jQuery-1.5) množina párov, v ktorých sú kódy vykonávania požiadaviek spojené s funkciami, ktoré budú volané. Napríklad pre kód 404 (stránky neexistujú) môžete na obrazovke zobraziť správu:

$.ajax (( statusCode: ( 404 : funkcia () ( upozornenie ( "Stránka sa nenašla" ) ; ) ) ) );

Funkcie, ktoré reagujú na kódy úspechu požiadavky, dostanú rovnaké argumenty ako funkcie obsluhy úspešnej požiadavky (špecifikované v parametri úspechu) a funkcie, ktoré reagujú na chybové kódy, budú rovnaké ako funkcie chybových funkcií.

Funkcia, ktorá sa zavolá, ak sa požiadavka na server úspešne dokončí. Budú mu odovzdané tri parametre: údaje odoslané serverom a už predspracované (čo sa líši pre rôzne typy údajov). Druhým parametrom je reťazec so stavom vykonania. Tretí parameter obsahuje objekt jqXHR (v starších verziách knižnice (pred 1.5) sa namiesto jqXHR používa XMLHttpRequest). Od verzie jQuery-1.5 môže tento parameter namiesto jedinej funkcie akceptovať celý rad funkcií.

Čas čakania na odpoveď zo servera. Nastavuje sa v milisekundách. Ak je tento čas prekročený, požiadavka bude ukončená s chybou a dôjde k chybovej udalosti (viď popis vyššie), ktorá bude mať status „timeout“.

Čas sa počíta od okamihu zavolania funkcie $.ajax. Môže sa stať, že v tomto momente bude prebiehať niekoľko ďalších požiadaviek a prehliadač oneskorí vykonanie aktuálnej požiadavky. V tomto prípade čas vypršal môže dokončiť, aj keď v skutočnosti žiadosť ešte ani nebola spustená.

V jQuery-1.4 a starších, keď uplynie časový limit objektu XMLHttpRequest, prejde do chybového stavu a prístup k jeho poliam môže vyvolať výnimku. Vo Firefoxe 3.0 a novšom sa požiadavky skriptu a JSONP nezrušia, ak vyprší časový limit. Budú dokončené aj po uplynutí tohto času.

Funkcia, ktorá poskytne objekt XMLHttpRequest. V predvolenom nastavení je pre prehliadače IE tento objekt ActiveXObject a v ostatných prípadoch je to XMLHttpRequest. Pomocou tejto možnosti môžete implementovať svoju vlastnú verziu tohto objektu.

(Toto nastavenie bolo zavedené v jQuery-1.5.1) Sada párov (názov:hodnota) na zmenu/pridanie hodnôt zodpovedajúcich polí objektu XMLHttpRequest. Môžete napríklad nastaviť jeho vlastnosť withCredentials na hodnotu true pri vykonávaní požiadavky viacerých domén:

$.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) );

V jQuery-1.5 vlastnosť withCredentials nie je podporovaná natívnym XMLHttpRequest a bude ignorovaná v požiadavke medzi doménami. Toto bolo opravené vo všetkých nasledujúcich verziách knižnice.

Správcovia udalostí

Nastavenia beforeSend, error, dataFilter, success a complete (ich popis je v predchádzajúcej časti) vám umožňujú nastaviť obslužné rutiny udalostí, ktoré sa vyskytnú v určitých bodoch pri vykonávaní každej požiadavky ajax.

predOdoslaním nastane bezprostredne pred odoslaním požiadavky na server. chyba nastane, keď požiadavka zlyhá. dataFilter nastane, keď dáta prídu zo servera. Umožňuje vám spracovať „surové“ údaje odoslané serverom. úspech nastane, keď sa požiadavka úspešne dokončí. kompletný nastane vždy, keď sa dokončí požiadavka.

Jednoduchý príklad použitia. Po úspešnom dokončení požiadavky zobrazíme správu:

$.ajax (( url: "ajax/test.html" , úspech: funkcia () ( alert ("Načítanie bolo vykonané." ) ; ) ) );

Počnúc jQuery-1.5 metóda $.ajax() vracia objekt jqXHR, ktorý okrem iného implementuje odložené rozhranie, ktoré vám umožňuje špecifikovať ďalšie obslužné programy spustenia. Okrem štandardných metód .done(), .fail() a .then() pre odložený objekt, pomocou ktorých môžete inštalovať obslužné programy, jqXHR implementuje .success(), .error() a .complete() . Deje sa tak v súlade so zvyčajnými názvami metód, ktorými sa inštalujú obslužné programy na vykonávanie požiadaviek ajax. Od verzie jQuery-1.8 však budú tieto tri metódy zastarané.

Niektoré typy požiadaviek, ako napríklad požiadavky jsonp alebo cross-domain GET, nepodporujú použitie objektov XMLHttpRequest. V tomto prípade budú XMLHttpRequest a textStatus odovzdané obslužným programom obsahovať hodnotu undefined .

V obslužných programoch bude premenná this obsahovať hodnotu parametra kontext. V prípade, že nebol nastavený, bude obsahovať objekt nastavení.

parameter dataType

Funkcia $.ajax() sa dozvie o type údajov odosielaných serverom zo samotného servera (cez MIME). Okrem toho je tu možnosť osobne uviesť (objasniť), ako by sa tieto údaje mali interpretovať. To sa vykonáva pomocou parametra dataType. Možné hodnoty pre tento parameter:

"xml"— výsledný xml dokument bude dostupný v textovej forme. Dá sa s ním pracovať pomocou štandardných nástrojov jQuery (aj s html dokumentom). "html"— výsledný html bude dostupný v textovej forme. Ak obsahuje skripty v tagoch, potom sa automaticky vykonajú až po umiestnení html textu do DOM. "skript"— prijaté dáta budú spustené ako javascript. Premenné, ktoré zvyčajne obsahujú odpoveď zo servera, budú obsahovať objekt jqXHR. "json", "jsonp"— prijaté dáta budú vopred skonvertované na javascriptový objekt. Ak analýza zlyhá (čo sa môže stať, ak súbor json obsahuje chyby), bude vyvolaná výnimka chyby analýzy súboru. Ak je server, ku ktorému pristupujete, v inej doméne, potom by sa mal namiesto json použiť jsonp. O json a jsonp sa môžete dozvedieť na Wikipédii. "text"— prijaté údaje budú dostupné ako čistý text bez predbežného spracovania.

Poznámka 1: Keď sa požiadavka odošle do domény tretej strany (čo je možné len s dataType rovným jsonp alebo skriptu), obslužné nástroje chýb a globálne udalosti sa nespustia.

Poznámka 2: Typ údajov špecifikovaný v údajovom type nesmie byť v konflikte s informáciami MIME poskytnutými serverom. Napríklad xml údaje musí server reprezentovať ako text/xml alebo application/xml . Ak sa to nepodarí, jquery sa pokúsi skonvertovať prijaté dáta na zadaný typ (viac o tom v časti Konvertory).

Odosielanie údajov na server

Štandardne sa požiadavka na server odošle pomocou metódy HTTP GET. Ak potrebujete zadať požiadavku pomocou metódy POST, musíte zadať príslušnú hodnotu v nastavení typu. Údaje odoslané pomocou metódy POST sa skonvertujú na UTF-8, ak sú v inom kódovaní, ako to vyžaduje štandard W3C XMLHTTPRequest.

Dátový parameter možno zadať buď ako reťazec vo formáte kľúč1=hodnota1&kľúč2=hodnota2 (formát prenosu údajov v adrese URL), alebo ako objekt so sadou párov (názov:hodnota) - (kľúč1: "hodnota1", kľúč2: "hodnota2"). V druhom prípade pred odoslaním údajov jQuery skonvertuje daný objekt na reťazec pomocou $.param() . Túto konverziu však možno zvrátiť nastavením nastavenia processData na hodnotu false . Konverzia na reťazec je nežiaduca napríklad v prípade odosielania xml objektu na server. V tomto prípade je vhodné zmeniť nastavenie contentType z application/x-www-form-urlencoded na vhodnejší typ pantomímy.

komentár: Väčšina prehliadačov nepovoľuje požiadavky Ajaxu na zdroje s inými doménami, subdoménami a protokolmi, než je ten aktuálny. Toto obmedzenie sa však nevzťahuje na požiadavky jsonp a skriptov.

Prijímanie údajov zo servera

Údaje prijaté zo servera môžu byť poskytnuté ako reťazec alebo objekt v závislosti od hodnoty parametra dataType (pozri odsek dataType vyššie). Tieto údaje sú vždy dostupné v prvom parametri obslužného programu vykonávania požiadavky ajax:

$.ajax (( url: "nejake.php" , uspech: funkcia (udaje) ( alert ( "Údaje o zisku: " + údaje ) ; ) ) );

Pre textové a xml typy budú dáta odoslané serverom dostupné aj v jqXHR, a to v poli responseText alebo responseXML.

Pokročilé nastavenia

Pomocou globálneho parametra môžete zakázať vykonávanie obsluhy udalostí (.ajaxSend(), .ajaxError() atď.) pre jednotlivé požiadavky. To môže byť užitočné napríklad vtedy, ak sa v týchto obslužných programoch spúšťa/zastavuje animácia načítania. Potom, ak sa niektoré požiadavky vykonávajú veľmi často a rýchlo, bude pre nich užitočné zakázať vykonávanie handlerov. Pre skripty medzi doménami a požiadavky jsonp je globálny parameter zakázaný automaticky.

Ak sú na odoslanie požiadavky na server potrebné autentifikačné údaje (prihlasovacie meno/heslo), môžete ich zadať v nastaveniach používateľského mena a hesla požiadavky ajax.

Na dokončenie požiadavky na server je vyhradený určitý čas. Ak server počas tejto doby nepošle odpoveď, požiadavka sa skončí chybou (stav "timeout"). Dobu čakania na odpoveď zo servera je možné zmeniť nastavením požadovanej hodnoty (v milisekundách) v nastavení časového limitu.

Môže sa stať, že kódovanie hostiteľa sa líši od kódovania súboru javascript požadovaného v požiadavke ajax. V takýchto prípadoch je potrebné špecifikovať kódovanie druhého v nastavení scriptCharset.

Vo väčšine prípadov sa požiadavka Ajax vyskytuje asynchrónne, ale v niektorých prípadoch môže byť potrebné vykonať požiadavku postupne (keď ďalšie spustenie skriptu nie je možné bez prijatia odpovede zo servera). Požiadavku môžete nastaviť ako synchrónnu, ak zakážete nastavenie asynchronizácie. Je však potrebné pripomenúť, že v tomto prípade stránka zamrzne počas čakania na odpoveď zo servera.

Príklady použitia

Najjednoduchším prípadom použitia by bolo volanie $.ajax() bez zadania parametrov:

$.ajax(); // požiadavka GET bude odoslaná na server na URL aktuálnej stránky bez zadania akýchkoľvek parametrov.

Ak potrebujete načítať a spustiť súbor js, môžete to urobiť takto:

$.ajax (( typ: "GET" , url: "test.js" , dataType: "script" ) );

Urobme požiadavku POST na server, zadáme dva parametre a upozorníme používateľa na úspešne dokončenú požiadavku:

$.ajax (( typ: "POST" , url: "some.php" , údaje: "meno=Ján&umiestnenie=Boston" , úspech: funkcia (správa) ( upozornenie ( "Údaje prišli: " + správa ) ; ) ) ) ;

Aktualizujme obsah požadovanej html stránky:

$.ajax (( url: "test.html" , cache: false , success: function (html) ( $("#results" ) .append (html) ; ) ) ) ;

Urobme synchrónnu požiadavku na server. Počas vykonávania požiadavky stránka nereaguje na akcie používateľa:

// zapíše údaje odoslané zo servera do html premennej var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

Ako parameter pošleme na server xml objekt. Pre správny prenos musíte zrušiť predbežnú konverziu parametrov (processData:false). Zadáme vlastnú funkciu handleResponse ako handler pre úspešné dokončenie požiadavky:

var xmlDocument = [vytvor xml dokument] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, success: handleResponse ) ) ;

Pokročilý prístup

Počnúc jQuery-1.5 existujú tri nové smery, ktoré vám umožňujú použiť $.ajax() ešte hlbšie. Prvý z nich (Predfiltre) vám umožňuje vykonávať ďalšie manipulácie bezprostredne pred odoslaním požiadavky. Pomocou druhého prístupu (konvertory) môžete jQuery povedať, ako má konvertovať údaje prijaté zo servera, ak nezodpovedajú očakávanému formátu. Tretí prístup (Doprava) je najnižšia úroveň, ktorá vám umožňuje nezávisle organizovať požiadavku na server.

Predfiltre

Tento prístup pozostáva z nastavenia obsluhy, ktorá sa volá pred každou požiadavkou ajax. Tento obslužný program predchádza vykonaniu akýchkoľvek iných obslužných programov ajaxu. Inštaluje sa pomocou funkcie $.ajaxPrefilter():

$.ajaxPrefilter (funkcia (options, originalOptions, jqXHR) ( ) );

Kde
možnosti— nastavenia aktuálnej požiadavky,
pôvodné možnosti- predvolené nastavenia,
jqXHR— jqXHR predmet tejto žiadosti.

Predfiltre sú vhodné na spracovanie vlastných nastavení (t. j. nových nastavení neznámych knižnici špecifikovanej v požiadavke). Môžete napríklad zadať svoje vlastné nastavenie abortOnRetry , ktoré, ak je povolené, vynuluje čakajúce požiadavky, ak bude na rovnakej adrese URL prijatá nasledujúca žiadosť:

var currentRequests = ( ) ; $.ajaxPrefilter (funkcia (options, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ) ) ) ;

Je vhodné spracovať existujúce nastavenia v ajaxPrefilter. Takto môžete napríklad zmeniť požiadavku z viacerých domén na požiadavku presmerovanú cez váš doménový server:

$.ajaxPrefilter (funkcia (options) ( if (options.crossDomain) ( options.url = "http://mojadomena.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) );

Okrem toho môžete zadať hodnoty dataType, na ktorých bude predfilter fungovať. Môžete teda napríklad zadať typy json a skriptov:

$.ajaxPrefilter ( "skript json" , funkcia (volby, originalOptions, jqXHR) ( // Zmena volieb, kontrola originalOptions a objektu jqXHR) );

Nakoniec môžete zmeniť hodnotu dataType tak, aby sa vrátila požadovaná hodnota:

$.ajaxPrefilter (funkcia (options) ( // zmena dataType na skript, ak url spĺňa určité podmienky if (isActuallyScript(options.url) ) ( return "script" ; ) ) ;

Tento prístup zaručuje nielen to, že požiadavka zmení svoj typ na skript, ale aj to, že sa vykonajú aj iné obslužné programy predfiltra špecifikujúce tento typ v prvom parametri.

Konvertory

Tento princíp spočíva v inštalácii obslužného programu, ktorý bude fungovať, ak sa typ údajov zadaný v nastaveniach nezhoduje s typom údajov odoslaným serverom.

Prevodníky sú ajaxové nastavenie, takže ich možno nastaviť globálne:

// týmto spôsobom môžete nastaviť handler, ktorý bude fungovať, ak namiesto // typu mydatatype, ktorý ste zadali v dataType, budú prijaté údaje typu text $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // spracovanie prenášaného textu vráti mydatatypeValue; ) else ( // ak údaje odoslané serverom nezodpovedajú tomu, čo sa očakáva, // môžete vyvolať výnimku. throw exceptionObject; ) ) ));

Konvertory vám pomôžu pri zavádzaní vlastného (vlastného) dataType. Je dôležité poznamenať, že v názve takéhoto dataType by sa mali používať iba malé písmená! Vyššie uvedená požiadavka na typ údajov "mydatatype" môže vyzerať takto:

$.ajax (url, (dataType: "mydatatype" ) );

JQuery je javascriptová knižnica, ktorej cieľom je „písať menej, robiť viac“. jQuery sa dá ľahko pripojiť k vašej stránke a začať používať. jQuery výrazne uľahčuje používanie javascriptu na vašej stránke.

jQuery eliminuje množstvo riadkov kódu javascript a umožňuje vám implementovať celý rad riadkov iba jednou metódou.

Čo je AJAX?

AJAX je asynchrónny (t. j. prehliadač si po odoslaní požiadavky môže robiť, čo chce, napríklad zobraziť správu čakajúcu na odpoveď, posúvať stránku atď.) JavaScript a XML. Používa sa na vytváranie dynamických a rýchlych webových stránok. AJAX nám umožňuje aktualizovať časť webovej stránky bez opätovného načítania celej stránky.

A čo jQuery a AJAX?

Kombinácia jQuery a AJAX poskytuje výkonnú funkčnosť. Pomocou jquery a ajaxu môžete zadať požiadavku a získať informácie v rôznych formátoch vrátane XML, HTML a dokonca aj obyčajného textu. Na výmenu údajov môžete použiť formát JSON. Údaje prijaté prostredníctvom žiadosti ajax môžeme použiť na našej html stránke.

jQuery robí existujúce rozhranie Ajax API v prehliadači výkonnejším a jednoduchšie na používanie. Uskutočnenie hovorov ajax normálnym spôsobom pomocou javascriptu je trochu zložité: pretože musíte vziať do úvahy, že rôzne prehliadače vyžadujú rôzne prístupy k vytvoreniu objektu XMLHttpRequest. Okrem toho sa odosielanie údajov, napríklad z formulárov, stáva zložitejším, ak na volanie ajax používate bežný javascript.

jQuery poskytuje jednoduchú a výkonnú funkcionalitu, ktorá rozširuje javascriptové metódy AJAX a poskytuje flexibilnejší prístup.

V tomto krátkom článku vám ukážem, ako používať jQuery a AJAX v jednoduchej php forme. Začnime... Na používanie jQuery a AJAX budeme potrebovať dva súbory, prvý súbor bude obsahovať html/php kód, cez ktorý bude ajax požiadavka. V druhom súbore spracujeme ajax požiadavku a vrátime výsledok na prvú stránku.

Krok 1: Vytvorte súbor school.php a vložte doň nasledujúci kód:

Vo vyššie uvedenom kóde získame meno a číslo študenta a pomocou jquery a ajax ich pošleme na adresu details.php.

function getdetails())( názov var = $("#name").val(); var rno = $("#rno").val(); $.ajax(( typ: "POST", url: " podrobnosti .php", data: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Address of Roll no " +rno +" is "+result ) ));

Tvoje meno:
Číslo role:

Krok 2: Vytvorte súbor details.php a vložte doň nasledujúci kód:

Vo vyššie uvedenom kóde získame adresu študenta pomocou poradového čísla a jeho mena.

Pre tento príklad budete musieť vytvoriť školskú databázu a tabuľku študentov. Tabuľka študentov obsahuje polia s menami, poradovými číslami a adresami.

Dúfam, že vám tento článok pomôže.

Popis: Vykonáva asynchrónnu požiadavku HTTP (Ajax).

Pridané vo verzii: 1.5
Pridané vo verzii: 1.0

Funkcia $.ajax() je základom všetkých požiadaviek Ajax odoslaných pomocou jQuery. Často nie je potrebné volať túto funkciu, pretože existuje niekoľko alternatív vyššej úrovne, ako napríklad $.get() a .load(), ktoré sa ľahšie používajú. Ak sú potrebné menej bežné možnosti, môžete požiadavku nakonfigurovať flexibilnejšie prostredníctvom $.ajax().

Vo svojej najjednoduchšej forme možno funkciu $.ajax() volať bez akýchkoľvek argumentov:

Dôležité: Predvolené nastavenia je možné nastaviť pomocou funkcie $.ajaxSetup().

Tento príklad bez použitia akýchkoľvek parametrov načíta obsah aktuálnej stránky, ale s výsledkom nerobí nič. Ak chcete použiť výsledok, môžete implementovať jednu z funkcií spätného volania.

objekt jqXHR

Objekt jQuery XMLHttpRequest (jqXHR) vrátený pomocou $.ajax() je od verzie jQuery 1.5 nadmnožinou natívneho objektu XMLHttpRequest. Obsahuje napríklad vlastnosti responseText a responseXML, ako aj metódu getResponseHeader(). Keď je prenos použitý pre požiadavku niečo iné ako XMLHttpRequest (napríklad značka skriptu pre požiadavku JSONP), objekt jqXHR emuluje natívnu funkčnosť XHR, ak je to možné.

Od jQuery 1.5.1 obsahuje objekt jqXHR aj metódu overrideMimeType() (táto bolo dostupné v jQuery 1.4.x, ale bolo dočasne odstránené v jQuery 1.5). Metódu .overrideMimeType() možno použiť v obslužnom programe beforeSend(), napríklad na zmenu poľa hlavičky typu obsahu:

url: "http://fiddle.jshell.net/favicon.png" ,

beforeSend: function (xhr) (

xhr.overrideMimeType("text/obyčajný; charset=x-definované používateľom" );

Hotovo(funkcia (údaje) (

if (console && console.log) (

console.log("Ukážka údajov:" , data.slice(0, 100));

Objekt jqXHR vrátený metódou $.ajax() v jQuery 1.5 implementuje rozhranie Promise, ktoré mu dáva všetky vlastnosti, metódy a správanie Promise. Tieto metódy používajú jeden alebo viac argumentov, ktoré sa volajú po dokončení požiadavky iniciovanej pomocou $.ajax(). To vám umožňuje priradiť viacero spracovateľov k jednej žiadosti a dokonca aj priradiť spracovateľov po dokončení žiadosti. (V prípade, že žiadosť už bola vybavená, budú ihneď privolaní psovodi). Dostupné metódy Promise v objekte jqXHR:

jqXHR.done(funkcia(údaje, textStav, jqXHR) ());
jqXHR.fail(funkcia(jqXHR, textStatus, chybaHozena) ());
jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) ( )); (pridané v jQuery 1.6)
Alternatívou k vytvoreniu kompletného obslužného programu je metóda .always(), ktorá nahrádza zastaranú metódu .complete().
jqXHR.then(funkcia(údaje, textStatus, jqXHR) (), funkcia(jqXHR, textStatus, chybaHozena) ());

Poznámka: Obslužné nástroje jqXHR.success() , jqXHR.error() a jqXHR.complete() budú v jQuery 3.0 odstránené. Môžete použiť jqXHR.done() , jqXHR.fail() a jqXHR.always().

Na zabezpečenie spätnej kompatibility s kódom XMLHttpRequest poskytuje objekt jqXHR nasledujúce vlastnosti a metódy:

readyState
postavenie
statusText
responseXML a/alebo responseText, keď požiadavka vrátila xml a/alebo text
setRequestHeader(name, value) tie hlavičky, ktoré sa odchyľujú od štandardu, nahradia starú hodnotu novou, namiesto toho, aby zreťazili staré a nové hodnoty
getAllResponseHeaders()
getResponseHeader()
statusCode()
zrušiť()

Neexistuje žiadny mechanizmus onreadystatechange, pretože done , fail , always a statusCode pokrývajú všetky možné požiadavky.

Poradie funkcie spätného volania

Parametre beforeSend, error, dataFilter, success a complete berú hodnoty funkcie spätného volania, ktoré sa volajú vo vhodných časoch.

Od verzie jQuery 1.5 budú funkcie fail and done a od verzie jQuery 1.6 vždy volané ako prvé zo spravovaného frontu, čo umožňuje viac ako jeden obslužný program pre každý prvok frontu. Pozrite si odložené metódy, ktoré implementujú interné prvky obsluhy metódy $.ajax().

Funkcie spätného volania poskytované metódou $.ajax() sú nasledovné:

beforeSend sa vždy volá; berie ako parametre objekt jqXHR a objekt nastavení.

Ak požiadavka zlyhá, zavolá sa chyba. Akceptuje objekt jqXHR, reťazec chybového stavu a objekt výnimky, ak je to možné. Niektoré vstavané chyby poskytujú ako objekt výnimky reťazec: "abort", "timeout", "No Transport".

DataFilter sa volá okamžite po úspešnom prijatí údajov odpovede. Preberá vrátené údaje a hodnotu parametra dataType ako parametre a musí sa vrátiť (prípadne upravené údaje) na odovzdanie obsluhe úspechu.

úspech sa nazýva, ak je požiadavka úspešná. Prijíma údaje odpovede, reťazec obsahujúci kód úspechu a objekt jqXHR.

Obsluhy prísľubov – .done() , .fail() , .always() a .then() – sa vykonávajú v poradí, v akom sú zaregistrované.

kompletný sa volá, keď je požiadavka dokončená, bez ohľadu na úspech alebo neúspech požiadavky. Akceptuje objekt jqXHR, naformátovaný reťazec so stavom úspechu alebo chyby.

Typy údajov

Rôzne typy odpovedí na volanie $.ajax() podstupujú pred odovzdaním obslužného programu úspechu rôzne druhy predbežného spracovania. Typ predprípravy závisí od poľa hlavičky Content-Type zadaného v odpovedi, ale dá sa explicitne zadať pomocou voľby dataType. Ak je zadaný dataType, pole hlavičky Content-Type bude ignorované.

Možné dátové typy sú text, html, xml, json, jsonp a skript.

Ak je zadaný text alebo html, nenastane žiadne predbežné spracovanie. Údaje sa jednoducho odovzdajú obslužnému programu úspechu a sú prístupné prostredníctvom vlastnosti responseText objektu jqXHR.

Ak je zadaný xml, odpoveď sa analyzuje pomocou jQuery.parseXML a potom sa odovzdá obslužnému programu úspechu XMLDocument. Dokument XML je prístupný prostredníctvom vlastnosti responseXML objektu jqXHR.

Ak je zadaný json, odpoveď sa analyzuje pomocou jQuery.parseJSON predtým, ako sa odovzdá objektu pre obslužný program úspechu. Výsledný objekt JSON je prístupný prostredníctvom vlastnosti responseJSON objektu jqXHR.

Ak je zadaný skript, potom $.ajax() spustí kód JavaScript prijatý zo servera pred odoslaním tohto kódu ako reťazec obsluhe úspechu.

Ak je zadaný jsonp, $.ajax() automaticky pridá (predvolený) parameter callback=? . Parametre jsonp a jsonpCallback z objektu nastavení odovzdaného metóde $.ajax() možno použiť na určenie názvu parametra adresy URL a názvu JSONP funkcie spätného volania. Server musí vrátiť správny Javascript, ktorý bude odovzdaný obslužnému programu JSONP. $.ajax() spustí vrátený kód JavaScript a zavolá funkciu JSONP podľa jej názvu, a potom odovzdá objekt JSON obsluhe úspechu.

Odosielanie údajov na server

Požiadavky Ajax sa štandardne odosielajú pomocou metódy GET HTTP. Ak sa vyžaduje metóda POST, potom by sa mala metóda špecifikovať v nastaveniach pomocou parametra typu. Tento parameter ovplyvňuje spôsob odosielania údajov z parametra údajov na server. Údaje požiadavky POST budú vždy prenášané na server v kódovaní UTF-8 podľa štandardu W3C XMLHTTPRequest.

Dátový parameter môže obsahovať reťazec ľubovoľného tvaru, napríklad serializovaný formulár key1=value1&key2=value2 alebo objekt Javascript (key1: "value1", key2: "value2") . Ak sa použije posledná možnosť, údaje sa pred odoslaním skonvertujú na reťazec pomocou metódy jQuery.param(). Toto spracovanie možno zakázať zadaním parametra processData na hodnotu false. Spracovanie nemusí byť žiaduce, ak chcete odoslať dokument XML na server, v takom prípade zmeňte parameter contentType z application/x-www-form-urlencoded na vhodnejší typ MIME.

Pokročilé nastavenia

Globálny parameter zabraňuje spusteniu obslužných programov zaregistrovaných pomocou metód .ajaxSend() , .ajaxError() a podobných metód. To môže byť užitočné napríklad na skrytie indikátora načítania implementovaného pomocou .ajaxSend(), ak sa požiadavky vykonávajú často a rýchlo. Pri požiadavkách medzi doménami a JSONP sa globálny parameter automaticky nastaví na hodnotu false .

Ak server pred poskytnutím odpovede vykoná autentifikáciu HTTP, potom sa musí používateľské meno a heslo odoslať pomocou možností používateľského mena a hesla.

Požiadavky Ajax sú časovo obmedzené, aby bolo možné zachytiť chyby a spracovať ich, aby sa zabezpečila najlepšia používateľská skúsenosť. Časové limity požiadaviek sú zvyčajne buď nastavené predvolene, alebo globálne pomocou $.ajaxSetup() namiesto špecifikovania parametra časového limitu pre každú požiadavku.

V predvolenom nastavení sa požiadavky odosielajú vždy, ale prehliadač môže poskytnúť odpoveď zo svojej vyrovnávacej pamäte. Ak chcete zakázať používanie výsledkov uložených vo vyrovnávacej pamäti, nastavte parameter vyrovnávacej pamäte na hodnotu false . Ak chcete spustiť dotaz oznamujúci, ako sa zdroj od poslednej požiadavky zmenil, nastavte parameter ifModified na hodnotu true .

Parameter scriptCharset umožňuje explicitné použitie kódovania v požiadavkách pomocou značky (t. j. typu script alebo jsonp). To platí, ak vzdialený skript a vaša aktuálna stránka používajú odlišné kódovanie.

Prvé písmeno v slove Ajax znamená „asynchrónny“, čo znamená, že operácia prebieha paralelne a poradie jej vykonania nie je zaručené. Parameter async metódy $.ajax() má predvolenú hodnotu true , čo znamená, že vykonávanie kódu môže pokračovať aj po zadaní požiadavky. Dôrazne sa neodporúča nastaviť túto možnosť na hodnotu false (a teda nerobiť váš výstup viac asynchrónnym), pretože môže spôsobiť, že prehliadač prestane reagovať.

Metóda $.ajax() vráti objekt XMLHttpRequest, ktorý vytvorí. jQuery zvyčajne spracováva vytvorenie tohto objektu interne, ale pomocou parametra xhr môžete zadať funkciu, ktorá prepíše predvolené správanie. Vrátený objekt možno zvyčajne zahodiť, ale musí poskytovať nízkoúrovňové rozhranie na manipuláciu a správu požiadavky. Najmä volanie .abort() na tento objekt bude musieť zastaviť požiadavku pred jej dokončením.

Rozšírenie Ajax

Počnúc jQuery 1.5 obsahuje implementácia Ajaxu jQuery predfiltre, transporty a transformátory, ktoré vám umožňujú veľmi flexibilne prispôsobiť požiadavky Ajaxu tak, aby vyhovovali akýmkoľvek potrebám.

Použitie transformácií

Konvertory $.ajax() podporujú transformáciu z jedného dátového typu na iný. Ak však chcete transformovať vlastný typ údajov na známy typ údajov (napríklad json), musíte pridať mapovanie medzi Content-Type odpovede a skutočným typom údajov pomocou parametra content:

Čo neumožňuje dopyty na iné domény, subdomény, porty alebo protokoly.

Na požiadavky skriptov a JSONP sa nevzťahujú obmedzenia tohto pravidla.

Myslím si, že nemá cenu hovoriť, čo je AJAX, pretože s príchodom webu dve nuly už väčšina používateľov ohŕňa nos nad načítavaním celých stránok a s príchodom jQuery sa implementácia výrazne zjednodušila. .

Poznámka: Všetky príklady používajú skratku na volanie metód jQuery pomocou funkcie $ (znak dolára).

Začnime tým najjednoduchším – načítaním HTML kódu do prvku DOM, ktorý na stránke potrebujeme. Na tento účel použijeme metódu zaťaženia. Táto metóda môže akceptovať nasledujúce parametre:

URL požadovanej stránky

funkcia, do ktorej sa bude privádzať výsledok (voliteľný parameter)

Tu je príklad kódu JavaScript:
// po dokončení načítania stránky
$ (dokument) . pripravený(funkcia() (
// počkajte pri kliknutí na prvok s id = príklad-1
$("#príklad-1" ) . klikni(funkcia() (
// načítavanie HTML kódu zo súboru example.html
$(toto) . load("ajax/example.html" ) ;
} )
} ) ;
Príklad načítaných údajov (obsah súboru example.html):
jQuery.ajax Toto je najzákladnejšia metóda a všetky nasledujúce metódy sú len obaly pre metódu jQuery.ajax. Táto metóda má iba jeden vstupný parameter - objekt, ktorý obsahuje všetky nastavenia (parametre, ktoré si treba zapamätať, sú zvýraznené):

async - požiadavka asynchrónnosti, štandardne true
cache - povolí/zakáže ukladanie údajov prehliadača do vyrovnávacej pamäte, predvolená hodnota je true
contentType - predvolená "application/x-www-form-urlencoded"
dáta - prenášané dáta - reťazec alebo objekt
dataFilter - filter pre vstupné dáta
dataType - typ údajov vrátený do funkcie spätného volania (xml, html, skript, json, text, _default)
global - trigger - zodpovedný za používanie globálnych udalostí AJAX, štandardne true
ifModified - trigger - skontroluje, či došlo k zmenám v odpovedi servera, aby sa neposlala ďalšia požiadavka, štandardne false
jsonp - resetovanie názvu funkcie spätného volania na prácu s JSONP (predvolene generované za behu)
processData - v predvolenom nastavení sú odosielané údaje zabalené do objektu a odoslané ako „application/x-www-form-urlencoded“, ak je to potrebné, inak ho deaktivujte
scriptCharset - kódovanie - relevantné pre načítanie JSONP a JavaScriptu
timeout – časový limit v milisekundách
typu - GET alebo POST
url – adresa URL požadovanej stránky

Miestne:

beforeSend - spustí sa pred odoslaním požiadavky
chyba - ak sa vyskytla chyba
úspech - ak sa nevyskytli žiadne chyby
kompletný - spustí sa na konci požiadavky

Ak chcete zorganizovať autorizáciu HTTP (О_о):

užívateľské meno - prihlásenie
heslo - heslo

Príklad JavaScript:
$.ajax((
url: "/ajax/example.html" , // zadajte adresu URL a
dataType : "json" , // typ načítaných údajov
success: function (data, textStatus) ( // pripojíme náš handler k funkcii success
$.each (data, function (i, val) ( // spracovanie prijatých údajov
/* ... */
} ) ;
}
)); jQuery.get Načíta stránku pomocou požiadavky GET na odovzdanie údajov. Môže akceptovať nasledujúce parametre:

URL požadovanej stránky

prenášané dáta (voliteľný parameter)

funkcia spätného volania, do ktorej bude pridaný výsledok (voliteľný parameter)

typ údajov vrátených do funkcie spätného volania (xml, html, skript, json, text, _default)

Odoslanie formulára Na odoslanie formulára pomocou jQuery môžete použiť ktorýkoľvek z uvedených spôsobov, ale pre pohodlie „zbierania“ údajov z formulára je lepšie použiť doplnok jQuery Form Odosielanie súborov Na odosielanie súborov pomocou jQuery, môžete použiť doplnok Ajax File Upload alebo One Click Upload Príklady použitia JSONP samostatne Stojí za zmienku použitie JSONP - pretože je to jeden zo spôsobov načítania dát medzi doménami. Aby sme to trochu prehnali, ide o pripojenie vzdialeného JavaScriptu obsahujúceho potrebné informácie vo formáte JSON, ako aj o volanie našej lokálnej funkcie, ktorej názov zadávame pri prístupe na vzdialený server (zvyčajne ide o parameter spätného volania). možno o niečo jasnejšie demonštrovať nasledujúci diagram (na kliknutie):

Pri práci s jQuery sa názov funkcie spätného volania generuje automaticky pre každé volanie na vzdialený server, stačí použiť požiadavku GET ako:
http://api.domain.com/?type=jsonp&query=test&callback=?
Posledný otáznik (?) bude nahradený názvom funkcie spätného volania. Ak túto metódu nechcete použiť, budete musieť pri volaní metódy jQuery.ajax() explicitne zadať názov funkcie spätného volania pomocou voľby jsonp.

Kategórie

Voľba redaktora

Úvod do Ajaxu. Ako môžem prinútiť jQuery, aby vykonal synchrónnu namiesto asynchrónnej požiadavky Ajax? Synchrónny ajax Jquery

Vyhľadávanie

Predplatné

Populárne príspevky

Posledné poznámky