AJAX show database zonder actie van gebruiker

[Storm90]

Hallo,

Ik ben bezig met een nieuw helpdesk systeem, deze moet worden uitgerust met AJAX (helaas!). Ajax is echt super als je het kent! Helaas ben ik een echte AJAX newbie en ik wil nu een pagina maken die alle gegevens uit een tabel weergeeft mbv Ajax.

Waarom Ajax? De IT mensen willen het als een desktop programma kunnen draaien, dus op één scherm het programma en op het andere scherm gewoon hun eigen ding. Zodra iemand iets toevoegt aan het helpdesk systeem (nieuwe vraag/incident), moet het zonder te refreshen worden weergegeven! Iemand een idee hoe ik dit doe met Ajax icm PHP?

Ik heb al op internet gezocht maar ik krijg alleen tutorials over hoe Ajax te gebruiken met een GET functie, dit lukt me al (heb het voor elkaar gekregen een zoekmachine werkend te krijgen met Ajax). Maar nu moet er dus zonder dat een request wordt gedaan, automatisch nieuwe gegevens worden weergegeven. Iemand met goede links/tips?

Naar mijn mening zou dit eenvoudiger moeten zijn, maar dus niet voor mij.

[DennusB]

Storm90 schreef op dinsdag 31 maart 2009 @ 16:59:
Hallo,

Ik ben bezig met een nieuw helpdesk systeem, deze moet worden uitgerust met AJAX (helaas!). Ajax is echt super als je het kent! Helaas ben ik een echte AJAX newbie en ik wil nu een pagina maken die alle gegevens uit een tabel weergeeft mbv Ajax.

Waarom Ajax? De IT mensen willen het als een desktop programma kunnen draaien, dus op één scherm het programma en op het andere scherm gewoon hun eigen ding. Zodra iemand iets toevoegt aan het helpdesk systeem (nieuwe vraag/incident), moet het zonder te refreshen worden weergegeven! Iemand een idee hoe ik dit doe met Ajax icm PHP?

Ik heb al op internet gezocht maar ik krijg alleen tutorials over hoe Ajax te gebruiken met een GET functie, dit lukt me al (heb het voor elkaar gekregen een zoekmachine werkend te krijgen met Ajax). Maar nu moet er dus zonder dat een request wordt gedaan, automatisch nieuwe gegevens worden weergegeven. Iemand met goede links/tips?

Naar mijn mening zou dit eenvoudiger moeten zijn, maar dus niet voor mij.

Hoe ik het deed, maak een timer in javascript, en roep daarin elke keer de ajax functie aan die de gegevens opvraagt en laat zien.
Erg makkelijk en zo gemaakt

[Guillome]

Ja kom op hey, dit is echt RTFM. Lees een tutorial over ajax, welke dan ook, de meest basic, en je snapt precies hoe het werkt. Het is makkelijker dan het lijkt. Dit is niet echt een vraag voor hier.

[ThunderNet]

Als je 'klanten' een desktop programma willen, waarom maak je dan geen desktop-applicatie?

[Storm90]

Ja kom op hey, dit is echt RTFM. Lees een tutorial over ajax, welke dan ook, de meest basic, en je snapt precies hoe het werkt. Het is makkelijker dan het lijkt. Dit is niet echt een vraag voor hier.

Nou sorry hoor, ik vind het niet zo gemakkelijk. Mensen reageren altijd zo overdreven op een vraag. Ik zeg toch al dat de meeste tuts worden weergegeven met een request. Mijn oplossing moet zonder request zijn en ik vind het niet zo simpel om dat even om te bouwen, mag toch wel om tips vragen/nuttige links? verboden?

Als je 'klanten' een desktop programma willen, waarom maak je dan geen desktop-applicatie?

Het is verplicht om de applicatie webbased te maken, onderdeel van het examen.

Hoe ik het deed, maak een timer in javascript, en roep daarin elke keer de ajax functie aan die de gegevens opvraagt en laat zien.
Erg makkelijk en zo gemaakt

Misschien heb ik hier wat aan, bedankt:)

[Eddy Dean]

Ik denk persoonlijk dat je een probleem met Javascript in het algemeen hebt als je hier problemen mee hebt. Een timer lijkt me inderdaad de meest logische methode om nieuwe informatie op te vragen van de server (zoek maar eens op de setInterval functie).

Er moet dus wel een request gedaan worden, alleen wordt die request niet geiniteerd door de gebruiker maar door een javascript interval. Het is (helaas) niet mogelijk om de data naar de client te sturen op het moment dat er een verandering is, je moet dus gewoon pollen voor veranderingen.

[steffex]

kijk eens hier naar : http://en.wikipedia.org/wiki/Comet_(programming)

ik weet dat er ajax oplossingen bestaan die comet immiteren, echter kan ik het zo even niet vinden.

[H004]

Niet met de bedoeling je meteen een JS-Library aan te smeren, maar kijk hier (Mootools Timed Ajax - Demo) eens naar. Misschien dat het je op weg helpt...

[Cartman!]

stef-o, opzich geef je een mooi voorbeeld maar de TS gebruikt PHP en dat is gewoon niet geschikt voor Comet. TS: zoek eens op de term 'polling' wat in feite neerkomt op de eerder genoemde timer die elke x aantal seconden een nieuwe request doet naar een serversidepagina (PHP in jouw geval) en als er data is dit bijwerkt met Javascript.

edit: daarnaast werkt je link niet eens

[ Voor 6% gewijzigd door Cartman! op 01-04-2009 09:44 ]

[Keiichi]

GWT is ook een vrij handige toolkit om zoiets te maken.

[Storm90]

Hallo,
Iemand heeft me al geholpen met een code, ik zal um ff sharen:

JavaScript:

function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}

var http = createRequestObject();

function getPhp() {
http.open('post','php/phppagina.php',true);
http.onreadystatechange = getPhpResponse;
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send(null);
}

function getPhpResponse() {
if(http.readyState == 1) {
document.getElementById('resultatenDiv').innerHTML = 'loading';
}
else if(http.readyState == 4 && http.status == 200) {
document.getElementById('resultatenDiv').innerHTML = http.responseText;
}
}

setTimeout(function () {
getPhp();
},30000);

Precies wat vele van jullie zeiden: Met een timer
Werkt perfect:D

Toelichting:
phppagina.php moet natuurlijk worden vervangen door jouw php pagina. En je ziet twee keer staan resultatenDiv, dat is de div waarin het resultaat van phppagina.php in wordt weergegeven.

De setTimeout onderaan laat de functie getPhp iedere 30.000 miliseconden (=30 seconden) uitvoeren.

[ Voor 15% gewijzigd door Storm90 op 01-04-2009 10:51 ]

[GlowMouse]

Storm90 schreef op woensdag 01 april 2009 @ 10:48:
De setTimeout onderaan laat de functie getPhp iedereeenmalig na 30.000 miliseconden (=30 seconden) uitvoeren.

[Storm90]

klopt, ik heb de code aangepast:

JavaScript:

function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}

var http = createRequestObject();

function getPhp() {
http.open('post','http://192.168.1.249/Betterlook%20good/websites/Ticket%20service/IT-staff/get_tickets.php',true);
http.onreadystatechange = getPhpResponse;
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.send(null);
}

function getPhpResponse() {
if(http.readyState == 4 && http.status == 200) {
document.getElementById('resultatenDiv').innerHTML = http.responseText;
}
}

setInterval(function (nTimeInterval) {
getPhp();
nTimeInterval = nTimeInterval || 0;
},3000);

Werkt in IE en Firefox, heb de rest nog niet getest

[Verwijderd]

Mooi dat het werkt, toch wil je nog adviseren aan indenting te doen, maakt je code een stuk overzichtelijker =)

[Storm90]

Omdat dit maar weinig code was, niet zelf heb geprogrammeerd (alleen paar dingetjes aangepast) en een extern bestand is, heb ik er niet zo op gelet. Maar ik zal er rekening mee houden
Normaal in PHP, JSQuery, HTML e.d. maak ik er wel gebruik van, anders is er inderdaad bijna geen touw meer aan vast te knopen