Ajax-met-PHP.ppt
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,267
On Slideshare
1,265
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 2

http://www.slideshare.net 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ajax en PHP wast witter dan wit Script dynamischer dan dynamisch
  • 2. Demootjes
    • Quizje met directe response http://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_vb.html
    • Asynchroon iets http:// cmdstud.khlim.be/ vier/WebTaVe/ajax /ajax_async.html
  • 3. XMLHTTPRequest-object
    • Zéér belangrijke speler
    • Verstuurt request
    • Ontvangt response
    • En verwerkt die in het document
    • Methodes en eigenschappen universeel
    • Creatie browser-afhankelijk
  • 4. Nieuwe procedure – vaag --
    • Maak een request-object aan
    • Beschrijf wat er moet gebeuren wanneer de response terug is
    • Kies het (php-)script dat de verwerking doet
    • Geef alle info door aan dat script
    • Verstuur!
  • 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;
    • }
  • 6. Request klaarmaken GET
    • http.open(&quot;GET&quot;, <url>);
    • http.send(null);
    • Maar caching van de browser is een probleem
    •  extra parametertje
    • var rand = parseInt(Math.random()*9999999);
    • var url = gewoneURL + &quot;&rand=&quot; rand;
    • En dan lange url versturen.
  • 7. Request klaarmaken POST
    • Request-header zetten
    • en 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');
  • 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
  • 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.
  • 10. Call back functie
    • Typisch software-mechanisme om “uitgestelde” functionaliteit te definieren
      • Bv. bij user interfaces
    • http.onreadystatechange = function() {
      • alert(http.readyState);
    • }
  • 11. Response zit in responseText
    • Gebruik die responseText
    • Verwerk die met DHTML (CSS + javascript)
  • 12. En dan nu de code van de demos
    • Quizje met directe response http:// cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_vb.html
    • Asynchroon iets http:// cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_async.html
  • 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
  • 14. Nieuwe procedure – concreet --
    • Maak een request-object aan
    • Definieer de call-back functie
    • Maak 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
  • 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 + &quot;&rand=&quot; + 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(&quot;GET&quot;, url);
    • http.send(null);
    • }