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):
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:
<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:
<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:
<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"> </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ásaAngus Turnbull demo oldalának forrásaMax Kiesler demo oldalának forrása#### Kapcsolódó cikkek:
HTMLHttpRequest v1.0beta3HTMLHttpRequest v1.0beta3 online demoMax Kiesler online demo
Harder
Profil
Korábbi hozzászólások (35)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
Csak szerintem nem lehet a betöltött lapon javascriptet futtatni?
kapunk kódokat Harder?
javítva
dinamikusan kialakuló oldal esetén hogy tudom ezt megcsinálni?
linux alatt müködik,de lehetnek problémák, még csak ismerkedem a Request-el.
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.
„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?
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?
Sziasztok. Az lenne a kérdésem ezzel az újratöltéssel kapcsolatban, hogy ez seo szempontjából vajon hasznon megoldás-e?
Még egy kérdés. Mi a helyzet a dinamikus tartalmakkal? Vajon azokhoz is használható? Vagy van ilyen jellegű megoldás?
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.
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.
További 23 hozzászólás-szál megjelenítése
Köszi. Remélem TLoF mester vagy BlackY tollat ragad és eligazít ezügyben... :)
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?
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ó?
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.
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!!
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.
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ó???!!!
Sziasztok!! mért van az ha ezt a tudoriált használom beillesztem szépen elmennek az ékezetek az oldalamról???
Oksa nem olvastam végig... :)))))
Sziasztok!
Újratöltés nélküli stílus (css) váltásra van esetleg valakinek egy használható példája?
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.
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. :(
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.
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
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ó!
Sziasztok!
Nekem olyan gondom akadt, hogy a Java Scriptet tartalmazó aloldalon, nem működnek a scriptek.
Erre tud valaki valamilyen megoldást?
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.
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.
Ez a js kód egyszerűen iframe használatával oldja meg a tartalom elhelyezését. :S
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 !
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
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?
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.
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat