Měsíc: Listopad 2005

Předem chci říci, že tento článek je určen hlavně začátečníkům, kteří by rádi využili metody AJAX, ale nejsou s to pochopit odborné (a výborné) články nebo nezvládají tak dobře angličtinu, aby hledali mimo českou internetovou zátoku.

Sám nejsem odborník na toto téma, ale pochopil jsem zevrubně, jak to asi funguje a využiji také růzé kvalitní zdroje.

Co je to AJAX

O AJAXu již bylo napsáno mnoho, pokud nevíte o co jde, doporučuji třeba článek AJAX – Kde jsou hranice? od Martina Snížka nebo článek na Rootu od Jakuba Vrány.

Pokud nejste laikové v JavaScriptu a PHP a v tomto oboru vám to pálí, jděte radši tam.

Pro ty, co tu ještě zůstali: AJAX je k tomu, abyste mohli pomocí JavaScriptu načíst třeba stránku PHP (v pozadí stránky, na které se nacházíte) a poslat jí nějaká data. Jiná data od ní můžete i přijmout a hned je použít. Stránka, na které v tu chvíli jste se vůbec neobnovuje.

Návod

Mám raději jeden jasný příklad než látra teorie. Takže jdeme na to.

Chceme třeba mít seznam nějakých článků ve formulářovém poli typu <select> a pokud nějaký vybereme, chceme obsah toho článku zobrazit hned vedle, bez obnovení stránky. Přitom obsahy těch článků jsou úplně v jiných souborech.

<select name="vyber" id="vyber" onchange="vyberClanek();">
   <option value="0">Vyberte článek</option>
   <option value="clanek1.htm">Článek jedna</option>
   <option value="clanek2.htm">Článek dvě</option>
</select>

<div id="mistoZobrazeni">
</div>

Dalším krokem bude vytvoření javascriptové funkce vyberClanek();:

function vyberClanek() {
    var url = document.getElementById("vyber").value;

    if (url != 0) {
        var httpRequest;
        if (window.ActiveXObject) {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            httpRequest = new XMLHttpRequest();
        }
        httpRequest.open("GET", url, true);
        httpRequest.onreadystatechange = function() {
            processRequest();
        };
        httpRequest.send(null);
    } else {
        document.getElementById("mistoZobrazeni").innerHTML = "";
    }
}

Ve funkci se vytvoří objekt XMLHttpRequest do proměnné httpRequest. Potom pomocí httpRequest.open("GET", url, true); načteme stránku obsaženou v proměnné url. Následně je zavolána funkce processRequest();, ve které zpracujeme data, která byla vypasána načtenou stránkou.

function processRequest() {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
            var mistoZobrazeni = document.getElementById("mistoZobrazeni");
            mistoZobrazeni.innerHTML = httpRequest.responseText;
        } else {
            alert("Chyba pri nacitani stanky " + httpRequest.status + ":" + httpRequest.statusText);
        }
    }
}

Jiná použití

Využití metody AJAX je velmi mnoho. Já ji například používám zde na blogu. Pod každým článkem můžete vidět odkaz, zda vás zaujal tento článek. Kliknutím na něj se žádná stránka neobnoví, pouze se pomocí javascriptu zavolá funkce, která načte v pozadí nějakou stránku s parametry. Načtená stránka potom aktualizuje data v databázi.

Komentáře

tark

Jo tak třeba zrovna tohle se mi vůbec nelíbí – myslím tedy tvůj odkaz „je to ok“ … Proč? Nemám odezvu, jestli se něco stalo nebo ne…

Medhi

tark (#1): Teď vůbec nevím co myslíš?

tark

Ajaj, asi jsem to napsal blbě … prostě po kliknutí na odkaz Tento článek mě zaujal nedostanu žádný potvrzení, takže si myslím, že se nic nestalo.

už je to srozumitelný? 😉

Medhi

tark (#3): Jakto? Napíše to „Děkuji za váš názor“. Nebo tobě to nepíše?

Alex

U mně to funguje… Zobrazí se to místo toho textu na který klikáš…

lookyn

Myslím, že tark to myslel tak, že se nezobrazí například nějaký číselný údaj, dle kterého poznáme, jak oblíbený je článek či tak nějak podobně 😉

Dero

Srozumitelně, názorně, střízlivě. Moc hezký úvod do tématiky.

Chtěl bych se zeptat, budou další pokračování, nebo to bylo jednorázové představení technologie?

Každopádně za článek děkuji.

Arcao

Existuje i alternativa v podobě načítání javascriptu přes DOM.

Marty

Velice pěkné a jednoduché shrnutí, konečně někdo také myslí na ty méně zdatné v tomto oboru.

Martin Picek

Legrační je to, že teď ti všichni naklikají, že se jim tento článek líbí (a taky, že líbí) kvůli vyzkoušení příkladu. 🙂

Medhi

Martin Picek (#10): To jsem si taky říkal, příště přiložím raději nějaký pěkný příkládek na vyzkoušení.

Petr Stříbný

Taky jsem si kliknul. Myslím, že na ankety a podobné věci je to jak dělané.

Roman

Nešlo by přidat stránku s ukázkou. Jinak pěkná web 🙂

dgx

Přehledné, jasné a motivující! Hned si jdu nějaký AJAX napsat 😉