digitální Citron
AJAX - návod pro začátečníky
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ůzné 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.
Vytvoříme si tedy <select> a přidáme parametr onchange, který nám spustí javascriptovou funkci vyberClanek(), pokud vybereme nějakou z položek. Hned k tomu si uděláme <div>, do kterého se nám článek načte.
<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)
{
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);
}
}
}
V této funkci zjistíme, zda httpRequest.readyState je roven 4, což znamená, že je akce hotova. Dále zjistíme, zda httpRequest.status je roven 200, což je status, který vrací server - 200, pokud je vše OK nebo třeba 404, pokud stránka chybí.
Potom už jen vidíte, jak se vloží do našeho připraveného divu text, který nám načítaná stránka vrátila v proměnné httpRequest.responseText. Tedy obsah článku.
Jiná použití
Využítí 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. Přitom nepotřebuji vůbec vědět, jaká data mi ona stránka vypsala, takže odpadá celá funkce processRequest().
Jako zdroj k tomuto článku jsem použil článek Web UI: What's behind AJAX? Simple use cases using XMLHttpRequest. Pokud vám můj článek nestačí, určitě si jej přečtěte, je tam toho mnohem více.
Tento článek můžete tvítnout nebo fejsbůknout.
Relevantní články
- jQuery pro začátečníky: AJAX | Pozdě, ale přece. Poslední díl seriálu o jQuery je zde. Tématem se vracím k článku, který jsem napsal téměř přesně před třemi lety. S jQuery…
- Univerzální funkce pro AJAX | AKTUALIZOVÁNO - díky komentujícím a hlavně Adamovi Hořčicovi.Jak AJAX funguje jsem už popsal, nyní bych vám chtěl ukázat jak ho…
Komentáře
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…
tark (#1): Teď vůbec nevím co myslíš?
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ý? ;)
tark (#3): Jakto? Napíše to "Děkuji za váš názor". Nebo tobě to nepíše?
U mně to funguje… Zobrazí se to místo toho textu na který klikáš…
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ě ;-)
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.
Existuje i alternativa v podobě načítání javascriptu přes DOM.
Velice pěkné a jednoduché shrnutí, konečně někdo také myslí na ty méně zdatné v tomto oboru.
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. :-)
Martin Picek (#10): To jsem si taky říkal, příště přiložím raději nějaký pěkný příkládek na vzykoušení.
Taky jsem si kliknul. Myslím, že na ankety a podobné věci je to jak dělané.
Nešlo by přidat stránku s ukázkou. Jinak pěkná web :-)
Přehledné, jasné a motivující! Hned si jdu nějaký AJAX napsat ;)
mám problém s češtinou, XMLHttpRequest mi ji zmrší do otazníků… kde se ošetřuje tohle?
Diky za pekny a zrozumitelny uvod do AJAXu, mohlo by to mas skutocne aj nejake pokracovanie, mozno s nejakym zlozitejsim, alebo inym prikladom (v spojeni s PHP alebo pod.)
Medhi (#4): Mě to nefunguje, používám Operu ;)
Mne to taktiez najprv neslo, ale chyba bola pri skopirovani, po skopirovani treba upravit riadok: alert("Chyba pri nacitani stanky
"+ httpRequest.status +":"+ httpRequest.statusText); na: alert("Chyba pri nacitani stanky"+ httpRequest.status +":"+ httpRequest.statusText); …aspon mne to pomohlo (treba odtial vymazat tu medzeru, zalomenie riadka)
diky za peknej clanek! precet jsem par jinych uvodu do tematiky, ale tohle je jasne, strizlive a presvedcujici…
a hele, medhi právě redesignoval :D
Nemohl by jsi sem dát zdroják toho kódu jak se vám líbil článek? Myslím si, že to je užitečnější příklad, než změna stránky.
Velmi pěkný příklad, bez zbytečného "okecávání".
Misha [15]: - problemy s cestinou:
predpokladam, ze pouzivas safari a mac os 10.0.3 nebo tak neco - je to chyba browseru. v safari 2.0 na os 10.0.4 je jiz opraveno, drive ale ne (oficialni vyjadreni apple)
kvezt [23]: No je to skor chyba kodovania, mne robi to iste
uz len netrpezlivo cakam na dalsi clanok aby som sa dozvedel viac
AJAX velmi pěkně využívá i phpmyvisites. Ale to je mimo téma
Chtěl jsem se optat k tomuto příkladu. Zkoušel jsem do selectu dát adresu stránky, která se nacházela na jiném serveru a nechce mi to chodit. Přitom když si dám odkaz na nějakou vlastní stránku včetně http … (celou absolutní adresu) tak to funguje. Nevíte někdo, čím by to mohlo být?
Johny [26]: Bezpečnostní omezení - pravidlo stejného původu.
Digitální citron, to je dobrý:) Ale stejně je fotbal nejlepší:)
Zdarek, narazil sem na tuhle sajdu dnes poprve a ma to uroven! Jen tak dal!
Mam dotaz jestli nekdo nevi ohledne tohoto clanku:
Nactou se html fajly pri vypnutem JS?
Zdarek, zkousel jste to nekdo na odkaz?
Me se furt otevira samotny html soubor definovany v odkazu. Prebiji mi to ten JS. Chtel bych docilit toho aby se to otevrelo v divu a pri vypnutem JS aby to slo na danou stranku.
Je to vubec resitelne?????
Good prvni krok, uz vim k cemu mi muze byt ajax platny, dik :) Jdu studovat :)
Good prvni krok, uz vim k cemu mi muze byt ajax platny, dik :) Jdu studovat :)
Jako úvod pěkné, ale chtělo by to pokračování. Sám uvažuji nad tím, že se AJAX asi budu muset naučit. Klienti začínají požadovat čím dál větší interaktivitu stránek a AJAX by mohl dost pomoci. Hlavně jako obsluha různých událostí. Hm…zkusím něco vydolovat z netu a snad se něco naučím. Kdyby ses ještě rozepsal nebylo by to špatné…..
Sestavil jsem to podle příkladu - Nefunguje mi to
Nemohl by mi někdo poslat funkční příklad na mail, abych si to nastudoval.
Díky moc. xpadmin@centrum.cz
Jo, je tu super. A jak bych to mohl ošetřit, když bude mít uživatel vypnutý javascript??? Myslím teď spíš to "Tento článek mě zaujal". Díky
Ondra [35]: Nevim to jiste, ale myslim si ze osetrit by to slo napriklad nejakym zpusobem ze by to byl normalni odkaz treba na php script a kdyz by byl javascript povoleny tak by to kliknuti odfiltroval aby se nenacitala zadna dalsi stranka, a pokud by povoleny nebyl tak by to nemohlo nic odfiltrovat a nacetla by se ta stranka. nevim ale jiste jestli je toto mozne
Velmi Velmi jednoduchý příklad.
Přesně takový jsem hledal :)
Dííky
Chtěl bych se zeptat zdali nevíte o nějakém tutoriálu o tvorbě tzv. "našeptávače".
Či dokonce, nechcete nějaký napsat?
Stručný :))
Dokonalé, jsem nenapravitelný nedouk v JS ale tohle mně nakoplo a snad se aspoň ten AJAX naučím. Díky, Ondra
Dokonalé, jsem nenapravitelný nedouk v JS ale tohle mně nakoplo a snad se aspoň ten AJAX naučím. Díky, Ondra
Sorry za opakováni, ale fakt za to nemuzu. A jsem jiny Ondra nez ten v prispevku 35.
Nice :))
Skvělý stručný návod! Pochopil jsem, modifikoval jsem na to, co jsem potřeboval, a funguje to skvěle. Děkuji! :)
Lepší návod jsem na AJAX v české verzi nenašel
Moc pěkné - stručné, jasné, funkční …. no prostě geniální.
Jen tak dál :-)
pekna hracka
Hmm pekne ale jak predam obsah toho vyberu (data formulare) nejakemu php skriptu? Tohle mi jen natahne clanek1 nebo clanek2. Jak teda odeslu formular?
Sorry, už jsem to pochopil. Stačí si napsat funkci pro serializaci dat formuláře :o)
Ahoj,
fakt jednoduche vysvetlenie. Nemozem si vsak pomoct, tento priklad mi pripada podobne ako nacitanie stranky cez iframe.
Ahoj,
fakt jednoduche vysvetlenie. Nemozem si vsak pomoct, tento priklad mi pripada podobne ako nacitanie stranky cez iframe.
Moc pěkný článek
S ajaxem se dají dělat velké věci, viz Gmail a jiné projekty od google :)
Vďaka za konečne jasné vysvetlenie XMLHttpRequest(), presne toto som hľadal… som zvedavý, do akej miery sa to ešte v najbližších rokoch rozšíri.
Díky, moc mi to pomohlo, jenom jsem narazil na stejný problém jako někdo dříve v komentářích, diakritika se mi předělá na "?" a to nepoužívám safari, ale firefox a i v MSIE jsem to zkoušel, lze to nějakým způsoběm odstranit? Diky
Skvělý článek, teď už ho chápu a částečně jsem jim podpořil aplikaci, kterou teď píšu - DĚKUJI!
Jakub Hejda [38]: Našeptávač
http://blog.bitflux.ch/wiki/LiveSearch
Geniálny článok, sosám a modifikujem… fakt dobré na začiatok o ajaxe, ak bude pokračovanie, daj vedieť… :)
Jakub Hejda [38]: tu su pekne priklady ajaxu…aj naseptavac sa najde :) http://www.zapa...om/website/main/
resp pekne priklady co sa da cez ajax spravit :) inak super clanok dakujem
Ahoj, dobry clanok, tiez mi pomohol aspon trochu pochopit ajax, ale tiez mam ten uz viackrat tu spominany problem s diakritikou, pouzivam firefox, nevie niekto co by s tym mohlo byt a ako by sa to dalo spravit?
Moc pěkné shrnutí
hezky uvod, mozna se konecne i pustim do AJAXu ;]
Lama [30]: , Ondra [35]: , SUK [36]:
co se tyce funkcniho odkazu pri vypnutem JS, tak se to dela takhle:
a href='nejakaUrl' oncklick='nejakaJSFce; return false;'
pokud je JS zapnuty, tak se pri kliku zpracuje "nejakaJSFce" a return false zajisti, ze se odkaz (href) uz nebude zpracovat…
kdyz bude JS vypnutej, tak se oncklick vubec neprovede a prohlizec normalne zpracuje odkaz -> presune se na stranku "nejakaURL"
sam sobe kritikem :0) :
samozrejme, ze JS udalost je onclick
ajax no problem… DIAKRTIKA BIG PROBLEM!!!!… ako sa snazim diakritiku to vzdy posere, uz sa na tu diakritiku pytalo viac ludi ale odpovedane stale nebolo
to s tou diakritikou som ja riesil tak, ze som pri vystupe dat zo skriptu poslal najprv header("Content-Type: text/html;charset=windows-1250"); a vsetka diakritika funguje nadherne :)
HTH
rrrrr
aaa
Mek: to s tou diakritikou som ja riesil tak, ze som pri vystupe dat zo skriptu poslal najprv header("Content-Type: text/html;charset=windows-1250"); a vsetka diakritika funguje nadherne :) …
A teraz po slovensky :D … a ako a kam dam header aby to posielalo najprv? :-P aleboo resp ako bude vyzerať skript po dosadení headeru?
Mně ten článek moc revoluční nepřijde. Je to jen příklad. Vůbec není podrobně rozepsáno jaký hodnoty vrací proměnná readyState. Takhle to vypadá, že nic jiného než 4 nevrací nebo je to nepodstatný. Co třeba něco o metodách POST a GET. Co místo kusů zdrojáku dát koplexní příklad, málo kdoví , kam jaký kus kódu umístit.
pěkné, dikes
depi [18]: jj, taky mi to kvuli tomu nešlo, tobě taky dík
já například mám v plánu web, kterej se bez AJAXU nevobejde, bude to v něm (i přes všechny nevýhody) celé, tedy celá struktura, puvodně jsem to chtěl (nechtěl, ale neznal jsem jinou možnost) udělat v rámcích, ale pak mě kámoš naved na AJAX a mam z toho radost.
teď jsem to vyzkoušel, a zírám nad jeho rychlostí, je pro mě, jakož člověka s ohromě slabým kompem (64MB ram, 8MB 3D) úžasná :)
jenže nerad bych měl menu pomocí selectu, takže napsal byste mi někdo prosím, jak tuto udělat s odkazama?, nějak mi to s nima nefunguje…
prosím polopaticky, jsem lama, tedy co vložit do .php a co pozměnit v .js
děkuji
Tak su asi lama..nevim jak musi vypadat ten soubor co se nacte ..ale me kazde html.proste vyhodí alert Chyba při načítaní stranky:0:Unknown. Nejaké rady?? Děkuji.
Zdravím. Připojuji se k pochvale celého blogu a hlavně k tomuto článku. Je stručný a dostatečně výstižný. Uvítal bych taktéž jeho pokračování s pár jednoduchými, přitom praktickými ukázkami.
Stačilo se více prokousat blogem a zjistil jsem, že tenhle článek je 3 roky starý. Skvělé pokračování jsem pak našel zde: http://citron.blueboard.cz/?ky-ajax.html
Tak hurá na Ajax a velký dík Jiřímu :)
mne to nefunguje, vypíše mi chybu na riadku kde je select ? očakáva sa objekt. čo je s tím? clanek1.htm a clanek2.htm mám samozrejme vytvorený.
tak už som to opravil ale stále mi vyhadzuje okno alert že chyba pri načitani stranky
Naprosto samou věc umí i flash:) a není pak potřeba javascript.
Při flash možná není potřeba JavaScript, ale i tam je spousta omezení. Spíš je potřeba zjistit si, jestli je AJAX vůbec potřeba ? jestli třeba nestačí jen čistý JavaScript s trochou CSS.
Hezký článek
mno mě by docela zajímalo jak řešíte ty problémy se znaky ? už se tu na to ptalo pár lidí ? i mě to v mozille i v IE hází otazníky místo českých znaků, a tak by mě zajímalo jak to pořešit?
Bohužel také mi nefunguje diakritika v IE. a hází to neznámou chybu
To je v prd?nejak to slo do ted mimo me, ted uz ne :) Diky za nazorny jednoduchy, prehledny a strucny priklad!
Tak to většinou dopadá, že weboví nadšenci, si s tím lámou hlavu a přitom ?farář káže špatnou věc!? ? komentář 18. depi
Jeden možná banální začátečnický dotaz ? umí ajax pracovat i s PHP?
Jasně že ne!
Vyřešení problému s Ajaxem je úplně jednoduchý? :D Stačí všude (stránka, skript, soubor který načítáme(!!!)) nastavit kódování UTF-8 :D Takže
A nastavit UTF-8 i u souboru který budeme načítat? Např v PSpadu je to v menu Format
*takže charset=?UTF-8?
*místo otazníků uvozovky :D