Hoe werkt deze website?

[Saturnus]

Er is een website waarvan ik niet snap hoe die werkt. Het echte probleem is dat ik niet weet waar ik moet beginnen om er achter te komen. Ik ben bekend met HTML en CSS, maar niet met Javascript waar het hier waarschijnlijk om gaat.

De website stelt een aantal vragen en geeft dan een lijst van resultaten uit een catalogus terug. De catalogus bevat een aantal specificaties zoals type, afmetingen en prijs die bij elk artikel terugkomen. Elk van de resultaten is aan te klikken, maar de url verandert niet. Alles wordt 'intern geladen' noem ik het maar even. Je verwacht hier een database maar nee want in het netwerkverkeer in Firefox Developer Tools zie ik dat op de achtergrond wel degelijk een artikelpagina wordt geladen (bijv. site.nl/145) maar dat is slechts een tekst output met de specificaties. Blijkbaar wordt die kale tekst door de startpagina opgehaald en dan in een mooi CSS ontworpen resultaat scherm 'gerenderd'. Je verwacht hier een database maar dat is dus niet zo.

Wat ik niet snap is hoe, het systeem weet welk artikel ik aanklik en daarna de juiste specificaties in zijn sjabloon invult. Ik zie nergens in het resultatenscherm dat mijn aanklikken van een artikel de klik naar een artikelpagina een nummer meestuurt of zo. Ik heb geprobeerd Firefox in een debug mode te krijgen die precies vertelt wat er gebeurt, en iets met 'breakpoints' maar krijg geen grip op de zaak en weet ook niet of dit de juiste richting is.

Met excuses, ik kan de link naar de website hier helaas niet plaatsen. Ik snap dat er geen kant en klaar antwoord uit komt, maar een duw in de juiste richting van het debuggen zou mooi zijn.

[Stroopwafels]

Veel websites gebruiken tegenwoordig een SPA (Single Page Application). Dit kan in diverse JavaScript frameworks gedaan worden zoals React, Vue.JS en Angular.

De requests naar de server is vaak met behulp van een payload, zoals POST of GET data.
Hoe het precies werkt kunnen wij niet zeggen zonder een URL van de website, er zijn honderden diverse mogelijkheden.

[ Voor 19% gewijzigd door Stroopwafels op 09-02-2018 03:36 ]

[botwood]

Ik ben het eens met Stroopwafels. Zonder url krijg je alleen maar speculaties wat het eventueel kan zijn. Maar aangezien frameworks als Angular etc, tegenwoordig razend populair zijn, kun je er stiekem wel van uit gaan dat de desbetreffende website daar ook gebruik van maakt o.i.d.

Is er een bepaalde reden waarom je de url niet kan of mag plaatsen?

[ Voor 11% gewijzigd door botwood op 09-02-2018 09:09 ]

[Mebus]

Als de broncode van de website (index) erg kort is en op elke pagina (bijna) hetzelfde is dan is de kans groot dat het een SPA is.

Met Chrome of Firefox kan je wel de complete opmaak zien van de website (f12?).

[Iva Wonderbush]

Kijk naar de network requests zodra je een pagina laad, weet je het meteen.

[mcDavid]

De techniek heet AJAX. Maar er zijn inderdaad oneindige mogelijkheden om dat te implementeren of toe te passen.

[DaHell66]

Klinkt als een post en MVC o.i.d.

[RobIII]

DaHell66 schreef op vrijdag 9 februari 2018 @ 12:44:
Klinkt als een post en MVC o.i.d.

...en dat klinkt dan weer als klok-klepel

[Saturnus]

Bedankt voor de antwoorden.

Ik heb wat extra informatie gevonden. Bij het aanklikken van een artikel staat er 'Status 200, Method GET, JS fetch' in de lijst van netwerkverkeer. Door Firefox wordt dit als 'XHR' gecategoriseerd. Klik ik die aan dan verschijnen o.a. de tabbladen 'Headers, Cookies, Params en Response.' In de eerste 3 is niets bruikbaars te vinden. In 'Response' staan onder het kopje JSON alle specificaties van het opgevraagde artikel. Maar weer nergens iets te vinden als 'hey geef mij site.nl/145' (vb.). Dus wat dat betreft snap ik nog steeds niet hoe die site weet dat ik '145' aanklik.

Stel nou voor dat ik zeg dat ik artikel 145 gerenderd wil zien in die 'SPA' zonder door de stappen heen te gaan. Kan dat door de website aan te sturen via console?

Begrijpelijk dat er geen concreet antwoord op deze abstracte informatie te geven is, maar zelf leren debuggen is toch spannender en leerzamer.

[Hahn]

Waarom kan je de website niet delen?

[McKaamos]

Saturnus schreef op zaterdag 10 februari 2018 @ 16:55:
Bedankt voor de antwoorden.

Ik heb wat extra informatie gevonden. Bij het aanklikken van een artikel staat er 'Status 200, Method GET, JS fetch' in de lijst van netwerkverkeer. Door Firefox wordt dit als 'XHR' gecategoriseerd. Klik ik die aan dan verschijnen o.a. de tabbladen 'Headers, Cookies, Params en Response.' In de eerste 3 is niets bruikbaars te vinden. In 'Response' staan onder het kopje JSON alle specificaties van het opgevraagde artikel. Maar weer nergens iets te vinden als 'hey geef mij site.nl/145' (vb.). Dus wat dat betreft snap ik nog steeds niet hoe die site weet dat ik '145' aanklik.

Stel nou voor dat ik zeg dat ik artikel 145 gerenderd wil zien in die 'SPA' zonder door de stappen heen te gaan. Kan dat door de website aan te sturen via console?

Begrijpelijk dat er geen concreet antwoord op deze abstracte informatie te geven is, maar zelf leren debuggen is toch spannender en leerzamer.

Je moet de requestbody bekijken van die XHR request.
XHR staat trouwens voor XML HTTP Request.
In essentie stuurt de pagina een vraag naar een API van de webserver en krijgt daar op informatie terug. Vaak gaat dat met JSON of SOAP berichten.
De pagina zelf (die dus grotendeels javascript is in whatever framwork) decodeert dat en rendert er een pagina van.

[Ramon]

Lees dit eens door: https://developer.mozilla...uide/AJAX/Getting_Started en de moderne variant: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Ben toch vooral benieuwd vanwaar deze interesse ... ik bedoel, je hebt je nooit afgevraagd hoe GoT weet dat er een nieuwe reactie op een topic is zonder de pagina te herladen?

[ Voor 74% gewijzigd door Ramon op 10-02-2018 17:03 ]

[m-vw]

Hahn schreef op zaterdag 10 februari 2018 @ 16:57:
Waarom kan je de website niet delen?

Dit. Kan je gewoon gerichte antwoorden krijgen.

[b2vjfvj75gjx7]

AJAX icm. history.pushSate (I presume)

https://css-tricks.com/using-the-html5-history-api/