Ajax-met-PHP.ppt
15
Click here to load reader
-
Upload
sampetruda -
Category
Documents
-
view
854 -
download
0
Transcript of Ajax-met-PHP.ppt
Ajax 1
Ajax en PHP
wast witter dan witScript dynamischer dan dynamisch
Ajax 1cmd 2006-07 2
Demootjes
Quizje met directe responsehttp://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_vb.html
Asynchroon ietshttp://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_async.html
Ajax 1cmd 2006-07 3
XMLHTTPRequest-object
Zéér belangrijke spelerVerstuurt requestOntvangt responseEn verwerkt die in het document
Methodes en eigenschappen universeelCreatie browser-afhankelijk
Ajax 1cmd 2006-07 4
Nieuwe procedure – vaag --
Maak een request-object aanBeschrijf wat er moet gebeuren wanneer de response terug isKies het (php-)script dat de verwerking doetGeef alle info door aan dat scriptVerstuur!
Ajax 1cmd 2006-07 5
createReq()
function createREQ() { try { req = new XMLHttpRequest(); // firefox, safari, … } catch (err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); // sommige IE } catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); // meeste IE } catch (err3) { req = false; alert("Deze browser ondersteunt geen Ajax. Dikke pech!"); }}} return req;}
Ajax 1cmd 2006-07 6
Request klaarmaken GET
http.open("GET", <url>);http.send(null);
Maar caching van de browser is een probleem extra parametertjevar rand = parseInt(Math.random()*9999999);var url = gewoneURL + "&rand=" rand;
En dan lange url versturen.
Ajax 1cmd 2006-07 7
Request klaarmaken POST
Request-header zettenen post-gegevens samenstellen en versturen
http.open('post', 'verwerking.php');http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');http.send('veld1=waarde;veld2=waarde');
Ajax 1cmd 2006-07 8
Response klaarmaken
Server side PHP!– Of andere talen
Een zo zuinig mogelijke response– Dus geen <html><head>…– Zorg voor een strict en herkenbaar formaat
• Bv. onderdelen gescheiden door “-” of vaste lengte• En dan in javascript opsplitsten met indexOf en substr
Ajax 1cmd 2006-07 9
Response-readyStates
Status Beschrijving 0 De request is nog niet klaar. 1 De request is klaar om te versturen. 2 De request is verstuurd. 3 De request is in verwerking. 4 De request is afgerond en de response is toegekomen.
Een goede ontwikkelaar zal dus ook bij readyStates 2 en 3 wat feedback geven en niet afwachten tot readyState 4, tenzij je per definitie weet dat je in geen tijd klaar bent.
Ajax 1cmd 2006-07 10
Call back functie
Typisch software-mechanisme om “uitgestelde” functionaliteit te definieren– Bv. bij user interfaces
http.onreadystatechange = function() {alert(http.readyState);
}
Ajax 1cmd 2006-07 11
Response zit in responseText
Gebruik die responseText Verwerk die met DHTML (CSS + javascript)
Ajax 1cmd 2006-07 12
En dan nu de code van de demos
Quizje met directe responsehttp://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_vb.html
Asynchroon ietshttp://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_async.html
Ajax 1cmd 2006-07 13
Beetje doorbomen
Asynchroon v2 http://cmdstud.khlim.be/
vier/WebTaVe/ajax/ajax_async_v2.html
Eenmalig http://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_eenmalig.html
Ajax 1cmd 2006-07 14
Nieuwe procedure – concreet --
Maak een request-object aanDefinieer de call-back functieMaak je URL klaar– Bij GET met extra parameters
GET– Voorzie een extra parameter tegen de cache
POST– Maak extra header
Verstuur!– bij POST met extra parameters
Ajax 1cmd 2006-07 15
Nieuwe procedure – nog concreter --
function antwoord(// bepaal uw parameters voor algemeen gebruik van deze functie!) { var http = createREQ();
var urlGewoon = “// geef de url en voeg de get-parameters toe”; var rand = parseInt(Math.random()*999999); var url = urlGewoon + "&rand=" + rand;
// de call-back functie http.onreadystatechange = function() {
if (http.readyState < 4) { // feedback dat je aan het processen bent } else { // verwerk de http.responseText in je pagina } }
// en nu nog de request uitsturen http.open("GET", url); http.send(null);}
