rss

AJAX - návod pro začátečníky

6. 11. 2005

ajaxPř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.


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 vzykouš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 ;)

Misha

mám problém s češtinou, XMLHttpRequest mi ji zmrší do otazníků… kde se ošetřuje tohle?

depi

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.)

tark

Medhi (#4): Mě to nefunguje, používám Operu ;)

depi

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)

maxAV

diky za peknej clanek! precet jsem par jinych uvodu do tematiky, ale tohle je jasne, strizlive a presvedcujici…

tark

a hele, medhi právě redesignoval :D

Borek

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.

Josef Rousek

Velmi pěkný příklad, bez zbytečného "okecávání".

kvezt

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)

#MaYo

kvezt [23]: No je to skor chyba kodovania, mne robi to iste

uz len netrpezlivo cakam na dalsi clanok aby som sa dozvedel viac

Jan Rozehnal

AJAX velmi pěkně využívá i phpmyvisites. Ale to je mimo téma

Johny

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?

Oswald

Johny [26]: Bezpečnostní omezení - pravidlo stejného původu.

Petr Klouček

Digitální citron, to je dobrý:) Ale stejně je fotbal nejlepší:)

Klingy

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?

Lama

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?????

komar

Good prvni krok, uz vim k cemu mi muze byt ajax platny, dik :) Jdu studovat :)

komar

Good prvni krok, uz vim k cemu mi muze byt ajax platny, dik :) Jdu studovat :)

Ozondesign

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é…..

xpadmin

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

Ondra

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

SUK

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

Jakub Hejda

Velmi Velmi jednoduchý příklad.
Přesně takový jsem hledal :)
Dííky

Jakub Hejda

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ý :))

Ondra

Dokonalé, jsem nenapravitelný nedouk v JS ale tohle mně nakoplo a snad se aspoň ten AJAX naučím. Díky, Ondra

Ondra

Dokonalé, jsem nenapravitelný nedouk v JS ale tohle mně nakoplo a snad se aspoň ten AJAX naučím. Díky, Ondra

Ondra

Sorry za opakováni, ale fakt za to nemuzu. A jsem jiny Ondra nez ten v prispevku 35.

Dr.ik

Nice :))

Robie

Skvělý stručný návod! Pochopil jsem, modifikoval jsem na to, co jsem potřeboval, a funguje to skvěle. Děkuji! :)

In-počasí

Lepší návod jsem na AJAX v české verzi nenašel

Vi\'tek

Moc pěkné - stručné, jasné, funkční …. no prostě geniální.
Jen tak dál :-)

sss

pekna hracka

bunak

Hmm pekne ale jak predam obsah toho vyberu (data formulare) nejakemu php skriptu? Tohle mi jen natahne clanek1 nebo clanek2. Jak teda odeslu formular?

bunak

Sorry, už jsem to pochopil. Stačí si napsat funkci pro serializaci dat formuláře :o)

Ivan

Ahoj,

fakt jednoduche vysvetlenie. Nemozem si vsak pomoct, tento priklad mi pripada podobne ako nacitanie stranky cez iframe.

Ivan

Ahoj,

fakt jednoduche vysvetlenie. Nemozem si vsak pomoct, tento priklad mi pripada podobne ako nacitanie stranky cez iframe.

Duk

Moc pěkný článek

Vojtěch Vrbka

S ajaxem se dají dělat velké věci, viz Gmail a  jiné projekty od google :)

Brown

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.

Dalibor Šulc

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

tark

Skvělý článek, teď už ho chápu a částečně jsem jim podpořil aplikaci, kterou teď píšu - DĚKUJI!

Ash

Jakub Hejda [38]: Našeptávač
http://blog.bitflux.ch/wiki/LiveSearch

Mi3ko

Geniálny článok, sosám a modifikujem… fakt dobré na začiatok o ajaxe, ak bude pokračovanie, daj vedieť… :)

Gee

Jakub Hejda [38]: tu su pekne priklady ajaxu…aj naseptavac sa najde :) http://www.zapa...om/website/main/

Gee

resp pekne priklady co sa da cez ajax spravit :) inak super clanok dakujem

LuBOSS

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?

Marekk

Moc pěkné shrnutí

pavouk1

hezky uvod, mozna se konecne i pustim do AJAXu ;]

Marek Vidtman

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"

Marek Vidtman

sam sobe kritikem :0) :
samozrejme, ze JS udalost je onclick

heleb

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

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 :)
HTH

ee

rrrrr

aa

aaa

odc

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?

M.Holec

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.

Komensky

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á :)

Komensky

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

Gord

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.

Alsan

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.

Alsan

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 :)

niesomcvok

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ý.

niesomcvok

tak už som to opravil ale stále mi vyhadzuje okno alert že chyba pri načitani stranky

Tomáš J.

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

Tomáš J.

*takže charset=?UTF-8?

Tomáš J.

*místo otazníků uvozovky :D

Petr

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

Petr

Jeden možná banální začátečnický dotaz ? umí ajax pracovat i s PHP?

anonym

Jasně že ne!

david

Hezký článek

Ofi

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?

Tom

Bohužel také mi nefunguje diakritika v IE. a hází to neznámou chybu

ferda

To je v prd?nejak to slo do ted mimo me, ted uz ne :) Diky za nazorny jednoduchy, prehledny a strucny priklad!

crewmanek

Naprosto samou věc umí i flash:) a není pak potřeba javascript.

Václav

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.

develo

¨To měnění uvozovek na ? je divné :-D

develo

Ajax nemůže pracovat s PHP protože pracuje na straně klienta ale dá se načítat php stránka na pozadí pomocí metody XMLHttpReques­t(?metoda(GET,POS­T,HEAD?)?,url,y/n); Když mu můžeš posílat parametry tak vlastně můžeš pracovat s PHPkem. Tak to můžeš i vytvořit chat? Takže pracovat s PHP scripty nemůže ale řídit podle tvé logiky ANO!

develo

Ještě k mému příspěvku, načtení stránky která bude sčítat 2 číslice bude: var xhr = XMLHttpRequset(?GET?,?s­ecteni.php?prvni=1­0&druhy=20?,y­es); V php souboru secti.php bude echo (int) ($_GET[?prvni­?]+$_GET[?dru­hy?]); A v ajaxovim ještě něco na zobrazení třeba document.getE­lementById(?na­kejdiv?).inner­HTML = xhr.responseText; Ještě je potřeba udělat pár kroků ale je to jen příklad :)

Brodlo

diky

Martin

Díky za nakopnutí? správným směrem ;-)

Noar

Děkuji Davelovi, za užitečné informace.


Archiv