Embed Size (px)
Citation preview
CS 371 Web Application Programming
School of Computing and Information Systems
CS 371 Web Application Programming
AJAX
CS 371 Web Application Programming
School of Computing and Information Systems
Motivation
Internet
Internet
client
server
• In traditional web apps, data is requested from server• Sent from server to client• As more data is processed, it continues• and continues
CS 371 Web Application Programming
School of Computing and Information Systems
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
School of Computing and Information Systems
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
School of Computing and Information Systems
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
School of Computing and Information Systems
Basicshave 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
School of Computing and Information Systems
Client scriptsuse xmlHttpRequest to communicate asynchronously
open the URL for the server scriptassociate a function for call backcheck the ready state and take action when transmission is complete
client script canmodify html elementsdump html or xml data into containers
xslt, dss can continue to play intended role
CS 371 Web Application Programming
School of Computing and Information Systems
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
School of Computing and Information Systems
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
School of Computing and Information Systems
Making the connectionopen, 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
School of Computing and Information Systems
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
School of Computing and Information Systems
PHP server scriptcan access data using $_GET or $_POST arrays
returns values using echo
CS 371 Web Application Programming
School of Computing and Information Systems
Callback functionis 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
