1. Competence Development Introduction to AJAX

2. What is AJAX? AJAX = Asynchronous JavaScript and XML For creating interactive web applications – Exchanging small amounts of data with the server ”behind the scenes” – Entire web pages do not have to be reloaded each time data is needed from the server Increases web pages interactivity, speed, functionality and usability Cross-platform technique usable on many different operating systems, computer architectures and web browsers Based on open standards such as JavaScript and DOM DOM (Document Object Model): a model in which the document or Web page contains objects (elements, links, etc.) that can be manipulated

3. What is AJAX? Asynchronous – extra data is requested from the server and loaded in the background without interfering the display and behavior of the existing page JavaScript is usually used for AJAX function calls Data is retrieved using the XMLHttpRequest object that is available to scripting languages run in modern browsers Alternatively, Remote Scripting can be used in browsers that do not support XMLHttpRequest. Asynchronous content does not need to be formatted in XML

4. Prototype – JavaScript Framework Unique, easy-to-use toolkit for class-driven development with one of the nicest Ajax libraries around Easy Ajax and DOM manipulation for dynamic web applications Quickly becoming the codebase of choice for web application developers everywhere http://www.prototypejs.org/

5. Example #1: Instructions Display contents of a text file in HTML DIV –element using AJAX when a button is pressed Basically this means that we will create a web page that calls a script in another file and then displays the result on our web page Of course we also need to create a DIV and a button No error checking is done, this is just a basic example

6. Example #1: First steps Download prototype.js and place it in your project directory Create text file to the same directory, e.g. testi.txt and add some data to it Create file (index.php) to the same directory, we use it as our web page Create file (skripti.php) to the same directory, we use it as our script file for reading data from another file

7. Example #1: Our web page Ajax example #1 JavaScript code is placed between HEAD-tags Create DIV and BUTTON between BODY-tags

8. Example #1: Our web page index.php Ajax example #1 function lue() { new Ajax.Request('skripti.php', { method: 'get', onSuccess: function(transport) { var tulos = $('tulos'); tulos.update(transport.responseText); } }); }

9. Example #1: Our script skripti.php <?php $tiedosto = file("testi.txt"); foreach($tiedosto as $rivi) print $rivi." "; ?> testi.txt example: KALLE KARI VILLE PEKKA TIMO JARI

10. Example #1: Results Test this example: http://bittinikkari.com/code/ajax/example1/ Files: index.php skripti.php testi.txt prototype.js

11. Example #2: Instructions Save HTML form fields to text file and print loading and result message to HTML DIVs We create skripti.php like in previous example that saves submitted form data into a text file Our script will return an error message if file opening fails

12. Example #2: First steps Create index.php and skripti.php like in first example Make sure that directory has write rights (this can be changed with FTP client or by executing chmod +w manually for the directory)

13. Example #2: Our web page index.php Ajax example #2 function init() { $('submit').onclick = function () { sendData(); } function sendData() { var url = 'skripti.php'; var pars = Form.serialize('frm'); var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} ); } function showLoad() { $('load').style.display = 'block'; }

14. Example #2: Our web page cont. function showResponse(originalRequest) { var newData = originalRequest.responseText; $('load').style.display = 'none'; $('status').update(newData); } Etunimi: Sukunimi: Email: Tallennetaan...

15. Example #2: Our script skripti.php <?php // luodaan tiedosto $tiedosto = fopen("tiedot.txt", "w"); if(!$tiedosto) print "Tiedoston aukaiseminen ei onnistunut!"; // kirjoitetaan vastaanotetut tiedot tiedostoon foreach($_GET as $tieto) fwrite($tiedosto, $tieto."\n"); print "Tiedot tallennettu onnistuneesti!"; ?>

16. Example #2: Results Test this example: http://bittinikkari.com/code/ajax/example2/ Files: index.php skripti.php prototype.js

17. References http://en.wikipedia.org/wiki/AJAX http://www.prototypejs.org/ http://fi.php.net/

18. To be continued...