JavaScript a AJAX

JavaScript a AJAX

Příspěvekod drahos » 04 únor 2012 00:50:47

Dnes bych chtěl napsat pár slov o technologii AJAX, která se v posledních letech dost rozmohla. Tato zkratka znamená Asynchronous JavaScript and XML a umožňuje načítání obsahu webových stránek bez obnovení samotné stránky. Existuje sice spousta JavaScriptových frameworků, které umožňují lehkou práci s AJAXem, avšak já bych chtěl ukázat, jak vlastně AJAX funguje.

Ve většině prohlížečích představuje AJAX třída XMLHttpRequest, která umí odesílat HTTP requesty a přijímat jejich odpověď, v IE je to ActiveXObject. Musíme tedy zajistit, aby se použil správný objekt. To zajistí následující kus kódu:
Kód: Vybrat vše
// Pokud neexistuje třída XMLHttpRequest
if ( typeof XMLHttpRequest == "undefined" ) {
       
    // Jsme v IE a musíme použít jinou
    XMLHttpRequest = function() {
        // Vrátí objekt třídy ActiveXObject
        return new ActiveXObject(
            navigator.userAgent.indexOf("MSIE 5") >= 0 ? // Pro IE 5 a nižší je jiný parametr
            "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"
        );
    }


Když už nemusíme řešit, v jakém jsme prohlížeči, můžeme otevřít spojení se serverem. Na to slouží metoda .open(). Dále pak musíme požadavek na server odeslat a neméně důležité je zpracování odpovědi.
Kód: Vybrat vše
var xhr = new XMLHttpRequest();
xhr.open("GET", "skript.php", true);
xhr.onreadystatechange = function() {
  if ( xhr.readyState == 4 && // Přijmeme obsah odpovědi
       !request.status && location.protocol == "file:" || // pokud jsme přijali soubor,
       (request.status > 200 && request.status < 300) || // http status kód je v intervalu mezi 200 do 300,
       request.status == 304 || // nebo se obsah nezměnil
       navigator.userAgent.idexOf("Safari") >= 0 && // Safari při nezměněném obsahu neodesílá status kód
       typeof request.status == "undefined" ) {
    // Odpověď serveru nejdříve zpracujeme v naší pomocné funkci
    var response = getResponse( xhr );
  }   
}

// Odešleme požadavek na server
xhr.send();

// Pomocná funkce pro zpracování odpovědi serveru
function getResponse( xhr, dData ) {
  // Content-Type odpovědi
  var content = xhr.getResponseHeader("Content-Type");
 
  // Pokud nemáme nastaven typ dat, zkusíme ho zjistit z hlavičky odpovědi
  var data = !dData && content && content.indexOf("xml") >= 0;

  // Pro XML použijeme responseXML a pro text responseText
  var data = data ? xhr.responseXML : xhr.responseText;

  // Pokud jsme přijali skript, vykonáme jej
  if ( dData.toUpperCase() == "SCRIPT" )
    eval.call( window, data );

  // Vrátime odpověď serveru
  return data;
}

Otevírání spojení:
Tak a teď kód rozeberu. Funkce xhr.open() má 5 argumentů. První je typ požadavku. To je buďto GET nebo POST. GET jsou data viditelná v adrese URL. Velikost takto odeslaných dat je ale omezena podle prohlížeče, a tak se na požadavky, kterými se posíla větší objem dat, používá typ POST, jehož velikost se nastavuje na straně serveru. Dalším argumentem je požadovaná URL adresa. To je snad celkem jasné. Snad jen chci podotknout, že nelze požadovat adresu mimo daný server. Třetí argument je typu bool, tedy true nebo false. Určuje, zda má být požadavek poslán synchronně nebo asynchronně. Poslední dva argumenty nastaví uživatelské jméno a heslo, pokud je potřeba.
Odesílání požadavku:
Musíme data nějak odeslat, a tak použijeme funkci xhr.send() , která má jediný argument a to právě data, která chceme odeslat. To však neplatí pro požadavky typu GET, protožy ten tyto data uchovává již v URL adrese. Pokud chceme odeslat požadavek typu POST, musíme nejdřív nastavit ContentType na application/x-www-form-urlencoded. To umí fce xhr.setRequestHeader(); s hodnotami hlavička (v našem případě Content-Type) a hodnota, na kterou ji chceme nastavit.
Přijímání dat ze serveru:
Funkce onreadystatechange se zavolá pokaždé, když se změní statuvocý kód načítání požadavku. Zde lze zpracovat odpověď serveru (viz. komentáře v kódu). Pro větší přehlednost použijeme pomocnou funkci. Ta umí zpracovat odpověď v podobě textu, XML nebo JavaScriptu. K XML odpovědi se přistupuje zcela stejně jako k html dokumentu, tedy přes DOM.

To by bylo všechno. Nakonec přikládám kód své AJAXové knihovny: http://paste.wlezley.eu/index.php/view/22009581
Kód: Vybrat vše
ajax({
  // Setting up base data
  url: "server.php",
  type: "GET",
  dataType: "text",
  data: { request: "data" },
  cache: false,
  async: true,
           
  // Timing request
  delay: 0,
  timeout: 0,
  interval: 1000,
           
  // Functions context
  context: this,
           
  // Functions
  success: function( data, xhr ) { },
  before: function( xhr ) {},
  error: function( e ) {},
  status: { 
    404: function(){},
    500: function(){},
    200: function(){}
    /* ... */
  }           
});


EDIT: Odstranění zbytků kódu z testování :)
drahos
 
Příspěvky: 1
Registrován: 03 únor 2012 22:45:07

Zpět na JavaScript

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 1 návštěvník


cron