• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ajax-met-PHP.ppt
 

Ajax-met-PHP.ppt

on

  • 1,057 views

 

Statistics

Views

Total Views
1,057
Views on SlideShare
1,055
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);
      • }