een mySQL en PHP pagina verwerken met AJAX

[Verwijderd]

Allereerst moet ik zegen dat ik echt een nieuweling ben wat betreft AJAX-scripts.
Ik heb een website gemaakt die draait op PHP. Eigenlijk was ie bijna af echter liep ik tegen een probleem aan.

Iedere keer als ik op een link klikt herlaad de gehele pagina. Omdat de opdrachtgever graag muziek op de site wil hebben (ik vind het niks maar ja klant is koning) en ik een mooie flashbanner wil embedde is het niet bepaald handig dat ie keer op keer herlaad.

Nu heb ik heel veel gevonden over ajax. Want dit laad dan dynamisch een div. Ben er ook al een tijdje mee aan het spelen. Echter kom ik een ding niet tegen. Dat is het volgende:

Ik gebruik voor mijn menu

while ($hoofdmenu = $connector->fetchArray($result)){
echo '<span class="menuitem">';
echo '<a href="index2.php?id='.$hoofdmenu['ID'].'&sub='.$hoofdmenu['ID'].'">';
echo $hoofdmenu['title'];
echo '</a>';
echo '</span>';

Hij laad dus, zoals ook vaak voorkomt de info aan de hand van een ?id=
Hier ligt natuurlijk mijn probleem, want ik heb absoluut geen flauw idee hoe ik ajax een div kan laten vullen met database inhoud zonder het gebruik van een dropdown menu, want daar zijn tal van voorbeelden van.

Nogmaals ik ben een newbie. Ajax lijkt echt heel mooi en probeer het echt te leren, kom alleen nu ff niet verder

Wie weet een goeie tut of voorbeeld hoe ik dit kan maken?

[marqram]

Als jij je pagina dmv AJAX wil verversen, zul je je links in je menu/navigatie dus moeten vervangen door AJAX-links/aanroepen van de AJAX functie.

HTML:

<a href="index2.php?id='.$hoofdmenu['ID'].'&sub='.$hoofdmenu['ID'].'">';
echo $hoofdmenu['title'];
echo '</a>

Nu ga

HTML:

<a href=""></a>

vervangen door

HTML:

<a onclick="jouw_ajax_functie(parameters)"></a>

Wanneer er nu op de link geklikt wordt, wordt je javascript functie 'jouw_ajax_functie()' aangeroepen. Hierin voor je je ajax-call uit naar het php bestand waaruit de nieuwe inhoud van je pagina/div moet komen. Alle output van dit php-bestand geeft je ajax-call terug, en plaats je met javascript op je pagina.

Maar volgens mij heb je het concept AJAX nog niet helemaal begrepen, en moet je de tutorials nog maar eens doorlezen.

Deze is vrij redelijk volgens mij.

[ Voor 5% gewijzigd door marqram op 13-01-2010 17:38 ]

[Cartman!]

Even kort door de bocht: klant is zeker niet geheel koning, die weet namelijk meestal niet hoe internet werkt dus dan druk jij erdoor dat standaard afspelende muziek op een website anno 2010 gewoon nergens op slaat (uitzonderingen daargelaten). Probeer er nog onderuit te komen zou ik zeggen en anders... vergeet voor deze domme aanpassing niet dik te factureren.

Als je toch dit gaat doorvoeren, toets gewoon je keyword 'ajax' en 'tutorial' eens in bij Google en dan zul je daar echt wel uitkomen.

[GlowMouse]

En anders frames gebruiken; het muziekje stop je in een frame die nooit herladen wordt. Bookmarks kon je met ajax toch al vergeten.

[HuHu]

Maak gewoon een old-skool pop-under window waar de muziek in speelt. Het is een extern frame, dus het zit niet in de weg bij reloads of bookmarks. Het "popt" "under", dus je ziet het ook niet in de weg staan.

Het is lelijk. Het is ranzig. Maar het werkt.

[_eXistenZ_]

Zoals ik dit altijd doe is een losse ajax.php, die een json-string terug stuurt naar de browser. JSON is namelijk native voor Javascript dus hoeft niet nog op de client omgezet te worden naar iets anders maar kan gelijk gebruikt worden. In PHP zit sinds ik dacht 5.0 een mooie functie json_encode, die razendsnel een json-string van een variabele kan maken.

Je vraagt dan vanuit je browser met een ajax call bijvoorbeeld ajax.php?pageid=2 op, dat komt binnen bij je webserver waar je gewoon data verzamelen en in een array stoppen doet, vervolgens doe je die(json_encode($variabele); en klaar is Kees

Die variabele kan vanalles zijn, strings, ints, arrays, enzovoort. Het is maar net wat je nodig hebt (Jij zo te zien een heel stuk HTML dat op een bepaalde plek geplakt moet)

Zelf werk ik altijd met de Mootools Javascript library omdat die al een mooie JSON handler aan boord heeft die precies kan wat ik wil, ik raad jou ook aan om een lib zoals Mootools te gebruiken in plaats van het wiel zelf opnieuw uit te vinden

[ Voor 13% gewijzigd door _eXistenZ_ op 13-01-2010 22:51 ]

[pieturp]

Het liefst doe je dit middels een backend die pagina's zowel middels plain-old-html (PHP gegenereerd) alswel in gestripte vorm (dus zonder header, footer, etc) via een ajax methode bereikbaar maakt. Als je dit netjes wilt doen kun je achter elke link URL middels javascript een extra parameter (b.v. "?ajax=1") plakken. Op de server vis je die er dan uit. Zo kun je op de achtergrond gewoon hetzelfde swfje de muziek laten spelen, terwijl je de echte content area vervangt met de specifiek voor die link gewijzigde content.
Maar ik denk dat 't voor jou 't makkelijkst is om gewoon een hidden frame te gebruiken. Da's wel ouderwets, maar 't werkt wel

Edit:
Ik zou dat eigenlijk niet zo snel doen met JSON. Je kunt gewoon een stuk html tekst terugpassen en dat gewoon met innerHTML op z'n plek zetten. Pas op 't moment dat je ook functies etc. wilt kunnen gebruiken wordt dat IMHO pas interessant. Tenzij je natuurlijk juist specifieke en verschillende content area's hebt. Maar ik heb niet de indruk dat de TS dat heeft. Kan dat natuurlijk ook helemaal mis hebben

[ Voor 24% gewijzigd door pieturp op 13-01-2010 23:11 . Reden: Stukje over JSON ]

[Verwijderd]

Maak gewoon een old-skool pop-under window waar de muziek in speelt. Het is een extern frame, dus het zit niet in de weg bij reloads of bookmarks. Het "popt" "under", dus je ziet het ook niet in de weg staan.

Het is lelijk. Het is ranzig. Maar het werkt.

Eensch, dat voorkomt dat er andere klanten komen die dit ook willen... pffff

Tevens is deze oplossing ook beter dan frames gebruiken, volgens mij eet google die niet graag..

[CH4OS]

marqram schreef op woensdag 13 januari 2010 @ 17:36:
Nu ga

HTML:

<a href=""></a>

vervangen door

HTML:

<a onclick="jouw_ajax_functie(parameters)"></a>

En dan nu voor mensen die JS uit hebben staan of browsers gebruiken die geen (of nauwelijks) JS danwel AJAX ondersteunen. Ik heb JS gedeeltelijk uit staan, als in: ik gebruik de NoScript add-on voor FF, vaak sta ik het dan wel toe, maar alleen als ik enigszins het gevoel heb dat de JS dan te vertrouwen is.

Oftewel, geen mooie oplossing, want nu sluit je die gebruikers buiten. Beter is dan om de href gewoon te gebruiken met een onclick er aan.

Ajax in een website, het is leuk, mooi en het is _ zo_ web 2.0, maar feitelijk moet je dat eigenlijk niet willen gebruiken om je hoofdcontent er mee weer te geven naar je bezoekers. Voor inlogvensters is het leuk en handig, maar de content waar het uiteindelijk om draait (die je wilt weergeven) zou ik gewoon publiekelijk beschikbaar houden, zonder mensen (per se) uit te moeten sluiten omdat ze JS uit hebben staan of omdat de browser het domweg niet ondersteund of een brakke ondersteuning er voor heeft. Omdat veel sites het gebruiken, wil nog niet zeggen dat iedereen het dan maar moet gebruiken. JS / AJAX zou ik dan ook niet voor dergelijke dingen gaan of willen gebruiken, voor extra features is het handig, zoals ik al eerder noemde, voor bijvoorbeeld loginvensters.

GlowMouse schreef op woensdag 13 januari 2010 @ 21:32:
En anders frames gebruiken; het muziekje stop je in een frame die nooit herladen wordt. Bookmarks kon je met ajax toch al vergeten.

Frames, anno 2010, kom op zeg. Het renderd ten eerste al trager dan een normaal opgebouwde (en opgemaakte) pagina. En daarbij is het een oude techniek. True, het werkt, maar er zijn tegenwoordig wel betere / snellere oplossingen te bedenken.

En wat is er erg aan als de muziek zou stoppen? Grote sites als youtube en hyves doen dat toch ook?

Mocht de TS alsnog besluiten het wél te willen doen, vraag er idd dan een meerprijs voor, en gebruik een van de grotere AJAX frameworks. Eventueel via googleapis.com, zodat je ook een stuk bandbreedte bespaard en de pagina ietwat sneller laadt (kost wel weer een extra HTTP-request).

[ Voor 20% gewijzigd door CH4OS op 14-01-2010 00:23 ]