Documente Academic
Documente Profesional
Documente Cultură
1
What is an AJAX?
2
Benefits of an AJAX?
• Allows user to continue interacting with web page while waiting for
data to be returned
• Page can be updated without refreshing browser
• Results in a better user experience
• There are AJAX libraries that reduce the amount of JavaScript code
that must be written
• Increase Usability of Web Applications
• Rich Internet Applications without animation tools.
• Save Bandwidth
• Download only data you need.
• Faster Interface.
3
Lack of an AJAX?
4
How does AJAX works?
5
6
An Ajax Interaction Provides Validation Logic
7
What is the code logic behind AJAX. \
• IFrame.
• Hidden Frames.
8
Examples an AJAX?
• GMail
• Google Maps
• Google Suggest
• Flickr.
9
XMLHttpRequest
10
XMLHttpRequest Properties
11
XMLHttpRequest Example
if (window.XMLHttpRequest) {
var req = new XMLHttpRequest();
req.onreadystatechange = requestStateHandler;
req.open("GET", "/somefile.xml", true);
req.send(“”); //null
}
function requestStateHandler() {
if (req.readyState == 4) { //response ready
alert(req.statusText);
}
12
XMLHttpRequest Example
var req;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = requestStateHandler;
req.open("GET", "/somefile.xml", true);
req.send(“”); //null
}
function requestStateHandler() {
if (req.readyState == 4) { //response ready
alert(req.statusText);
}
13
XMLHttpRequest XML Response
<ratings>
<show>
<title>Alias</title>
<rating>6.5</rating>
</show>
<show>
<title>Lost</title>
<rating>14.2</rating>
</show>
</ratings>
function requestStateHandler() {
if (request.status == 200) {
var xmlDoc = request.responseXML;
var showElements = xmlDoc.getElementsByTagName("show");
for (var x=0; x<showElements.length; x++) { // We know that the first child of
show is title, and the second is rating var title =
showElements[x].childNodes[0].value;
var rating = showElements[x].childNodes[1].value;
// Now do whatever you want with the show title and ratings
}
}
14
}
Cross browser AJAX
var req;
function loadXMLDoc(url) {
req = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
15
}
THANK YOU
16