1. CS 371 Web Application Programming
AJAX
CS 371 Web Application Programming

2. 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:
CS 371 Web Application Programming

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. Is an asynchronous call more like a phone call or an email?
Asynchronicity
Is an asynchronous call more like a phone call or an ?
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

10. 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

11. 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

12. 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

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

14. 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