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

Ajax-met-PHP.ppt

on

  • 1,152 views

 

Statistics

Views

Total Views
1,152
Views on SlideShare
1,150
Embed Views
2

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ajax-met-PHP.ppt Ajax-met-PHP.ppt Presentation Transcript

  • Ajax en PHP wast witter dan wit Script dynamischer dan dynamisch
  • 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
  • XMLHTTPRequest-object
    • Zéér belangrijke speler
    • Verstuurt request
    • Ontvangt response
    • En verwerkt die in het document
    • Methodes en eigenschappen universeel
    • Creatie browser-afhankelijk
  • 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!
  • 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;
    • }
  • 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.
  • 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');
  • 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
  • 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.
  • Call back functie
    • Typisch software-mechanisme om “uitgestelde” functionaliteit te definieren
      • Bv. bij user interfaces
    • http.onreadystatechange = function() {
      • alert(http.readyState);
    • }
  • Response zit in responseText
    • Gebruik die responseText
    • Verwerk die met DHTML (CSS + javascript)
  • 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
  • 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
  • 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
  • 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);
    • }