Hogy lehetne ezt megvalósítani?

van egy általános mondat 'ebben a világban':

"Tartalom frissítése, oldal újratöltés nélkül" = AJAX

Asynchron http request, amire szükséged van:

Tessék egy működő példa:

http_request.js:

function HttpClient() { }

HttpClient.prototype = {

requestType:'GET',

isAsync:false,

xmlhttp:false,

callback:false,

onSend:function() {

document.getElementById('HttpClientStatus').style.display =

'block';

},

onload:function() {

document.getElementById('HttpClientStatus').style.display =

'none';

},

onError:function(error) {

alert(error);

},

init:function() {

try {

this.xmlhttp = new XMLHttpRequest();

} catch (e) {

var XMLHTTP_IDS = new Array(

'MSXML2.XMLHTTP.5.0',

'MSXML2.XMLHTTP.4.0',

'MSXML2.XMLHTTP.3.0',

'MSXML2.XMLHTTP',

'Microsoft.XMLHTTP');

var success = false;

for (var i=0;i < XMLHTTP_IDS.length &&

!success; i++) {

try {

this.xmlhttp = new ActiveXObject

(XMLHTTP_IDS[i]);

success = true;

} catch (e) {}

}

if (!success) {

this.onError('Unable to create XMLHttpRequest.');

}

}

},

makeRequest: function(url,payload) {

if (!this.xmlhttp) {

this.init();

}

this.xmlhttp.open(this.requestType,url,this.isAsync);

var self = this;

this.xmlhttp.onreadystatechange = function() {

self._readyStateChangeCallback(); }

this.xmlhttp.send(payload);

if (!this.isAsync) {

return this.xmlhttp.responseText;

}

},

_readyStateChangeCallback:function() {

switch(this.xmlhttp.readyState) {

case 2:

this.onSend();

break;

case 4:

this.onload();

if (this.xmlhttp.status == 200) {

this.callback(this.xmlhttp.responseText);

} else {

this.onError('HTTP Error Making Request: '+

'['+this.xmlhttp.

status+']'+

' '+this.xmlhttp.

statusText);

}

break;

}

}

}

http_client.js:

var client=new HttpClient();

client.isAsync=true;

client.callback=function(result){

document.getElementById('tartalom').innerHTML=result;

}

function replaceContent(page){

client.makeRequest(page,null);

}

HTML:

head-be ezt tedd be:

<script type="text/javascript" src="js/http_request/http_request.js"></script>

<script type="text/javascript" src="js/http_request/http_client.js"></script>

Link:

<a href="javascript:replaceContent('valami.php')">link szövege</a>

Betöltés kijelzése: (stílusát CSS-ben úgy alakítod, ahogy akarod)

<div class="loading" id="HttpClientStatus">

<div style="display:none">Loading...</div>

</div>

Behúzandó tartalom az alábbi divbe kerül bele:

<div id="tartalom">

</div>

Ajánlom, hogy nézz utána az az AJAX és SEO-nak, mivel a keresőoptimalizálásához is érteni kell, mivel valójában JavaScriptről van szó, ha AJAX-ról beszélünk.

Már csak egy olyan scriptre van szükséged, ami az AJAX hívást valamilyen esemény alapján végzi el, vagy időzítve teszi azt, és nem úgy mint ebben a példában, hogy linkre kattintva történik a frissítés.

még egy fontos dolog, az így frissített tartalmakat nem fogod tudni könyvjelzőbe tenni.

Ha ezek alapján nem megy a dolog, akkor jó, ha ráfekszel a kliens és szerver oldali programozásra, mert anélkül nem fogod tudni megoldani a problémát.

Arra gondoltam, ha már most is AJAX-os tartalomfrissítéssel foglalkozom az egyik oldalamon, akkor kiegészítem az előző hozzászólásomat azzal, hogyan is tedd a honlapodat keresőbaráttá.

Ezzel a módszerrel a keresőrobotnak html tartalmat tudsz biztosítani. Ime a mostani honlapomból egy kis mintakód:

<a class="menulink" href="partners.php" onclick="javascript:replaceContent('content/partners.php'); return false">

Egy kis magyarázat a kódhoz.

A keresőrobot a partners.php-t fogja pásztázni, amiben a kereső számára létrehozott oldal van. Lényeges hogy teljes értékű html oldal legyen, ne csak annyit tartalmazzon, mint az AJAX-szal frissített tartalom.

A content/partners.php-ben pedig csak a behúzandó tartalom szerepel.

Kikapcsolt JavaScript esetén meg is tudod tekinteni a böngészőben, azt az oldalt, amit a kereső látni fog.

Ha nincsenek JavaScript ismereteid, akkor is simán használhatod, ha csak a HTML-t ismered, mivel ez copy/paste kód. Még azt is odaírtam milyen fájlnévvel és kiterjesztéssel kell elmenteni a JavaScripteket, és hogyan kell hivatkozni rá a html head-jében.

a tartalom id-vel rendelkező divbe kerül mindig a lecserélt tartalom.

Ebből pedig az következik, hogy egy külön file-ban kell tárolnod azt a ködrészletet, amit AJAX hívással fogsz behúzni, vagyis eléggé hasonlít a módszer az iframe-es megoldáshoz. Csak annyi a különbség, hogy Iframe-mel teljes HTML oldalt kell betölteni, míg itt egy adott divbe húzol be egy külön fájlban tárolt kódot, jelen példában a tartalom id-jű divbe húzzuk be a külső állományban tárolt kódot. Az AJAX-os tartalomcsere egyébként onclick eseményre következik be.