introduction to ajax
DESCRIPTION
TRANSCRIPT
http://ce.qu.edu.az/~aadamov
Dr. Abzetdin ADAMOV
Chair of Computer Engineering Department
Internet Technologies Introduction to AJAX
What is Ajax?
• "Asynchronous JavaScript and XML"
• New name for an old technique: – JavaScript + DHTML + XMLHttpRequest
– In use since at least 1997
– Finally someone gave it a name
– Already enabled in your Web server and browser
• Use JavaScript asynchronously behind the scenes to load additional data (typically XML) without discarding and reloading the entire Web page.
2
Why use Ajax?
• Your users will soon demand it – Not just another cool (geeky) technology
– Very user-visible effect
– Rich UI experience in a Web page
• Portable across browsers
• Plus, all advantages of zero-install Web app – No install done for this demo
– No "DLL Hell"
3
Why use Ajax?
• Client/Server Apps: – Dynamic data
– Static forms, controls, code, etc.
– Efficient, but not flexible
• Traditional Web Apps: – Dynamic data
– Dynamic forms, controls, code, etc.
– Flexible, but inefficient, and noticeably slow
• Ajax Apps: – Dynamic data
– Static or dynamic forms, controls, code, etc.
– Best of both worlds
4
Why use Ajax?
• Geeky reasons: – Multithreaded data retrieval from Web servers
• Pre-fetch data before needed
• Progress indicators
• Appearance of speed
• Avoids need for setTimeout()
– Less bandwidth required; less server load • Reload partial page, not entire page
• Load data only, not even partial page
5
How much to use Ajax?
• As little or as much as you like
• No need to abandon what you already do
• One more item in your "bag of tricks"
• Start by jazzing up your existing UI
6
How to use Ajax?
Simple!
Use the
XMLHttpRequest
Object
7
XMLHttpRequest Methods
• open (“method”, “URL”, [async, username, password]) – Assigns destination URL, method, etc.
• send (params) – Sends request including postable string or DOM object data
• abort () – Terminates current request
• getAllResponseHeaders () – Returns headers (name/value pairs) as a string
• getResponseHeader (“header”) – Returns value of a given header
• setRequestHeader (“label”,”value”) – Sets Request Headers before sending
8
XMLHttpRequest Properties
• onreadystatechange – Event handler (your code) that fires at each state change
• readyState 0 = uninitialized 3 = interactive (some data has been returned)
1 = loading (broken in IE 6.0)
2 = loaded 4 = complete
• status – HTTP Status returned from server: 200-299 = OK
• responseText – String version of data returned from server
• responseXML – XML DOM document of data returned
• statusText – Status text returned from server
9
Simple Example
var req = new XMLHttpRequest();
req.onreadystatechange = myHandler;
req.open("GET", "servlet", true);
req.send("p1=abc");
...
function myHandler() {
if (req.readyState == 4) {
doSomethingWith(req.responseXML);
}
else if (req.readyState == 3) {
showProgressIndicator();
}
}
10
Demos
• http://studlinux.qafqaz.local/~s08_aaz/ajax – Simple demo
– More demos
– Google Suggest
– Google Maps
– Language translation
– Mouse gesture as password
– Typing speed as password
– Classified ads tied to map
– "Mashups"
11
Security Issues
• Can only hit domain the Web page came from
– Cannot access a 3rd party Web Service
– However: • You can wrap those requests through your own server
• User can allow access to specific sites via browser security settings
• IFRAME can access any site (instead of XMLHttpRequest)
12
Advanced Topics
– XSLT and XPath support (Sarissa)
– Serializing Java Beans as XML • XMLBeans, JAXB, Zeus, Jbind, Castor, Betwixt
– Serializing Java Beans as JavaScript objects • JSON -- JavaScript Object Notation
– 2-way Mapping of Java Beans to JavaScript objects • DWR -- Direct Web Remoting
– Ajax Component Libraries and Toolkits: • Dojo, Prototype, HTC, XBL
• Implemented as JSP tag libraries or pure JavaScript
– Ajax Frameworks
– Ajax Patterns
13
QUESTIONS
14
http://ce.qu.edu.az/~aadamov