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 😉