[AJAX/PHP] Lijst met items d.m.v. Ajax

[radem205]

Hey,

Nog niet zo lang geleden ben ik begonnen met het onder de knie krijgen van Ajax. Nu lukt het mij redelijk om te gaan met Ajax (de basis), maar nu wil ik graag een lijst maken met 4 items per "pagina" en die door middel van een navigatie kunnen doorlopen.
Ik heb zeker als doel alles zelf uit te zoeken, maar omdat het voor mij nog allemaal nieuw is zou ik graag wat tips willen hebben om dit zo goed mogelijk aan te pakken, zodat ik weet in welke richting ik moet zoeken.

Ik hoop dat het duidelijk is wat ik graag wil, anders hoor ik het graag.

[ Voor 9% gewijzigd door radem205 op 17-08-2008 22:07 ]

[RobIII]

radem205 schreef op zondag 17 augustus 2008 @ 22:06:
Ik hoop dat het duidelijk is wat ik graag wil

Nee, niet echt. Wat heb je so far? Wat lukt er niet? Wat lukt er wel? Relevante code?

radem205 schreef op zondag 17 augustus 2008 @ 22:06:
maar nu wil ik graag een lijst maken met 4 items per "pagina" en die door middel van een navigatie kunnen doorlopen.

Dus... Een volgende/vorige knopje maken, een paginanummer meegeven in de request en per result 4 items (of 'pagesize') teruggeven. Niet echt rocket science lijkt me.

[ Voor 45% gewijzigd door RobIII op 17-08-2008 22:10 ]

[Bram77]

And the magic word is "Prototype"!

[RobIII]

Bram77 schreef op zondag 17 augustus 2008 @ 22:11:
And the magic word is "Prototype"!

Want Dat slaat als een tang op een varken Ik zie in de verste verte niet wat een framework (waarvoor overigens 10 andere alternatieven, dus waarom dan die?) van doen heeft met het probleem van TS, behalve dat het 'ook AJAX kan'. Dan heb je 1 buzzword in common, maar dat rechtvaardigt je reply in de verste verte niet zonder verdere onderbouwing. Misschien interessant om te weten dat AJAX ook prima zelf te implementeren is en écht geen rocket science is en dat een compleet framework daarvoor inzetten misschien wel dikke vette overkill is.

[ Voor 69% gewijzigd door RobIII op 17-08-2008 22:18 ]

[radem205]

RobIII schreef op zondag 17 augustus 2008 @ 22:08:
[...]

Nee, niet echt. Wat heb je so far? Wat lukt er niet? Wat lukt er wel? Relevante code?

[...]

Dus... Een volgende/vorige knopje maken, een paginanummer meegeven in de request en per result 4 items (of 'pagesize') teruggeven. Niet echt rocket science lijkt me.

Laat ik even voorop stellen dat mijn intensie niet is om codes of iets dergelijks voorgekauwd te krijgen!
Ik zou alleen wat tips willen krijgen om zoiets op te zetten en wat een makkelijke / goede manier is om dit in combinatie met PHP uitgevoerd te krijgen.

Ik heb het nu nog simpel gedaan door in php de aantal pagina's te laten berekenen en die door te sturen naar AJAX. Dit heb ik met een echo in php gedaan. Het probleem is hier dat een cijfer in php in Ajax niet wordt gezien als een cijfer (tenminste, dat is mijn ervaring).

Code:

PHP:

<? echo '4'; // aantal pagina's ?>

Zeer omslachtig waarschijnlijk:

code:

var numberList = 0;
    var listItem = 0;
    var totalNum;
    
    function totalNumber() {
        var xmlhttp = makeXmlHttp();
        xmlhttp.open("GET", "test.php?total=1", true);
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4){
                totalNum = xmlhttp.responseText;
                alert(totalNum);
                showList(1,2);
                createNav();
            } else {
                document.getElementById("itemsholder").innerHTML = "Bezig met laden...";
            }
        }
        xmlhttp.send('');
    }
    
    function createNav() {
        var navItems = '<a href="javascript:showList(0,1);" id="previousBtn"><</a>';
        for (i=1; i<totalNum; i++) {
        navItems += ' - <a href="javascript:showList('+i+',2);">'+i+'</a>';
        }
        navItems += ' <a href="javascript:showList(0,3);" id="nextBtn">></a>';
        document.getElementById("navHolder").innerHTML = navItems;

        alert(navItems);
    }
   
    function showList(id,number){
        if(number == "2") {
            numberList = id;
        } else if(number == "1") {
            numberList--;
        } else {
            numberList++;
        }
        listItem = numberList;
        var xmlhttp = makeXmlHttp();
        xmlhttp.open("GET", "test.php?list="+listItem, true);
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4){
                document.getElementById("itemsHolder").innerHTML = xmlhttp.responseText;
            } else {
                document.getElementById("itemsHolder").innerHTML = "Bezig met laden...";
            }
        }
        xmlhttp.send('');
    }
    addEvent(window, 'load', totalNumber);

(het is zoals ik al zei zeer omslachtig, maar ik ben dus ook niet heel lang bezig met AJAX)

[ Voor 14% gewijzigd door radem205 op 17-08-2008 22:20 ]

[Noork]

Kun je de code even tussen de 'code' tags plaatsen, dan leest het makkelijker.

Maar verder snap ik je probleem niet zo. Je kan in PHP heel makkelijk een pager aan je resultset pagina toevoegen. En koppel ipv een normale link, gewoonweg een javascript code eraan vast (getPage(1) o.i.d.). Wat is precies het probleem?

[ Voor 4% gewijzigd door Noork op 17-08-2008 22:21 ]

[RobIII]

radem205 schreef op zondag 17 augustus 2008 @ 22:16:
[...]
Ik zou alleen wat tips willen krijgen om zoiets op te zetten en wat een makkelijke / goede manier is om dit in combinatie met PHP uitgevoerd te krijgen.

In welke richting denk je dan aan Ik zie het hele probleem niet? Wat lukt er dan niet?

radem205 schreef op zondag 17 augustus 2008 @ 22:16:
Ik heb het nu nog simpel gedaan door in php de aantal pagina's te laten berekenen en die door te sturen naar AJAX.

Niet 'naar AJAX' maar hooguit 'met behulp van AJAX'.

radem205 schreef op zondag 17 augustus 2008 @ 22:16:
Dit heb ik met een echo in php gedaan, waardoor een cijfer in php in Ajax niet wordt gezien als een cijfer (tenminste, dat is mijn ervaring).

Euh.. iets met klok en klepel vrees ik. De X in AJAX staat in voor XML en dat is in den beginne altijd een gewone platte tekst; je zult die XML moeten interpreteren en moeten terugparsen naar een int. Als je enkel die waarde 4 uitpoept als response, dan vraag ik me af hoeveel requests je doet om je resultset op te bouwen op de client. En omdat enkel de waarde 4 ook geen valide XML is is het niet eens AJAX te noemen. Je gaat dan zelf het resultaat (non-XML) zitten uitvogelen aan de clientside.

radem205 schreef op zondag 17 augustus 2008 @ 22:16:
Zeer omslachtig waarschijnlijk:

code:

(het is zoals ik al zei zeer omslachtig, maar ik ben dus ook niet heel lang bezig met AJAX)

Mja, ik heb totaaaaal geen zin om dit uit te gaan zitten puzzelen of nalezen als je niet eens bij je code zet wat het moet doen, wat er niet werkt (zoals verwacht), etc. etc. en waabrij de code zelf ook niet voorzien is van commentaar.

[ Voor 3% gewijzigd door RobIII op 17-08-2008 22:25 ]

[Juup]

Hey RobIII, rustig aan jongen, dadelijk krijg je een beroerte.
Je hebt gelijk, de topicstart was om te huilen maar nu gaat het topic langzaam de goeie kant op.

[crisp]

RobIII schreef op zondag 17 augustus 2008 @ 22:22:
[...]

Euh.. iets met klok en klepel vrees ik. De X in AJAX staat in voor XML en dat is in den beginne altijd een gewone platte tekst; je zult die XML moeten interpreteren en moeten terugparsen naar een int. Als je enkel die waarde 4 uitpoept als response, dan vraag ik me af hoeveel requests je doet om je resultset op te bouwen op de client. En omdat enkel de waarde 4 ook geen valide XML is is het niet eens AJAX te noemen. Je gaat dan zelf het resultaat (non-XML) zitten uitvogelen aan de clientside.

Mwa, de X staat daar meer omdat het hip is/was enzo, en het zou net zo goed kunnen staan voor XMLHttpRequest (waar de XML ook weer ondergeschikt is aan HttpRequest) Ajax staat in de brede zin van het woord meer voor de algemene technieken waarbij je vanuit javascript met de server babbelt en waarbij dus geen page-refresh nodig is.

XML is een dataformaat dat je kan gebruiken, maar er zijn ook andere alternatieven zoals JSON of elke andere vorm van serialisatie die je maar kan bedenken. JSON heeft weer als voordeel dat type-informatie behouden blijft, iets dat je met XML niet hebt, en dat het veel makkelijker clientside te verwerken is.

[Noork]

crisp schreef op zondag 17 augustus 2008 @ 22:42:
[...]
Mwa, de X staat daar meer omdat het hip is/was enzo, ...blabla

Gaan we dit topic nu weer misbruiken om de definitie van AJAX te herdefinieren?

[crisp]

Noork schreef op zondag 17 augustus 2008 @ 22:52:
[...]

Gaan we dit topic nu weer misbruiken om de definitie van AJAX te herdefinieren?

Nee, waarom zou ik? RobIII gaf aan dat 'echt' Ajax XML zou impliceren. In de oorspronkelijke betekenis van Ajax was dat misschien ook het geval*, maar Ajax wordt ondertussen meer gebruikt als een verzamelnaam voor ook alle afgeleide technieken. Die kan je wel allemaal een eigen naampje gaan geven zoals SJAH of AJAJ, maar dat is redelijk zinloos vind je niet?

Het ging mij voornamelijk om de pointer naar alternatieve dataformaten zoals JSON, hetgeen denk ik relevant is voor de discussie en de topicstarter weer een extra zoekterm geeft

* Jesse James Garrett's artikel noemt zowel XML als XMLHttpRequest** als verklaring voor de 'X', en beschrijft in de Q/A verder ook dat XML een formaat is dat je kan gebruiken in een Ajax-applicatie, maar niet noodzakelijkerwijs het enige formaat. Hij verwijst daarbij o.a. ook naar JSON als een alternatief. Ook Wikipedia zegt dat "despite the name, the use of JavaScript, XML, or asynchrony is not required".
Dus je kan daar verder wel puristisch over doen maar dat heeft weinig zin als de rest van de wereld het er eigenlijk wel over eens is dat Ajax als term niet letterlijk genomen hoeft te worden...
** Alex Hopmann schrijft over de herkomst van XML in XMLHttpRequest: "[...] I got in touch with Jean Paoli who was running that team at the time and we pretty quickly struck a deal to ship the thing as part of the MSXML library. Which is the real explanation of where the name XMLHTTP comes from- the thing is mostly about HTTP and doesn't have any specific tie to XML other than that was the easiest excuse for shipping it so I needed to cram XML into the name (plus- XML was the hot technology at the time and it seemed like some good marketing for the component)."

[ Voor 51% gewijzigd door crisp op 17-08-2008 23:32 ]

[RobIII]

crisp schreef op zondag 17 augustus 2008 @ 23:02:
[...]

Nee, waarom zou ik? RobIII gaf aan dat 'echt' Ajax XML zou impliceren. In de oorspronkelijke betekenis van Ajax was dat misschien ook het geval*, maar Ajax wordt ondertussen meer gebruikt als een verzamelnaam voor ook alle afgeleide technieken. Die kan je wel allemaal een eigen naampje gaan geven zoals SJAH of AJAJ, maar dat is redelijk zinloos vind je niet?

Het ging mij voornamelijk om de pointer naar alternatieve dataformaten zoals JSON, hetgeen denk ik relevant is voor de discussie en de topicstarter weer een extra zoekterm geeft

En right you are; ik was onvolledig en er zijn inderdaad meer dataformaten (JSON, CSV anyone? ) dan XML inderdaad. Ik denk echter dat "4" er geen is En dat kwam een beetje door de zinsnede "dat een cijfer in php in Ajax niet wordt gezien als een cijfer". En als enkel de waarde 4 wordt uitgepoept vraag ik me dus, terecht lijkt me, af of er dan nog een tweede request achter aan gaat voor de daadwerkelijke items, wat me geen verstandige design decision lijkt. En, warempel, na nadere bestudering van het stuk code blijken er 2 requests gestuurd te worden. Ik zeg niet dat het verboden is, maar handig is anders lijkt me...

[ Voor 20% gewijzigd door RobIII op 17-08-2008 23:42 ]

[radem205]

RobIII schreef op zondag 17 augustus 2008 @ 23:32:
[...]

En right you are; ik was onvolledig en er zijn inderdaad meer dataformaten (JSON, CSV anyone? ) dan XML inderdaad. Ik denk echter dat "4" er geen is En dat kwam een beetje door de zinsnede "dat een cijfer in php in Ajax niet wordt gezien als een cijfer". En als enkel de waarde 4 wordt uitgepoept vraag ik me dus, terecht lijkt me, af of er dan nog een tweede request achter aan gaat voor de daadwerkelijke items, wat me geen verstandige design decision lijkt. En, warempel, na nadere bestudering van het stuk code blijken er 2 requests gestuurd te worden. Ik zeg niet dat het verboden is, maar handig is anders lijkt me...

De reden dat ik 2 requests gebruik is omdat ik nog nog niet weet hoe ik data, die vanuit php naar ajax wordt gezonden, gescheiden kan weergeven (zoals navigatie en items). Ik gebruik nu echo in php, maar hoe kan ik zorgen dat data gescheiden binnenkomt in ajax zodat ik d data apart kan aanroepen?

[Noork]

radem205 schreef op maandag 18 augustus 2008 @ 00:16:
[...]

De reden dat ik 2 requests gebruik is omdat ik nog nog niet weet hoe ik data, die vanuit php naar ajax wordt gezonden, gescheiden kan weergeven (zoals navigatie en items). Ik gebruik nu echo in php, maar hoe kan ik zorgen dat data gescheiden binnenkomt in ajax zodat ik d data apart kan aanroepen?

Wat dacht je van arrays? Zoiets kan gewoon in JSON

[radem205]

Noork schreef op maandag 18 augustus 2008 @ 00:18:
[...]

Wat dacht je van arrays? Zoiets kan gewoon in JSON

Ok, bedankt. Dan ga ik mij daar in verdiepen.

[Verwijderd]

Wil je alles nu perfect doen, ondanks het feit dat je volgens mij nog niet zo thuis bent in de technieken die je gebruikt?

Ik zou zeggen, ga lekker freestylen, ondersteunt xml geen arrays, laat een string returnen met waardes gescheiden door een |, maak daar in PHP weer een array van, etc.

Efficient? Nee. Maar je leert wel een taal kennen en je zal geleidelijk meer gevoel voor efficiency en performance krijgen. Zo werkt het bij mij in ieder geval.

[Juup]

Verwijderd schreef op maandag 18 augustus 2008 @ 11:09:
Ik zou zeggen, ga lekker freestylen, ondersteunt xml geen arrays, laat een string returnen met waardes gescheiden door een |, maak daar in PHP weer een array van, etc.

Gadver spuug bah. Pesoonlijk zie ik liever een <list/> met daarin <item/>s ofzo.

[Noork]

Juup schreef op maandag 18 augustus 2008 @ 11:22:
[...]
Gadver spuug bah. Pesoonlijk zie ik liever een <list/> met daarin <item/>s ofzo.

Idd, ik zie het probleem ook niet zo. Het is toch niet heel gek om direct de html uit te poepen? Zonder tussenkomst van json/xml etc.

[radem205]

Noork schreef op maandag 18 augustus 2008 @ 11:45:
[...]

Idd, ik zie het probleem ook niet zo. Het is toch niet heel gek om direct de html uit te poepen? Zonder tussenkomst van json/xml etc.

Bedoel je met "direct de html uit te poepen" dat het voor mij het gemakkelijkste is om in php de html in z'n geheel klaar te maken en dan deze door middel van Ajax weer te geven?

[Noork]

radem205 schreef op maandag 18 augustus 2008 @ 11:48:
[...]

Bedoel je met "direct de html uit te poepen" dat het voor mij het gemakkelijkste is om in php de html in z'n geheel klaar te maken en dan deze door middel van Ajax weer te geven?

Ja.

[vorlox]

Noork schreef op maandag 18 augustus 2008 @ 11:50:
[...]

Ja.

strompel, huil , snik

nee, uh ja maar neeeee
zoek een simpel voorbeeld en leer daarvan....

Het grootste voordeel van AJAX is juist dat je gewoon data kan doorsturen en dat dat dus performance winst is als je de browser de HTML erom laat tekenen.

Ga dan geen volledige HTML sturen dan kun je net zo goed je pagina herladen..

Daarnaast is xml is volgens mij overkil
Als je cijfer 4 wilt sturen in xml krijg je snel zoiets als

code:

<xmlroot>
<cijfer>4</cijfer>
</xmlroot>

of alleen

code:

4

en in je JS code een parseInt en je bent klaar.....XML is ongeveer 20x zo groot

[Noork]

vorlox schreef op maandag 18 augustus 2008 @ 12:24:
[...]
strompel, huil , snik

nee, uh ja maar neeeee
zoek een simpel voorbeeld en leer daarvan....

Het grootste voordeel van AJAX is juist dat je gewoon data kan doorsturen en dat dat dus performance winst is als je de browser de HTML erom laat tekenen.

Ga dan geen volledige HTML sturen dan kun je net zo goed je pagina herladen..

Daarnaast is xml is volgens mij overkil
....

Je hoeft niet direct te gaan huilen, het is gewoon een prima oplossing.

het is dan misschien iets groter maar het hele header en footer gedeelte hoef je niet te versturen, en de pagina hoeft nog steeds niet opnieuw worden opgebouwd. De TS heeft het daarnaast over slechts 4 items. Hoe groot kan de html dan wel niet zijn? Je hoeft verder geen ingewikkelde javascript-functies te bouwen, en javascript kost ook nog eens tijd om te worden uitgevoerd; dat probleem heb je niet bij plain html.

[Verwijderd]

Juup schreef op maandag 18 augustus 2008 @ 11:22:
[...]

Gadver spuug bah. Pesoonlijk zie ik liever een <list/> met daarin <item/>s ofzo.

Whatever, ik zeg niet dat ik het zelf zou doen, maar het gaat er volgens mij omdat je gewoon moet gaan ontwikkelen en er vanzelf achterkomt als je omslachtig bezig bent.