Your SlideShare is downloading. ×
0
Ajax en PHP wast witter dan wit Script dynamischer dan dynamisch
Demootjes <ul><li>Quizje met directe response http://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_vb.html   </li></ul><ul><li>A...
XMLHTTPRequest-object <ul><li>Zéér belangrijke speler </li></ul><ul><li>Verstuurt request </li></ul><ul><li>Ontvangt respo...
Nieuwe procedure – vaag -- <ul><li>Maak een request-object aan </li></ul><ul><li>Beschrijf wat er moet gebeuren wanneer de...
createReq() <ul><li>function createREQ() { </li></ul><ul><li>try { </li></ul><ul><li>req = new XMLHttpRequest(); // firefo...
Request klaarmaken GET <ul><li>http.open(&quot;GET&quot;, <url>); </li></ul><ul><li>http.send(null); </li></ul><ul><li>Maa...
Request klaarmaken POST <ul><li>Request-header zetten </li></ul><ul><li>en post-gegevens samenstellen en versturen </li></...
Response klaarmaken <ul><li>Server side    PHP! </li></ul><ul><ul><li>Of andere talen </li></ul></ul><ul><li>Een zo zuini...
Response-readyStates <ul><li>Status  Beschrijving </li></ul><ul><li>0  De request is nog niet klaar. </li></ul><ul><li>1  ...
Call back functie <ul><li>Typisch software-mechanisme om “uitgestelde” functionaliteit te definieren </li></ul><ul><ul><li...
Response zit in responseText <ul><li>Gebruik die responseText  </li></ul><ul><li>Verwerk die met DHTML (CSS + javascript) ...
En dan nu de code van de demos <ul><li>Quizje met directe response http:// cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_vb.h...
Beetje doorbomen <ul><li>Asynchroon v2  http://cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_async_v2.html   </li></ul><ul><l...
Nieuwe procedure – concreet -- <ul><li>Maak een request-object aan </li></ul><ul><li>Definieer de call-back functie </li><...
Nieuwe procedure – nog concreter -- <ul><li>function antwoord( // bepaal uw parameters voor algemeen gebruik van deze func...
Upcoming SlideShare
Loading in...5
×

Ajax-met-PHP.ppt

899

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax-met-PHP.ppt"

  1. 1. Ajax en PHP wast witter dan wit Script dynamischer dan dynamisch
  2. 2. Demootjes <ul><li>Quizje met directe response http://cmdstud.khlim.be/vier/WebTaVe/ajax/ajax_vb.html </li></ul><ul><li>Asynchroon iets http:// cmdstud.khlim.be/ vier/WebTaVe/ajax /ajax_async.html </li></ul>
  3. 3. XMLHTTPRequest-object <ul><li>Zéér belangrijke speler </li></ul><ul><li>Verstuurt request </li></ul><ul><li>Ontvangt response </li></ul><ul><li>En verwerkt die in het document </li></ul><ul><li>Methodes en eigenschappen universeel </li></ul><ul><li>Creatie browser-afhankelijk </li></ul>
  4. 4. Nieuwe procedure – vaag -- <ul><li>Maak een request-object aan </li></ul><ul><li>Beschrijf wat er moet gebeuren wanneer de response terug is </li></ul><ul><li>Kies het (php-)script dat de verwerking doet </li></ul><ul><li>Geef alle info door aan dat script </li></ul><ul><li>Verstuur! </li></ul>
  5. 5. createReq() <ul><li>function createREQ() { </li></ul><ul><li>try { </li></ul><ul><li>req = new XMLHttpRequest(); // firefox, safari, … </li></ul><ul><li>} </li></ul><ul><li>catch (err1) { try { </li></ul><ul><li>req = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); // sommige IE </li></ul><ul><li>} </li></ul><ul><li>catch (err2) { try { </li></ul><ul><li>req = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); // meeste IE </li></ul><ul><li>} </li></ul><ul><li>catch (err3) { </li></ul><ul><li>req = false; </li></ul><ul><li>alert(&quot;Deze browser ondersteunt geen Ajax. Dikke pech!&quot;); </li></ul><ul><li>}}} </li></ul><ul><li>return req; </li></ul><ul><li>} </li></ul>
  6. 6. Request klaarmaken GET <ul><li>http.open(&quot;GET&quot;, <url>); </li></ul><ul><li>http.send(null); </li></ul><ul><li>Maar caching van de browser is een probleem </li></ul><ul><li> extra parametertje </li></ul><ul><li>var rand = parseInt(Math.random()*9999999); </li></ul><ul><li>var url = gewoneURL + &quot;&rand=&quot; rand; </li></ul><ul><li>En dan lange url versturen. </li></ul>
  7. 7. Request klaarmaken POST <ul><li>Request-header zetten </li></ul><ul><li>en post-gegevens samenstellen en versturen </li></ul><ul><li>http.open('post', 'verwerking.php'); </li></ul><ul><li>http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); </li></ul><ul><li>http.send('veld1=waarde;veld2=waarde'); </li></ul>
  8. 8. Response klaarmaken <ul><li>Server side  PHP! </li></ul><ul><ul><li>Of andere talen </li></ul></ul><ul><li>Een zo zuinig mogelijke response </li></ul><ul><ul><li>Dus geen <html><head>… </li></ul></ul><ul><ul><li>Zorg voor een strict en herkenbaar formaat </li></ul></ul><ul><ul><ul><li>Bv. onderdelen gescheiden door “-” of vaste lengte </li></ul></ul></ul><ul><ul><ul><li>En dan in javascript opsplitsten met indexOf en substr </li></ul></ul></ul>
  9. 9. Response-readyStates <ul><li>Status Beschrijving </li></ul><ul><li>0 De request is nog niet klaar. </li></ul><ul><li>1 De request is klaar om te versturen. </li></ul><ul><li>2 De request is verstuurd. </li></ul><ul><li>3 De request is in verwerking. </li></ul><ul><li>4 De request is afgerond en de response is toegekomen. </li></ul><ul><li>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. </li></ul>
  10. 10. Call back functie <ul><li>Typisch software-mechanisme om “uitgestelde” functionaliteit te definieren </li></ul><ul><ul><li>Bv. bij user interfaces </li></ul></ul><ul><li>http.onreadystatechange = function() { </li></ul><ul><ul><li>alert(http.readyState); </li></ul></ul><ul><li>} </li></ul>
  11. 11. Response zit in responseText <ul><li>Gebruik die responseText </li></ul><ul><li>Verwerk die met DHTML (CSS + javascript) </li></ul>
  12. 12. En dan nu de code van de demos <ul><li>Quizje met directe response http:// cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_vb.html </li></ul><ul><li>Asynchroon iets http:// cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_async.html </li></ul>
  13. 13. Beetje doorbomen <ul><li>Asynchroon v2 http://cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_async_v2.html </li></ul><ul><li>Eenmalig http:// cmdstud.khlim.be / vier/WebTaVe/ajax /ajax_eenmalig.html </li></ul>
  14. 14. Nieuwe procedure – concreet -- <ul><li>Maak een request-object aan </li></ul><ul><li>Definieer de call-back functie </li></ul><ul><li>Maak je URL klaar </li></ul><ul><ul><li>Bij GET met extra parameters </li></ul></ul><ul><li>GET </li></ul><ul><ul><li>Voorzie een extra parameter tegen de cache </li></ul></ul><ul><li>POST </li></ul><ul><ul><li>Maak extra header </li></ul></ul><ul><li>Verstuur! </li></ul><ul><ul><li>bij POST met extra parameters </li></ul></ul>
  15. 15. Nieuwe procedure – nog concreter -- <ul><li>function antwoord( // bepaal uw parameters voor algemeen gebruik van deze functie! ) { </li></ul><ul><li>var http = createREQ(); </li></ul><ul><li>var urlGewoon = “ // geef de url en voeg de get-parameters toe ”; </li></ul><ul><li>var rand = parseInt(Math.random()*999999); </li></ul><ul><li>var url = urlGewoon + &quot;&rand=&quot; + rand; </li></ul><ul><li>// de call-back functie </li></ul><ul><li>http.onreadystatechange = function() { </li></ul><ul><li>if (http.readyState < 4) { </li></ul><ul><li>// feedback dat je aan het processen bent </li></ul><ul><li>} </li></ul><ul><li>else { </li></ul><ul><li>// verwerk de http.responseText in je pagina </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>// en nu nog de request uitsturen </li></ul><ul><li>http.open(&quot;GET&quot;, url); </li></ul><ul><li>http.send(null); </li></ul><ul><li>} </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×