Tartalom váltása a lap újratöltése nélkül II. – HTMLHttpRequest


Mióta kikerült ennek a cikknek az első része, többen is megkerestek azzal, hogy lehet megoldani ugyanezt azzal a módosítással, hogy a lap változó tartalmát külön-külön HTML fájlokban lehessen tárolni. Most kicsit utánaolvastam a neten és találtam egy megoldást Max Kiesler cikkei között “Make an AJAX Website in Less than 10 Minutes” címmel. A módszert kipróbáltam és működik, tényleg nagyon gyorsan fel lehet húzni vele egy működő honlapot (vagy akár általakítani egy már meglévőt, ahogy én is tettem).

Angus Turnbull-tól származik a “HTMLHttpRequest v1.0beta3“, mely kezdésnek szerintem teljesen jó, ha ilyesmivel szeretnél foglalkozni.

Demo oldal: http://www.tutorial.hu/webszerkesztes/htmlhttprequest/

Nézzük meg, hogy épül fel a demo oldal. A szerkezete (csak azokat a fájlokat jelölöm, melyek most érdekesek a működés szempontjából):

1
2
3
4
5
6
7
8
9
10
content/
content/demo1.html
content/demo2.html
content/demo3.html
css/
images/
js/
js/htmlhttprequest.js
js/inside.js
index.php
  • Az “index.php” lehet HTML is, nincs jelentősége. Ez a lap töltődik be alapértelmezetten, ez tartalmazza a css-re és JS-re mutató hihvatkozásokat.
  • A demo[x].html fájlok tartalmazzák az egyes menüpontok anyagát, ezek különálló oldalakként is megállják helyüket (doctype, head stb… van benne).
  • A “css” könyvtárban található “linkfelho.css” tartalmazza a formázásokat, de nincs benne olyan tartalom, melyre most a lap működéséhez szükségünk lenne.
  • Az “images” könyvtár tartalma megint csak nem érdekes, grafikai elemeket tartalmaz.
  • A “js” könyvtárban található 2 fájl tartalma viszont fontos. Eredetileg az általam letöltött demokban csak a “htmlhttprequest.js” volt linkelve, a másik “inside.js” tartalma az index oldalba volt elhelyezve. Mivel különösebb magyarázatot erre nem találtam és meglehetősen csúnyának tartottam a fájl elején a js scriptet, így azt kitettem egy külön fájlba (ez lett nálam az “inside.js”).

Az “index.php” fejlécében ez a 2 sor az ami most fontos nekünk, meg kell adni a js fájlok elérési útvonalát:

1
2
<script type="text/javascript" src="js/htmlhttprequest.js"></script>
<script type="text/javascript" src="js/inside.js"></script>

Ha ez megvan, létre kell hozni a menüket, melyek nálam így néznek ki:

1
2
3
4
5
<span><a href="content/demo1.html" class="loadinto-contentwrapper">demo 1</a></span>
<span> | </span>
<span><a href="content/demo2.html" class="loadinto-contentwrapper">demo 2</a></span>
<span> | </span>
<span><a href="content/demo3.html" class="loadinto-contentwrapper">demo 3</a></span>

Ami ebből megjegyzendő, hogy az egyes menüelemekhez hozzá kellett adni egy class-t, mely 2 fontos elemet tartalmaz:
1.) a “loadinto-“, mely megmondja, hogy a link tartalmát töltse be, hova ….
2.) a kötőjel utáni class névbe, mely nálam a “contentwrapper” nevet viseli.

Az index.php további forráskódját nézve az alábbiba botlunk:

1
2
3
4
5
6
7
8
9
<div id="contentwrapper">
 <div class="linkfelho-cikk">
  <h1>Első oldal ...</h1>
  <h3>A honlap alapértelmezett tartalma</h3>
   <P>Ez a tartalom jelenik meg akkor, mikor a lap először betöltődik. a menüben erre mutató link nem htmlhttprequest-tel van megoldva, így a kattintás után a lap mindig újratöldődik.</P>
   <P>a több oldal (demo1, demo2 és demo3) betöltése htmlhttprequest-tel történik, így a böngésző címsorában lévő URL nem változik és a lap tartalma sem kerül frissítésre.</P>
 </div>
 <div class="clear">&nbsp;</div>
</div>

Mint látható, itt van a “contentwrapper” id-jű div, melybe a linkekre kattintva a különböző tartalmak (demo..) be fognak töltődni. Ezt persze át lehet nevezni, formázni stb… egy a fontos: hogy a linkek utána class-ban ennek szerepelnie kell!

Ezzel tulajdonképpen meg is volnánk, tényleg ennyire egyszerűen lehet alap ajax-os honlapot készíteni. :)

Előnyök:

  • Nagyon gyors a lap, hisz csak kis részeket kell letöltetni a kiens gépekkel
  • Nincs lapbetöltés, nincs villanás kattintás után, gyakorlatilag egyből megjelenik a kért menüpont
  • Régebbi böngészőkben is működik, mint pl. Opera 7 vagy IE5 (illetve Mac-en is)
  • A linkek hagyományos “a href=”-ek, így kikapcsolt javascript esetében is elérhetőek a tartalmak illetve a keresőrobotok simán megtalálják

Hátrányok:

  • A tartalmak forráskódban csak akkor látszódnak, ha pl. a firefox / Web Developer Toolbar-ban a “View generated source”-t választod
  • A böngészők cache-elése miatt nem biztos, hogy a tartalmi változásokat mindenki egyből látni fogja
  • Nem lehet a kedvencekbe tenni az egyes aloldalakat
  • A böngésző BACK gombjára nem az előző tartalom jelenik meg

Kompatibilitás:

  • Tesztelve és működik: IE6/Win, IE5.5/Win, IE5/Win, IE4/Win, Mozilla/Win, Opera7/Win, Safari/Mac, IE5/Mac.
  • Nem teszt, de valószínűleg működik: IE4/Mac, Mozilla/Mac, Opera/Other, Konqueror/linux.
  • Biztosan nem működik: v3.x böngészőkben, NS4, Opera v6 vagy ez alatt.

Letöltések:

E cikk demooldalának forrása
Angus Turnbull demo oldalának forrása
Max Kiesler demo oldalának forrása

Kapcsolódó cikkek:

HTMLHttpRequest v1.0beta3
HTMLHttpRequest v1.0beta3 online demo
Max Kiesler online demo

Kapcsolódó bejegyzések:
  • Van egy régebbi tutorial (“Tartalom váltása a lap újratöltése nélkül II. – HTMLHttpRequest”), amit szerettem volna használni egy adminisztrációs felületen. Remek …

  • Biztos láttad már honlapokon azt a fajta megoldást, amikor a kis thumbnail képekre kattintva nem a lapba vagy új ablakba jelenik meg a kép, hanem “beszürkül” a h …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • A minap olyan megoldásra volt szükség, hogy egy felső navigációs menüt fülekkel kellett megoldani az alábbi kikötésekkel:– legyen rugalmas (a fül szövege hat …

A cikket beküldte: Harder (http://blog.harder.hu)

35 hozzászólás

  1. adam_g says:

    Csak szerintem nem lehet a betöltött lapon javascriptet futtatni?

  2. lepke says:

    kapunk kódokat Harder?

  3. lepke says:

    dinamikusan kialakuló oldal esetén hogy tudom ezt megcsinálni?

  4. grungez says:

    linux alatt müködik,de lehetnek problémák, még csak ismerkedem a Request-el.

  5. Joly says:

    Az a problémám, hogy egy php behívó script van az első oldalon, és amiket behívok helyette(oldalak), azok nem a helyére, hanem fölé mennek. Ezt mi okozza? Help pls.

  6. Skalár says:

    „A böngészők cache-elése miatt nem biztos, hogy a tartalmi változásokat mindenki egyből látni fogja”

    Tudnád ezt egy kicsit részletezni?! Mitől függ? Böngészőtől? Oprendszertől? Mi az hogy egyből?

  7. TamásSs says:

    Nálam abban a filében amit betölt megformáztam a szöveget, de amikor betöltötte egyben ömlesztve teszi ezt meg bekezdések nélkül. Ez miért van?

  8. Bidu says:

    Sziasztok. Az lenne a kérdésem ezzel az újratöltéssel kapcsolatban, hogy ez seo szempontjából vajon hasznon megoldás-e?

  9. Bidu says:

    Még egy kérdés. Mi a helyzet a dinamikus tartalmakkal? Vajon azokhoz is használható? Vagy van ilyen jellegű megoldás?

  10. Bidu says:

    Nem spammelni akarok, csak érdekelne, hogy dinamikus tartalmakkal mi a helyzet? Megoldható ez valahogyan ott is? Mert jelentősen csökkentené az adatforgalmamat, ha nem kellene mindig újratölteni az egész oldalt…. Köszönöm.

  11. Harder says:

    A választ részben meg tudom adni: igen, dinamikus tartalmat is lehet úgy frissíteni, hogy nem kell újratöltened az egész lapot. Viszont kódot nem tudok mondani, remélem hamarosan jár erre programozó is aki részletesebb válasszal tud szolgálni a megoldásról.

  12. Bidu says:

    Köszi. Remélem TLoF mester vagy BlackY tollat ragad és eligazít ezügyben… :)

  13. Doenroy says:

    Gondolom, az én készülékemben van a hiba, hogy ékezeteket nem szereti – sehogy. Egy másik ajaxos kóddal is ugyanilyen eredményre törekedtem, akkor is a fejemre állhattam, de nem beszélt magyarul. Ez másnál nincs?

  14. zsozso says:

    Kérdesem lenne ha tudna valaki segíteni nagyon megköszönöm.Ezt atartalom váltást probálnám úgy össze hozni hogy egy flash menüből váltanám a tartalmat de nem tudom mit irjak a flashbe hivatkozásnak? getURL(“http://www.macromedia.com”,”_self”); ez ugye nem jó?

  15. Cornelius says:

    A magyar ékezetekkel nálam sem boldogult, bármit csinálhattam vele. Kénytelen voltam az összes ékezetes betűt lecserélni html kódra, ami némi kis pluszmunkával járt… ezután már hibátlanul működött.

  16. Evi says:

    Ah, tehát nem a programomban van a hiba! Nagy kő esett le a szívemről! Tehát, másnál sem működnek az ékezetek. Viszont a Javascript sem akar működni. Ez Nálatok hogy műkszik?
    Általában, milyen megoldásokat szoktak/szoktatok alkalmazni a menüből egy adott területre való betöltéshez, majd tartalomváltáshoz?
    Szakdoliként készítek honlapot. Minden tanácsot szívesen fogadok. Előre is köszönet!!

  17. asam9 says:

    A karakterproblémák nekem megoldódtak az UTF-8 használatával. Keresőoptimalizálási szempontból úgy tudom, hogy leköveti az ajax-os linkeket a keresőrobot, de nem tudom, hogy ez mennyire biztos.
    Ha erre jár egy programozó (pl. BlackY vagy TLoF :D), akkor azt szeretném megkérdezni, hogy mi van akkor, ha a google kidob egy találatot az egyik aloldalon és rákattintok a hivatkozásra? Mert sztem sajnos az fog történni, hogy nem az index fog megnyílni és beletöltve az adott aloldal, hanem csak az aloldal.

  18. amatyi says:

    A betöltött tartalmakon belüli linkek hogyan működnek??? A belső fájlban, hogy ugyanoda töltsön be egy hivatkozást ahol az található???!!!

  19. Misike says:

    Sziasztok!! mért van az ha ezt a tudoriált használom beillesztem szépen elmennek az ékezetek az oldalamról???

  20. Misike says:

    Oksa nem olvastam végig… :)))))

  21. Trianta says:

    Sziasztok!

    Újratöltés nélküli stílus (css) váltásra van esetleg valakinek egy használható példája?

  22. Govi says:

    Helo!

    Miért lehet az, hogy IE-ben nem az oldalra tölti be a tartalmat hanem nyit 1 új lapot… de ugyanarra a fülre és ott látszik?

    A válasz előre is köszi.

  23. useless says:

    Sziasztok!
    Arra a problémára van valakinek ötlete, hogy miért nem tölt be nekem képeket? Annyi lenne a feladata, hogy az oldalamon a referenciákat egy div-be helyezné el, és minden referenciának van egy címe, egy thumbnail kép róla ami egy hivatkozás, valamint egy rövid leírás róla. De a kép helyett csak egy link jeleni meg. :(

  24. kera says:

    Azért nem rakja ki a képet valószínűleg mert rosszul van belinkelve. Figyelj arra, hogy az index.php/html fájlodtól kiindulva fogja keresni, tehát úgy adj neki src-t mintha az index-be tennéd a képet.

  25. useless says:

    Igazából nem az volt a probléma! Én bénáztam egy sort. Vagyis src helyett scr-t írtam és akárhogy néztem csaknem tűnt fel. Szóval tényleg jó ha az editorod szintaktikailag tud ellenőrizni! :P

  26. Van egy kb. 10 oszlopos, max. 1000 soros tábla, amit programból bármilyen formátumban kiprintelek pl. XLS-be.
    Feladat: Adatbázisszerűen megjeleniteni a web-en, rendezni, szűrni — readonly. A web-tárhelyhez ftp-vel hozzáférek. Bérelt tárhelyen, PHP-t és adatbáziskezelő nélkül megoldható-e a feladat? Az AJAX mintha erről is szólna!?
    Konkrét, megrendelt feladat, alvállakozásba kiadó!

  27. Bugge says:

    Sziasztok!

    Nekem olyan gondom akadt, hogy a Java Scriptet tartalmazó aloldalon, nem működnek a scriptek.

    Erre tud valaki valamilyen megoldást?

  28. Gábor says:

    Hali!
    Kikapcsolt javascript esetén mi lehet a megoldás? Mert akkor konkrétan így tölti be az oldalt:
    http://www.tutorial.hu/webszerkesztes/htmlhttprequest/content/demo1.html
    ami azért nem túl elfogadható forma. Gondolom a keresők is így látják, ha végigmennek a weblap belső linkjein.

  29. Péter says:

    Sziasztok!
    A problémám nekem is az mint az előttem szóló pár embernek, ha kapott azóta valaki választ legyen oly kedves ossza meg velem is. A gond a következő:
    A betöltött lapon nem tudok .swf-et futtatni, kiírja hogy hiba az oldalon, úgy csinál mintha töltene de nem történik semmi ( csak internet explorer-el produkálja, ugyanaz firefox-al és operával is tökéletes )
    Előre is köszi.

  30. blasterNOX says:

    Ez a js kód egyszerűen iframe használatával oldja meg a tartalom elhelyezését. :S

  31. Szója says:

    Sziasztok !

    Nekem olyan problémám lenne, hogy a div-be betöltött tartalomban(egy php fájl) nem működik a “FancyBox”. Képgalériát próbáltam vele csinálni mert egyszerűen normálisan testre szabható

    (gallery.php –> echo ‘‘; val írja ki egy könyvtárban lévő képeket… )

    Önmagában a fájl működik normálisan, csak bele kell rakni a Fancybox-hoz szükséges cuccokat…,de div-be betöltve a képet sima link ként kezeli és új ablakban megnyitja.

    Lightbox2-vel tökéletesen működik minden, csak szeretnék mást használni.

    Ha valaki tudna valami megoldást, azt nagyon megköszönném !

  32. Pemegény says:

    Köszönöm!
    Megintcsak sikerült gördülékenyen megépíteni a site-ot az instrukciók alapján.
    Nagyon örülök neki.
    Köszönöm

  33. Pemegény says:

    Még az jutott eszembe, hogy hogyan lehetne megoldani, hogy a meghívott oldal gombjának aktív legyen az állapota.
    Szóval amenüpontok li-kben vannak, és a meghívott li kapjon egy class-t (class=”active”), és így user-baráttá válik a menü.
    Erre van valamilyen megoldás, vagy tutorial?

  34. Lital says:

    Csak egy tipp azoknak akiknek formázás nélkül tölt be:
    Ha a többi tartalmat is az index mellé a gyökérkönyvtárba teszed akkor jo lesz a formázás és nem kell foglalkozni anyit a linkekkel sem habár így elég sok fájlt lesz ott de így kikapcsolt JS-el is műkszik. Lehet hogy több problémára is megoldás lesz.

Szólj hozzá
a Tartalom váltása a lap újratöltése nélkül II. – HTMLHttpRequest c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>