Introduction to AJAX
-
Upload
abzetdin-adamov -
Category
Documents
-
view
469 -
download
3
description
Transcript of Introduction to AJAX
![Page 1: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/1.jpg)
http://ce.qu.edu.az/~aadamov
Dr. Abzetdin ADAMOV
Chair of Computer Engineering Department
Internet Technologies Introduction to AJAX
![Page 2: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/7.jpg)
How to use Ajax?
Simple!
Use the
XMLHttpRequest
Object
7
![Page 8: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to AJAX](https://reader031.fdocuments.net/reader031/viewer/2022020115/5476f2fbb4af9f4d5e8b45f4/html5/thumbnails/14.jpg)
QUESTIONS
14
http://ce.qu.edu.az/~aadamov