1. School of Computing and Information Systems CS 371 Web Application Programming AJAX

2. School of Computing and Information Systems CS 371 Web Application Programming Motivation Interne t clie nt server In traditional web apps, data is requested from server Sent from server to client As more data is processed, it continues and continues

3. School of Computing and Information Systems CS 371 Web Application Programming Web Applications vs. Desktop traditional desktop – data is local, retrieval fast, screen elements can be updated easily and quickly web apps traditionally refresh content with new pages – every form requires a complete page refresh javaScript allows elements to be changed but no access to data

4. School of Computing and Information Systems CS 371 Web Application Programming Advantages to web apps data is stored centrally – always there from any computer software is easily and painlessly upgraded distribution is easier

5. School of Computing and Information Systems CS 371 Web Application Programming Disadvantages slow – depends on bandwidth connection to internet is necessary – is it 100% reliable? privacy concerns – data is stored on someone else’s machine

6. School of Computing and Information Systems CS 371 Web Application Programming Basics have the client script communicate with server script without needing a page reload server scripts (php, asp, etc) can be written as always but instead of writing out an entire web page, send the data

7. School of Computing and Information Systems CS 371 Web Application Programming Client scripts use xmlHttpRequest to communicate asynchronously open the URL for the server script associate a function for call back check the ready state and take action when transmission is complete client script can modify html elements dump html or xml data into containers xslt, dss can continue to play intended role

8. School of Computing and Information Systems CS 371 Web Application Programming Asynchronicity Is an asynchronous call more like a phone call or an email? why not just make a synchronous connection? what would it do for scaling? how does it fit in with REST? what does this mean for data requests? multiple data requests?

9. School of Computing and Information Systems CS 371 Web Application Programming Obtaining an xmlHttpRequest object xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlHttp=new XMLHttpRequest(); use try, catch to get the call for the current browser

10. School of Computing and Information Systems CS 371 Web Application Programming Making the connection open, set readychange function, send example: xmlHttp.open("GET","someScript.php"); xmlHttp.onreadystatechange=functa(); xmlHttp.send(null); can use POST or GET can also send data using send()

11. School of Computing and Information Systems CS 371 Web Application Programming Making the connection (cont.) often convenient to use anonymous functions put data in url after name of script using ?var=val&… watch out for scope of xmlHttp var

12. School of Computing and Information Systems CS 371 Web Application Programming PHP server script can access data using $_GET or $_POST arrays returns values using echo

13. School of Computing and Information Systems CS 371 Web Application Programming Callback function is called everytime the state changes – so must check for readstate==4 retrieves data using: data=xmlHttp.responseText data=xmlHttp.responseXML updates html using document and DOM methods