Řešení 5 společných Ajaxových problémů

Moderní webový vývojář, který nepovažuje Ajax při plánování nebo budování svých webových stránek, je potenciálně chybějící na výkonném nástroji, který zvyšuje použitelnost.

Existují však problémy s implementací funkce Ajax na webové stránce.

V tomto článku budeme diskutovat o řešeních pěti nejčastějších výzev, kterým může vývojář čelit, když používá společnost Ajax ke zlepšení obsahu na svých webových stránkách.

Ačkoli je pro diskusi a výzkum všech pěti témat mnohem více, měl by tento příspěvek poskytnout začínajícím a středně pokročilým vývojářům Ajaxu několik pevných tipů, jak implementovat funkcionalitu Ajax uživatelsky přívětivějším a dostupnějším způsobem .

Problém # 1: Obsah není kompatibilní zpětně

K tomuto problému dochází, když návrhář začlenil vylepšení JavaScript a Ajax do architektury svých webových stránek, aniž by poskytoval ustanovení pro prohlížeče, které zakázaly jazyk JavaScript.

Nic není špatné při plánování webových stránek s JavaScriptem a Ajaxem; ve skutečnosti na dnešním trhu by měly být aspekty JavaScriptu integrální součástí procesu plánování. Ale měli byste se ujistit, že web je zpětně kompatibilní (nebo že to laděné elegantně) po spuštění.

Řešení: Implementujte Ajax jako vylepšení již fungující webové stránky

Zatímco Ajax může být nedílnou součástí vašeho plánování architektury webových stránek, zajistěte, aby veškerý obsah byl přístupný běžnými metodami na straně serveru.

Řekněme, že máte stránku "Informace o zaměstnancích", která má pro každého zaměstnance samostatný odkaz. Pomocí technologie na straně serveru můžete zobrazit obsah konkrétního zaměstnance na základě hodnoty prošlé řetězcem dotazu, například:

employees?view=VP">  Frank Smith - viceprezidentJim Williams - účetní

Všechny výše uvedené odkazy ukazují na stejnou stránku, na stránce "Zaměstnanci" , která se mění podle proměnné v řetězci dotazu. Informace o každém zaměstnance by byly načteny ze serveru, což by mohlo být provedeno mnoha způsoby: prostřednictvím serveru zahrnuje; prostřednictvím databáze; nebo dokonce pomocí XML.

Bez ohledu na odkaz na zaměstnance klikněte na úplnou stránku, aby bylo možné požadované informace doručit.

Takže obsah je plně přístupný předtím, než jsou nahoře navrženy všechny vylepšení Ajaxu. Potom pomocí jazyka JavaScript bylo možné přerušit úplnou obnovu stránky a načíst obsah prostřednictvím služby Ajax. Kliknutí na odkaz může být identifikováno identifikátorem nebo kontrolou hodnoty atributu HREF v kotvě.

Ačkoli je obsah plně přístupný s vypnutým JavaScriptem, většina uživatelů uvidí vylepšenou verzi s podporou Ajaxu.

Zásada progresivního zdokonalování pro Ajax je dobře známá, protože je běžně používána pro nenápadné techniky JavaScriptu a je součástí CSS, jak je ilustrováno níže uvedenou grafikou:

Vytvořte tak, aby vaše webové stránky fungovaly bez javascriptu a přidávejte JavaScript jako vylepšení, stejně jako byste označili váš obsah v HTML a poté jej "vylepšili" pomocí CSS.

Problém č. 2: Indikátor načítání prohlížeče není spuštěn žádostí Ajaxu

Téměř každý prohlížeč má způsob, jak vizuálně indikovat uživateli, že se načítá obsah. V současných prohlížečích se na kartě, která načítá obsah, zobrazí indikátor.

Následující obrázky zobrazují tento animovaný indikátor z několika populárních prohlížečů.


Indikátor načítání aplikace Internet Explorer je pevný kruh s gradientem, který se při načítání obsahu otáčí.


Firefox zobrazí podobnou ikonu malých spinning kruhů v různých odstínech šedé.


Google Chrome otočí půlkruh.

Problémem je, že požadavky služby Ajax nespouštějí tento indikátor "načítání", který je integrován do prohlížečů.

Řešení: Vložte podobný ukazatel načítání v blízkosti obsahu, který se načítá

Společným řešením je začlenit vlastní ukazatel pokroku do požadavku Ajaxu. Řada webových stránek nabízí bezplatnou grafiku načítání "Ajax".


Preloaders.net má řadu fantastických, přizpůsobitelných animovaných grafik, z čeho vybírat.

Zavedení této vlastní grafické načtení nebo indikátoru pokroku do funkčnosti Ajaxu vašeho webu je prostě záležitostí zobrazování a skrytí ve vhodných časech přes JavaScript.

Váš kód Ajaxu bude obsahovat řádky kódu, které vám oznámí, zda je žádost v procesu nebo dokončena. Pomocí jazyka JavaScript můžete zobrazovat animovanou grafiku při zpracovávání požadavku a skrýt ji po dokončení akce.

Problém č. 3: Uživatel neví, že žádost Ajaxu byla dokončena

To se vztahuje k předchozímu problému, ale je často přehlíženo, protože vývojář může předpokládat, že zmizení indikátoru "načítání" stačí k informování uživatele o úplném načtení obsahu. Ve většině případů je však konečný údaj, že obsah byl aktualizován nebo obnoven, lepší.

Řešení: Použijte zvláštní zprávu "Požadováno dokončení"

To lze provést podobně jako potvrzení podání formuláře. Po odeslání odkazu Digg , stránka vám velmi jasně sděluje, že vaše podání bylo přijato:

Ačkoli tento konkrétní ukazatel nevyjadřuje dokončenou žádost společnosti Ajax, princip je stejný: pole "Úspěch" se zobrazí po stránce, ve které se formulář vyplňuje, a pole je barevné a odlišné.

Podobná grafika nebo ukazatel by mohly být použity na konci žádosti Ajaxu, aby uživatelům řekl, že obsah byl aktualizován. To by bylo provedeno vedle namísto ukazatele pokroku navrženého pro předchozí problém.

Podobný, ale jemnější způsob, jak ukázat, že oblast obsahu byla aktualizována, je žlutá technika . Tato metoda je uživatelům známá, nenápadná a funguje dobře s obsahem načítaným v Ajaxu.

Problém č. 4: Požadavky služby Ajax nemohou získat přístup k webovým službám třetích stran

The XMLHttpRequest objekt, který je kořenem všech požadavků na Ajax, je omezen na vytváření požadavků ve stejné doméně jako stránka, která podává žádost. Existují však případy, kdy byste chtěli získat přístup k údajům třetích stran prostřednictvím žádosti společnosti Ajax. Mnoho webových služeb zpřístupňuje jejich data prostřednictvím rozhraní API.

Řešení: Server používejte jako server proxy

Řešením tohoto problému je použít server jako proxy mezi službou třetí strany a prohlížečem. Ačkoli podrobnosti tohoto řešení jsou daleko za rámec tohoto článku, přezkoumáme základní princip v práci.

Vzhledem k tomu, že požadavek Ajaxu pochází z prohlížeče klienta, musí odkazovat na soubor na jiném místě, ale na stejné doméně jako zdroj žádosti.

Váš server však na rozdíl od prohlížeče klienta není tímto způsobem omezen. Takže když se volá stránka na vašem serveru, běží na pozadí, jako obvykle, ale s přístupem k libovolné doméně.

To nepředstavuje pro uživatele žádné bezpečnostní riziko, protože požadavky na službu třetí strany se provádějí na vašem serveru. Takže, jakmile byly informace získány na úrovni serveru, dalším krokem ve volání Ajax je odeslání odpovědi zpět klientovi, což by v tomto případě zahrnovalo údaje získané z webových služeb třetích stran.

Chcete-li získat další podrobnosti o této výkonné metodě kombinace přístupu k webovým službám s vlastním Ajaxem, určitě zkontrolujte další zdroje, z nichž některé jsou uvedeny níže.

Další čtení:

• Použijte webový proxy pro volání XMLHttpRequest mezi doménami
• Cross Domain Ajax: stručný přehled
• Cross-domain AJAX dotazování pomocí jQuery

Problém # 5: Dlouhé propojení není k dispozici

Toto je problém složitější, ale nemusí být vyžadován v závislosti na typu webových stránek nebo aplikacích. K problému dochází, když je obsah načten přes Ajax a potom se změní "stav" webových stránek bez adresy URL, která odkazuje na ovlivněnou stránku.

Pokud se uživatel vrátí na stránku pomocí záložky nebo sdílí spojení s přítelem, aktualizovaný obsah se automaticky nezobrazí. Webová stránka by se vrátila zpět do původního stavu. Webové stránky Flash používaly tentýž problém: neumožňovaly uživatelům odkazovat se na nic než na počáteční obrazovku.

Řešení: Použijte vnitřní kotvy

Abyste zajistili, že určitý "stav" na webové stránce podléhající firmě Ajax je spojitelný a rezervovatelný, můžete použít interní odkazy na stránky, které upravují adresu URL, ale nezakopírují stránku nebo neovlivňují její vertikální pozici.

Tento jednoduchý kód ukazuje, jak se to dělá:

var currentAnchor = document.location;currentAnchor = String(currentAnchor);currentAnchor = currentAnchor.split("#");if (currentAnchor.length > 1) {currentAnchor = currentAnchor[1];} else {currentAnchor = currentAnchor[0];}switch(currentAnchor) {case "section1":// load content for section 1break;case "section2":// load content for section 2break;case "section3":// load content for section 3break;default:// load content for section 1break;}

Výše uvedené není funkční částí kódu, ale spíše teoretickým příkladem, který demonstruje hlavní kroky.

První dva řádky kódu umísťují aktuální polohu stránky (URL) do proměnné. Pak je místo převedeno na řetězec, abychom jej mohli manipulovat.

Dále rozdělíme řetězec na dvě části pomocí symbolu kotvy (#) a následně zkontrolujeme, zda pole, které je vytvořeno z dělení, je větší než jedna položka. Větší než jedna položka znamená, že adresa URL má kotvu.

Pokud má adresa URL pouze jednu část, znamená to, že není k dispozici žádná kotva. Následující příkaz "switch" načte obsah podle hodnoty kotvy. Výkaz přepínače má "výchozí" možnost v případě, že není k dispozici žádná kotva, což by bylo stejné jako načtení stránky v původním stavu.

Dále bychom použili kód, který by se zabýval odkazy, které odkazují přímo na konkrétní obsah prostřednictvím interních kotev. Odkaz, který odkazuje na obsah2, by obsah načítal v obsahu2 a řetězec "# content2" by byl připojen ke stávající adrese URL.

Tím by se změnila adresa URL přidáním interní kotvy, aniž by se změnil pohled na stránku, ale zachoval se identifikátor, který označuje požadovaný stav stránky.

Toto vysvětlení je pouze teorie. Koncept funguje a funguje velmi dobře. Ale nevysvětlil jsem všechny možnosti, nevýhody a další jemnosti vytváření stránek nebo stránek tímto způsobem.

Postupujte podle níže uvedených odkazů, abyste získali podrobnější diskusi o tématu nebo sami experimentujte. Také si povšimněte, že lze testovat pomocí obsahu, který se mění pouze s JavaScriptem, a nemusí používat Ajax.

Další čtení:

• Deep Linking pro AJAX
• AJAX: Jak zpracovat záložky a tlačítka zpět
• Upevnění tlačítka Back a povolení záložky pro aplikace AJAX

Tento příspěvek byl napsán výhradně pro Webdesigner Depot Louis Lazaris, nezávislý spisovatel a webový vývojář. Louis běží Působivé weby , kde publikuje články a cvičení o web designu. Můžete sledovat Louis na Twitteru nebo se s ním spojte přes jeho webové stránky .

Víte o řešeních těchto nebo jiných výzev Ajaxu? Podělte se o níže uvedené komentáře ...