Tartalom cseréje refresh nélkül. Melyik a legjobb módszer ?

[Vöri]

Üdvözletem!

Mostanában a legnagyobb fejtörést okozó kérdés a számomra, hogy hogy cseréljem a weboldalon a dinamikus tartalmat az egész oldal újratöltése nélkül. A probléma abból a perverziómból táplálkozik, hogy előszeretettel használok Flash-t a fejlécben, vagy sok esetben csupán a tartalom "körüli" rész betöltése annyi időt vesz igénybe, hogy a refresh látható, és esztétikai jelleggel, surfer szemmel ronda.

1. A frame-k már a múlté, elsősorban tudtommal a zero sized framek a google botnak mindig problémát jelentett, szerintem ezért temethetjük
2. Az IFrame személyes tapasztalatom szerint nem olyan rossz, keresőkben meglepően jól szerepelnek IFrames oldalak, véleményem szerint a Framekkel kapcsolatos előítélet ráragadt az Iframere is, megfelelő paraméterezéssel nagyon esztétikus megoldás pedig, hátránya a fix magasság
3. A postom kérdésének lényege : ajaxos loadinto. Alapból fura nekem, hogy teljes html tartalmat rakhatunk be egy div-be, headerrel, css-el. Kétségtelenül a leggyorsabb és legszebb megoldás. Harder tutorialját nézegetve megnyugodtam, hogy teljesen SEO friendly, viszont a napokban olvastam egy oldalon, hogy nem az , erről kéne itt vitatkozni , én mindenesetre Harder véleménye mellett török pálcát, hiszen a hivatkozáson be tud esni a minden robot, a szabványos href tag miatt (gondolom én). Nagy előnye még a dinamikus méretezési lehetőség x és y irányba: profi hatás. Hátrányként szokták felhozni a fix url-t, de szerintem egy kis többletmunkával php paraméterezéssel átadható a betöltendő html neve, így nincs frissítés a klikkeléseknél, de bele tudunk hivatkozni közvetlenül az adott tartalomba, viszont a bookmark meg a főoldalt fogja menteni . Ez sajnos az iframre is igaz. A másik kérdés a tiltott Java a browserben, bár ezek aránya szerintem tolerálható mértékben alacsony, ne akudt jellegű probléma.

Mi a véleményetek?

[Zaphod]

Nagyon rég óta használom az AJAX-ot arra, amire kérded. Teljesen jó megoldás. Írtam egy AJAX scriptet, ami egy a hívásnál megadott div-be betölti a meghívott php-t az átadott paraméterekkel. A gyakorlatban így néz ki

bárhol az oldalban elhelyezek gy láthatatlan div-et. Ezt persze a CSS-ben rendesen elkészítem, pl:

<div id="barmi" style="display:none;"></div>

<a href="#" OnClick=mutat('bami'), load('load.php?index=valami.paraméterek, amennyi csak kell...','barmi');">link szövege</a>

a mutat('barmi') egy egyszerű JS ami a display:none-ból display:inline-t csinál, majd a load nevű AJAX pedig betölti bele pl. a load.php-t a mögötte lévő paraméterekkel. A betöltendő php filenak mindenképp utf8-nak kell lennie, ezt nem sikerült áthidalnom, de mivel ma már amúgy is minden file-t utf8-ban készítek, így ez mind1.

Az AJAX script tartalmaz egy loader gif-et is, úgyhogy elég profi a hatása, pláne ha sok az adat, vagy lassú a user net-je (hű ez de ronda fogalmazás)

Én ezzel a megoldással jelenítem meg. pl. az x karakternél hosszabb híreket,a vendégkönyvet, a képgalériákat és mindenféle regisztrációs ablakot. Nagyo sok minden.

Ha érdekel mailben elküldöm az scripteket, ha meg többeket is érdekel akkor beírom ide

Aki a JS-t letiltja a böngészőjében, azzal én nem szoktam foglalkozni. Privát véleményem szerint nem normális aki ilyet tesz.

Valóban, azAJAX-al hívott tartalmat a gugli sosem fogja a találati oldalon megjeleníteni, épp ezért ez a megoldás nem túl SEO barát szerintem, viszont rengeteg előnye van és gyors, rugalmas. Amit itt elveszítesz esetleg a SEO-nál, azt hozd be máshol az oldalon.

[Bagi Zoltán]

Zaphod, naná, hogy érdekel! Posztold csak be bátran ide, had dobassunk neked még hírnevet.

[Zaphod]

Kérésetekre, tessék egészséggel használni:

kis magyarázat.
a két script a mutat és a load nem tartozik szervesen össze. A mutat csak akkor kell, ha pl. egy popup hatást akarsz elérni egy hírlev feliratkozást, vagy hasonlót. Önmagában a load is használható, csak a lényeg, hogy a második paraméterben megadott div létezzen és látszódjon.

a mutat js:
function mutat(subject)
{
if(document.getElementById(subject).style.display= ='none') { document.getElementById(subject).style.display='in line'; }
}
function rejt(subject)
{
if(document.getElementById(subject).style.display= ='inline') { document.getElementById(subject).style.display='no ne'; }
}

a load js:

function load(url,place) {
document.getElementById(place).innerHTML = "<div style=\"text-align:center;font-family: Calibri; font-size:12px; font-weight:bold; margin-top:100px;;\">Betöltés...<br><img src=ajax-loader.gif></div>";
var req = null;
if (window.XMLHttpRequest)
req = new XMLHttpRequest()
else
if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");

req.onreadystatechange = function() {
if (req.readyState == 4)
if (req.status == 200)
document.getElementById(place).innerHTML = req.responseText;
else
document.getElementById(place).innerHTML = "AJAX error.";
}
req.open("GET", url, true);
req.send(null);
}

a hívása pedig:

<a href="#" OnClick="mutat('a div amibe betöltöd'), load('valami.php?paraméterek','a div amibe betöltöd');">link szöveg, kép, stb.... </a>

az ajax-loader.gif meg bármi lehet, amit csak akarsz.

Egyébként ez (a loader) talán egy igen igen régi topicod válasza (megoldása) is lehet Zoli.

Sajna van 1 hátránya:
Opera-ban nem működik (minden más böngészőben tökéletesen)

Persze lehetne még mit finomítani rajta, de így is tökéletesen működik, és abszolút nincs időm a finomításra.

jó munkát hozzá/vele.

[ChrIsDrY]

Klassz kösz! Én csak a Iframe-et javasoltam, pont jókor jött ez az Ajax-os scripted, köszönet érte. Szólok is a programozóknak.

[Zaphod]

egészségetekre és kösz a pontokat

[szpetya]

Hey!

Ajaxal csak egy gond van ami szerintem eléggé bosszantó (legalábbis engem nagyon szokott bosszantani...) a vissza gombot felejtsd el. Bár a google már megoldotta de én még nem jöttem rá hogy hogy lehetne ezt a hibát kiküszöbölni... Nem biztos, hogy a te oldaladon ez problémát jelent, de én fejlesztettem egy oldalt www .arenaklub.hu és azt egy kicsit szétajaxoztuk pl ajaxon belüli ajax... Ha barangolsz az oldalon menüpontról menüpontra és egyszer csak reflexből nyomsz egy vissza gombot, akkor ki tudja hogy hova fog visszaugrani. Tehát ez nem túl user barát… Figyelj arra, hogy ne vidd túlzásba az ajaxozást

Üdv
P

[Zaphod]

szpetya eredeti hozzászólása

Hey!

Ajaxal csak egy gond van ami szerintem eléggé bosszantó (legalábbis engem nagyon szokott bosszantani...) a vissza gombot felejtsd el. Bár a google már megoldotta de én még nem jöttem rá hogy hogy lehetne ezt a hibát kiküszöbölni... Nem biztos, hogy a te oldaladon ez problémát jelent, de én fejlesztettem egy oldalt www .arenaklub.hu és azt egy kicsit szétajaxoztuk pl ajaxon belüli ajax... Ha barangolsz az oldalon menüpontról menüpontra és egyszer csak reflexből nyomsz egy vissza gombot, akkor ki tudja hogy hova fog visszaugrani. Tehát ez nem túl user barát… Figyelj arra, hogy ne vidd túlzásba az ajaxozást

Üdv
P

Szerintem nagyon profi munka, gratulálok hozzá, de télleg rendesen ,,széjjel,, ajaxoztátok. Ebben az esetben az, hogy nem SEO és USER barát, az nem kifejezés. Sikerült túlzásba vinni picit. De mondom, igen tetszik.

Ennyire a teljes tartalmat felépíttetni az AJAX-al nem szoktam és nem is szabad szerintem, épp a tartalom ,,hiánya,, miatt. Megnézve forrását, hát a kód:tartalom arány csúnyán eltorzul. Ráadásul a menü meg flash. A gugli biztos szereti a lapot.

Igazából csak arra használom az ajaxot, amit fent is említettem. Olyan adatok megjelenítése, ami igazából nem kapcsolódik szorosan a tartalomhoz, formok, beléptető rendszerek, képgalériák, stb.. megjelenítésére. A tartalom és a struktúra minden esetben pure html.

Még1x grat az oldalhoz.

[Nero]

Kiprobaltam ezt a scriptes loados megoldast. Megirtam a programot, emulatorban szepen mukodik, feltoltottem szerverre es sajna csak IE alatt muxik ugy ahogy... ha FF-ben probalom akkor nem tolti be a linket...

Van erre mar valami mas megoldas is?

(problema: van egy oldal amiben a body nevu divben reszben levo tartalmat, ugy szeretnem frissiteni a menu gombok segitsegevel, hogy a felulette levo divben talalhato kepfajl ne tolotdjon be ujra)

[Simulacrum]

Szerintem egy linkkel könnyebb lenne látni a hibát.