CS 371 Web Application Programming AJAX CS 371 Web Application Programming

Motivation client Internet In traditional web apps, data is requested from server Sent from server to client As more data is processed, it continues and continues helpful sites: http://www.w3.org/Security/faq/wwwsf4.html 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 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 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 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 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 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, css can continue to play intended role CS 371 Web Application Programming

Is an asynchronous call more like a phone call or an email? 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? 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 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() 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 CS 371 Web Application Programming

PHP server script can access data using $_GET or $_POST arrays returns values using echo CS 371 Web Application Programming

Callback function is called every time the state changes – so must check for readystate==4 retrieves data using: data=xmlHttp.responseText data=xmlHttp.responseXML updates html using document and DOM methods CS 371 Web Application Programming