Mnoho vývojářů čelí výzvě odesílat asynchronní dotazy pomocí technologie Ajax. Asynchronní dotazy vám umožňují aktualizovat obsah webové stránky bez restartování stránky. Někdy je však potřeba požadavek synchronizovat.
Asynchronní a synchronní požadavky
Ve standardním režimu Ajax jsou požadavky asynchronní, to znamená, že se provádějí paralelně s hlavním proudem spouštění skriptu. To znamená, že se webová stránka během provádění dotazu nezablokuje a nadále zobrazuje další prvky stránky.
V některých případech je však nutné provést dotaz synchronně, aby nedošlo k tomu, že skript bude pokračovat až do ukončení dotazu a obdržení odpovědi ze serveru.
Synchronní Ajax dotaz
Aby byl požadavek Ajax synchronní, lze při volání funkce XMLHttpRequest použít možnost "async" s hodnotou "false".open(). Například:
var xhr = new XMLHttpRequest();xhr.open('GET', 'https://example.com/api/data', false);xhr.send();V tomto příkladu vytvoříme nový objekt XMLHttpRequest, otevřeme get požadavek na adresu URL 'https://example.com/api/data' s parametrem "async" nastaveným na "false" a odešleme dotaz metodou send(). Požadavek zablokuje spuštění skriptu, dokud nebude ze serveru zodpovězena.
Synchronní Ajax dotazy poskytují vývojářům možnost ovládat tok spouštění skriptu blokováním před koncem dotazu. Je však třeba si uvědomit, že synchronní dotazy mohou zpomalit webovou aplikaci, protože blokují hlavní proud provádění.
Metody pro synchronizaci Ajax dotazů
Při použití asynchronních dotazů pomocí AJAXu (Asynchronous JavaScript and XML) je důležité si uvědomit, že požadavky jsou prováděny paralelně a kód neočekává, že bude dotaz dokončen před provedením další operace. Někdy je však nutné provést dotaz synchronně, aby byla zaručena určitá sekvence provádění kódu.
Zde je několik metod, které lze použít k synchronizaci Ajax dotazů:
| Metoda | Popis |
|---|---|
| async: false | Nastavení vlastnosti async dotazu na hodnotu false jej synchronizuje. To však může zpomalit spuštění kódu, protože stránka bude zablokována před dokončením požadavku. |
| $.ajaxSetup(< async: false >) | Nastavení globálního nastavení jQuery pro všechny ajax požadavky na synchronní režim. Tato metoda také blokuje stránku před dokončením dotazu. |
| $.Deferred () a $.when() | Použití objektu Deferred a metody when umožňuje synchronizovat spuštění kódu po dokončení několika asynchronních dotazů. Pro každý dotaz lze definovat funkce zpětného volání a další operaci provést až po jejich dokončení. |
Je třeba si uvědomit, že synchronní dotazy mohou vést ke zpomalení stránky a zhoršení uživatelského zážitku. Nejlepší je používat asynchronní dotazy a zpracovávat získaná data asynchronně, aby se stránka neblokovala a poskytovala citlivější rozhraní.