Ajax – 1. lekce

Po úvodním díle si probereme objekt XMLHttpRequest a naučíme se tento objekt zinicializovat.

Objekt XMLHttpRequest

Tento objekt byl původně implementován v Intrnet Exploreru 5 jako komponent ActiveX. Nakonec se stal standardem ve webových prohlížečích a s výjimkou Internet Exploreru 6 je podporován všemi moderními prohlížeč jako IE 7, IE 8, Mozilla Firefox, Opera, Safari… I když se stal standardem ve webových prohlížečích, nejedná se o standart W3C, sice ho má konsorcium v návrhu DOM Level 3, avšak není implementován všemi prohlížeči.

Nakonec bych rád uvedl, nebýt objektu XMLHttpRequest (dále jen XHR), aplikace jako RoundCube, Google Suggest, Gmail a Gmaps by neexistovaly a ani byste nečetli tento článek mého seriálu a v konečném důsledku bych ani já neměl o čem psát.

Vytvoření XHR

Jelikož XHR není standardem W3C, existují různé způsoby jeho vytvoření. Ve starších prohlížečích a IE 6 je XHR implementován jako objekt ActiveX a jeho instanci vytvoříme následovně:

xhr = new ActiveXObject(Microsoft.XMLHttp);

U ostatních moderních prohlížečů jako vytvoříme instanci jako nativní objekt XHR:

xhr = new XMLHttpRequest();

Při vytváření XHR jako objektu ActiveX musíme určit, kterou verzi MSXML použijeme. Každé vydání přináší lepší stabilitu a rychlost. Ve svých aplikacích byste měli použít vždy nejnovější verzi, která je pro daný prohlížeč dostupná. Problém nám nastává v případě, že budeme volat verzi, kterou prohlížeč uživatele nepodporuje. V tom případě dojde k výjimce, kterou musíme ošetřit.

Verze MSXML

• Microsoft.XMLHttp
• MSXML2.XMLHttp.2.0
• MSXML2.XMLHttp.3.0
• MSXML2.XMLHttp.4.0
• MSXML2.XMLHttp.5.0
• MSXML2.XMLHttp.6.0

Použití nejnovější verze MSXML

Pokusíme se vytvořit XHR s nejnovější verzí. Pokud jej prohlížeč nebude podporovat, ohlásí chybu, kterou pomocí try a catch zachytíme a budeme ignorovat, poté pokus zopakujeme se starší verzí.

Univerzální funkce pro tvorbu XHR

Nyní si můžeme napsat univerzální funkci, kterou můžeme použít ve všech prohlížečích. Postup bude následující:

1. Vytvoříme novou funkci pomocí:

   function vytvorXHR(){}

2. Musíme inicializovat proměnou, do které objekt uložíme, to provedeme pomocí:

   var XHR;

3. Nyní použijeme try a catch, do try zadáme příkaz pro vytvoření XHR jako instance nativního XHR a do catch zadáme příkaz pro vytvoření XHR jako objektu ActiveX. Předpokládáme použití moderních prohlížečů a pro případ, že by naše stránky navštívil uživatel se starším prohlížečem, tak při vytváření XHR jako instance nativního XHR dojde k chybě, kterou budeme ignorovat a přejdeme k vytvoření XHR jako objektu ActiveX. Funkce by měla vypadat nyní následovně:

   function vytvorXHR(){
   var xhr;
   try{
   xhr = new XMLHttpRequest();
   }catch(e){
   xhr = new ActiveXObject(Microsoft.XMLHttp);
   }
   }

4. Abychom mohli použít nejnovější verzi MSXML, rozšíříme naši funkci o pole, v kterém definujeme verze MSXML:

   var MSXmlVerze = new Array('MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.5.0','MSXML2.XMLHttp.4.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp.2.0','Microsoft.XMLHttp');

5. Abychom určili, kterou verzi MSXML můžeme použít, tak pomocí cyklu for budeme procházet jednotlivé záznamy v poli. Část catch, kde nastavujeme XHR jako objekt ActiveX, upravíme následovně:

   for(var i = 0; i < MSXmlVerze.length; i ++){
   try{
   xhr = new ActiveXObject(MSXmlVerze[i]);
   break;
   }catch(e){
   //vzniklou chybu ignoruji a pokračuji nastavením další verze
   }

6. Konstrukce try, catch nám zajistí, že pokud vytvoření XHR selže, chybu budeme ignorovat a zopakujem postup. Pokud úspěšně nastavíme objekt ActiveX se správnou verzí MSXML, z cyklu vyskočíme pomocí break.
7. Nakonec naše funkce vrátí objekt XHR nebo zobrazí chybu:

   if(!xhr)
   alert("Došlo k chybě při vytváření objektu XMLHttpRequest!");
   else
   return xhr;

8. Naše funkce tedy v konečné fázi vypadá takto:

   function vytvorXHR(){
       var xhr;
       try{
         xhr = new XMLHttpRequest();
       }catch(e){//pro případ starší verze prohlížeče
         var MSXmlVerze = new Array('MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.5.0','MSXML2.XMLHttp.4.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp.2.0','Microsoft.XMLHttp');
         for(var i = 0; i <= MSXmlVerze.length; i ++){
           try{
             xhr = new ActiveXObject(MSXmlVerze[i]);
            //alert(MSXmlVerze[i]);
             break;
           }catch(e){
             //vzniklou chybu ignoruji a pokračuji nastavením další verze
           }
         }
       }
       if(!xhr)
         alert("Došlo k chybě při vytváření objektu XMLHttpRequest!");
       else
         return xhr;
     }

Závěr

V dnešním článku jsme se naučili pracovat se samotným srdcem Ajaxu. V příštím díle se vrhneme na metody a atributy XHR.