Archief - refreshen content gedeelte website zonder header en footer te refreshen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
m

moose-man

Legacy Member
Hallo,

Ik vroeg me het volgende af:
Stel, een 'standaard' PHP website met header, footer, content , en eventueel links een gedeelte met menu's. Hoe kan ik - naarmate de gebruiker akties onderneemt op de site - het content window refreshen? Hoe doet met dit in de meeste gevallen? Wordt hier de volledige website gerefreshed?


J.
Z

Zero Grav

Legacy Member
Simpel gesteld komt het op het volgende neer: Met javascript wordt opvangen wanneer een gebruiker op een link klikt en er wordt verbinding gemaakt met PHP door middel van een Ajax request om de pagina op te vragen. Eens terug ontvangen wordt de huidige content gewist en de nieuwe content erin geïnjecteerd.

In JQuery is dit echt enorm simpel te doen, maar om het correct te doen is nog iets anders. Wat vaak vergeten wordt is dat het zonder Javascript ook nog zou moeten werken, waardoor een gebruiker zonder javascript (of een zoekmachine) een niet-werkend menu voorgeschoteld krijgt.

Eén van de functies: http://api.jquery.com/jQuery.ajax/
d

dJeez

Legacy Member
moose-man zei:
Hoe kan ik - naarmate de gebruiker akties onderneemt op de site - het content window refreshen? Hoe doet met dit in de meeste gevallen?
Klik om te vergroten...
In de meeste gevallen doet men effectief een full page reload, omdat je anders zelf nog met veel te veel dingen (zoals vb. bookmarks) rekening moet houden. Kijk maar eens wat drukbezochte (nieuws) sites na, je zal er wellicht geen enkele vinden die zijn hoofdinhoud via AJAX gaat refreshen (widgets op de pagina uitgezonderd uiteraard).
-

-BVR-

Legacy Member
Zero Grav zei:
Simpel gesteld komt het op het volgende neer: Met javascript wordt opvangen wanneer een gebruiker op een link klikt en er wordt verbinding gemaakt met PHP door middel van een Ajax request om de pagina op te vragen. Eens terug ontvangen wordt de huidige content gewist en de nieuwe content erin geïnjecteerd.

In JQuery is dit echt enorm simpel te doen, maar om het correct te doen is nog iets anders. Wat vaak vergeten wordt is dat het zonder Javascript ook nog zou moeten werken, waardoor een gebruiker zonder javascript (of een zoekmachine) een niet-werkend menu voorgeschoteld krijgt.

Eén van de functies: jQuery.ajax() – jQuery API
Klik om te vergroten...

Zero Grav zei:
In JQuery is dit echt enorm simpel te doen, maar om het correct te doen is nog iets anders. Wat vaak vergeten wordt is dat het zonder Javascript ook nog zou moeten werken, waardoor een gebruiker zonder javascript (of een zoekmachine) een niet-werkend menu voorgeschoteld krijgt.
Klik om te vergroten...

Bwah, ik denk dat het zeker voor kleinere sites (portfolio's etc.) wel doenbaar is. Heb zelf snel iets ineen geknutseld: Bram Vanroy | Webdeveloper and webdesigner | Section loading with JavaScript enabled and disabled (geen reclame, gewoon een voorbeeld)

Uiteraard staat er nu weinig content, maar dit lukt zeker ook met afbeeldingen etc. Het enige nadeel dat je dan hebt is de loading time en de gigantisch lange pagina die je krijgt als JS disabled is.

Voor de luiaards, hier een afbeelding: http://bramvanroy.be/files/Untitled-1.jpg

Als JS disabled is, geef je standaard je body-tag de class "nojs" mee en je maakt de pagina zoals je wilt (in dit geval dus met alle secties onder elkaar. Je doet aanpassingen etc. door in je CSS body.nojs als 'pre-element' te gebruiken. Bv.:
Code: 
body.nojs div#hidewrap {
	display: none;
}

Als JS enabled is ga je met een scriptje dan de .nojs class uit de body verwijderen en je verbergt alle secties behalve de eerste en zo regel je dan ook je menu en het tonen van je secties.


Voor grotere sites is dit uiteraard zo goed als ondoenbaar. :) EDIT: en ik heb ook geen gebruik gemaakt van die jQuery functie, dus waarschijnlijk kan het nog korter en efficienter wat ik doe.
Z

Zero Grav

Legacy Member
Maja, dat is het dus niet hé. Nu laadt ge gewoon alle pagina's in één keer in en gaat ge dan andere content tonen naargelang waar ge op klikt. Granted, voor een user komt dat uiteindelijk wel op hetzelfde neer, maar dat is dus niet de bedoeling. Naar SEO toe is dat ook een ramp om het op die manier aan te pakken trouwens, uw pagina verliest zijn eigen identiteit en alles wordt bij elkaar gezet.

De key is dat ge blijft werken met verschillende pagina's en uw menu exact hetzelfde blijft. Maar dat ge gewoon bij het stopzetten die pagina gaat inladen, niet gewoon een bepaald blok gaat weergeven, en uw huidige content gaat vervangen.

In de pagina die ge inlaadt (idealiter eigenlijk een frontcontroller die dat voor u doet) moet ge dan kijken of ge via AJAX inlaadt en zoja geeft ge enkel de content terug die moet geïnjecteerd worden. Of als ge gewoon met HTML-pagina's werkt kunt ge ook enkel een bepaalde div inladen door .load('page #divId'); te doen.

Maar key is dat uw site zonder javascript gewoon de pagina's blijft herladen. Uw site moet zonder javascript nog steeds naar de aparte pagina's blijven navigeren.

Zo dus: Test

Maar dan nog waarbij ge uw title en url update en eventueel uw menu actief zet. Ge hebt dus zowel de indexpagina als die van pageTwo, die volledig onafhankelijk van elkaar zijn en alle content bevatten.

Nu, op zich is wat dJeez zegt nog het meest relevante. Ge kunt zo'n technieken beter gebruiken om kleine delen van een site te herladen of in te laden dan effectief een volledig contentvlak.
-

-BVR-

Legacy Member
Ik bedoel maar dat ge dat voor kleine sites wel kunt doen. SEO-vriendelijk nihil, inderdaad, maar dat maakt toch niets uit als het om een kleine site gaat? Je wilt namelijk maar één pagina promoten en bij mijn weten maakt het aantal pagina's dat een website heeft niet uit voor SEO. Die ene pagina zal de gebruiker zeker wel bereiken (geen verschil in rank bij zoekresultaten) en voor de rest is het (imo) even gebruiksvriendelijk. Heel misschien dat als het om iets meer content gaat, zal de pagespeed de ranking wel beïnvloeden maar dan zal je ook al wel wat moeite moeten doen :)
Z

Zero Grav

Legacy Member
Pagespeed is meer iets waar ik stil voor bij staan bij de gebruiker. Maar gewicht van content wordt heel anders verdeeld als ge opeens de content van ~ 5 pagina's op één pagina gaat steken. Keywords die geteld worden bij voorkomen op de pagina tegenover andere content worden opeens een pak minder waard (zowel headers als gewone content).
De URL van uw content bestaat niet omdat de aparte pagina niet bestaat en wordt dus ook niet meegeteld. Keywords en content description meta tags worden misschien niet meer echt gebruikt door zoekmachines, maar dan gelden ze ook helemaal niet meer.

Om het te implementeren hebt ge met beide methodes evenveel werk, dus waarom niet kiezen voor de methode die meer voordelen dan nadelen oplevert, ook al is het voor een kleine site?
-

-BVR-

Legacy Member
Zero Grav zei:
Pagespeed is meer iets waar ik stil voor bij staan bij de gebruiker. Maar gewicht van content wordt heel anders verdeeld als ge opeens de content van ~ 5 pagina's op één pagina gaat steken. Keywords die geteld worden bij voorkomen op de pagina tegenover andere content worden opeens een pak minder waard (zowel headers als gewone content).
Klik om te vergroten...
True, zo ver had ik nog niet nagedacht.

Zero Grav zei:
De URL van uw content bestaat niet omdat de aparte pagina niet bestaat en wordt dus ook niet meegeteld. Keywords en content description meta tags worden misschien niet meer echt gebruikt door zoekmachines, maar dan gelden ze ook helemaal niet meer.
Klik om te vergroten...
Dat bedoelde ik eigenlijk: dat maakt eigenlijk toch niet uit of je nu één url of twee of drie, vier, vijf urls hebt?

Zero Grav zei:
Om het te implementeren hebt ge met beide methodes evenveel werk, dus waarom niet kiezen voor de methode die meer voordelen dan nadelen oplevert, ook al is het voor een kleine site?
Klik om te vergroten...
Omdat ik mijn methode begrijp en zelf ineen heb zitten prutsen (uiteraard met losstaande voorbeelden, vooral dingen samengevoegd) terwijl ik niets kan van AJAX. Dus, ik verkies deze methode omdat het mij minder tijd kost om te implementeren en het toch hetzelfde effect heeft (kleine sites, again). Andere mensen die geen van de voorgestelde methodes kennen, zullen dan beter uw manier gebruiken.

Ik wil niet zeggen dat ge geen gelijk hebt hoor, gewoon een gezonde discussie. Maar ik zal me eens verdiepen in jQuery.ajax :) EDIT: ik begrijp niet hoe uw methode kan werken zonder JS?
Z

Zero Grav

Legacy Member
Mijn methode werkt zonder JS omdat het menu effectief linkt naar bestaande pagina's.

Ge hebt index.htm en pageTwo.htm, de href van de anchors in mijn navigatie zijn daar effectief naar gelinkt, dus als ge klikt gaat ge naar die pagina. Als ge er op klikt met javascript vangt em dat op, kijkt em naar de href en omdat ik weet dat het de #content div is die ik moet hebben laad ik die in en vervang ik dat.

In JQuery komt AJAX trouwens op niet veel meer neer dan een drie of vier functies die eigenlijk gewoon aliassen zijn voor één of twee functies.

En dat van de URL maakt op zich wel uit omdat zoekmachines beter kunnen linken naar uw content (en de link kan ook gecrawled worden), ge kunt zelf beter linken naar uw content en de URL van een pagina zelf heeft ook een bepaalde waarde die meetelt. Elke pagina heeft zogezegd zowat zijn eigen doel voor een zoekmachine.
-

-BVR-

Legacy Member
Vreemd allemaal. Ik vind het toch nog altijd super dat mensen dat allemaal kunnen uitvinden hé. Vreemd. :)

Maar bedankt, ik zal er ooit eens naar kijken ;)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan