lecture 7
DESCRIPTION
TRANSCRIPT
![Page 1: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/1.jpg)
Web page the old way
1
![Page 2: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/2.jpg)
Scripting Languages• Client Side Scripting (run in the browser)
– Java script, VB script
• Client Side Application Programs(run as an independent program in the client machine)
– Java Applets
• Server Side Scripting (run the server – not really true in JSP case the server is only a container)
– ASP, JSP, PHP
• Server Side Application Programs(run as an independent program in the server)– CGI (Perl, C, Shell, etc)
![Page 3: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/3.jpg)
Everything was Synchronous
• The old way– Need to wait for the new page to be displayed
before you can do anything else– If you click on a button on a semi-loaded
page, the current page will be aborted and a new page will be loaded
• The scripting way– Web page was created using a program, the
synchronous behavior is the same
3
![Page 4: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/4.jpg)
Ajax• A: Asynchronous
– You do not need to wait for the web page to completely loaded
– It is done in the background (nothing is shown on your browser when it is loading)
• Problem arise– How to update the web page when it complete
the load• Call a JavaScript in the client (The J in Ajax)
– How to send data to/from client/server• Use XML (The X in Ajax)
4
![Page 5: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/5.jpg)
AJAX• Asynchronous JavaScript And XML
• AJAX is not a new programming language, it is a new way to use existing standards
• A technique for creating better, faster, and more interactive web applications.
• AJAX is based on JavaScript and HTTP requests.
• Use JavaScript to send and receive data between a web browser and a web server
• Exchanging data with the web server behind the scenes
5
![Page 6: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/6.jpg)
6
Ajax Applications
• Dynamic Text
• Populate Lists
• Dynamic Validation
• Table Editing
• And many more …
![Page 7: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/7.jpg)
7
What Ajax Based On?
• standards-based presentation using XHTML and CSS
• dynamic display and interaction using the Document Object Model
• data interchange and manipulation using XML and XSLT
• asynchronous data retrieval using XMLHttpRequest
• and JavaScript binding everything together
![Page 8: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/8.jpg)
8
Ajax Pros and ConsPros: • No plugin needed• Bandwidth Utilization• Improvement to the user experienceCons:• Unexpected “Back” behavior• Performance & Response-time concerns• Difficult for a user to bookmark a particular state of
the application• Applications may not be indexed by search engines
![Page 9: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/9.jpg)
9
Ajax Communication Model
![Page 10: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/10.jpg)
10
Browser-Server Interaction
![Page 11: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/11.jpg)
11
Browsers Support
• XMLHttpRequest supports ready in:– Internet Explorer 5.0+ (with ActiveXObject )– Safari 1.2– Mozilla 1.0 / Firefox– Opera 8+– Netscape 7
![Page 12: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/12.jpg)
12
Ajax Lifecycle
• Visit
• Initialization
• Event Loop– Browser Event– Server Request– Service Process Event– Server Response– Browser Update
![Page 13: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/13.jpg)
13
AJAX Example
• HTML<HTML>
....
<body>
<form> First Name:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
.....
</HTML>
![Page 14: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/14.jpg)
14
AJAX Example (con’t)function getData(str) {
xmlHttp = new XMLHttpRequest() if (xmlHttp==null) {
alert ("Browser does not support HTTP Request") return
} var url=“serverApp.jsp" url=url+"?q="+str xmlHttp.onreadystatechange = stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null)
} function stateChanged() {
if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML =
xmlHttp.responseText }
}
![Page 15: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/15.jpg)
15
AJAX XMLHttpRequest
• An API that can be used by JavaScript to transfer and manipulate XML data to and from web server
• Methods of XMLHttpRequest: open() - sets up a request to a web server send() - send the request to server abort() – abort the current request to server• Properties of XMLHttpRequest: readyState - Return the state of current state
(0 – Not initialized, 1 – Request has been setup, 2 – Has been Sent, 3 – is process, 4 – Request completed)
responseText – Return the response as a string
![Page 16: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/16.jpg)
16
XMLHttpRequest - Browser Support
• In Internet Explorernew ActiveXObject("Microsoft.XMLHTTP")
• In Mozilla, FireFox or Safarinew XMLHttpRequest()
...var objXMLHttp=null // Firefox, Opera 8.0+, Safari if (window.XMLHttpRequest) {
objXMLHttp=new XMLHttpRequest() } // Internet Explorer else if (window.ActiveXObject) {
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp ...
![Page 17: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/17.jpg)
17
XMLHttpRequest
• Handle browser-server communication
• User information uploaded to server
• New information downloaded from server
• Issues HTTP requests
• Calls to a server URL
• Sync or Asynchronous calls
• Must call to host that initiate the page
![Page 18: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/18.jpg)
18
XMLHttpRequest
• Creation methods different among browsers
function createXMLHttpRequest() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
![Page 19: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/19.jpg)
19
XMLHttpRequest
• Synchronous Call Example
var xhReq = new XMLHttpRequest();
xhReq.open("GET", "serverProg.jsp?arg1=value1", false);
xhReq.send(null);
var serverResponse = xhReq.responseText;
![Page 20: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/20.jpg)
20
XMLHttpRequest
• Asynchronous Call Example
var xhReq = new XMLHttpRequest(); xhReq.open("GET", "serverProg.jsp?arg1=value1", true); xhReq.onreadystatechange = serverResponseCallback; xhReq.send(null); ... function serverResponseCallback() {
if (xhReq.readyState != 4) {return;
}var serverResponse = xhReq.responseText;...
}
![Page 21: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/21.jpg)
21
XMLHttpRequest
• POST Examplevar xhReq = new XMLHttpRequest(); xhReq.open(“POST", “serverProg.jsp", true); xhReq.onreadystatechange = serverResponseCallback;xhReq.setRequestHeader(
"Content-Type","application/x-www-form-urlencoded");xhReq.send(“someData”); ... function serverResponseCallback() {
if (xhReq.readyState != 4) {return;
}var serverResponse = xhReq.responseText;...
}
![Page 22: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/22.jpg)
22
XMLHttpRequest
• GET Examplevar xhReq = new XMLHttpRequest(); xhReq.open(“GET", “serverProg.jsp?arg1=v1&arg2=v2", true); xhReq.onreadystatechange = serverResponseCallback;xhReq.send(null); ... function serverResponseCallback() {
if (xhReq.readyState != 4) {return;
}var serverResponse = xhReq.responseText;...
}
![Page 23: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/23.jpg)
23
Client Side – Response Handling
• Simple HTTP status
• Check XMLHttpRequest.status
• Anything other than 200 means ERROR– 404 Page not found– 500 server error– …
![Page 24: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/24.jpg)
24
Client Side – Response Handling
• readyState – status of the server response
• Execute onreadystatechange whenever ready state changes
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete
![Page 25: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/25.jpg)
25
Client Side – Response Handling
xhReq.onreadystatechange = function() {
if (xhReq.readyState != 4) { return; }
if (xhReq.status != 200) {
// Handle error, e.g. Display error message on page
return;
}
var serverResponse = xhReq.responseText;
...
};
![Page 26: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/26.jpg)
26
Client Side – Detecting Timeout
• Response may never return
• Use timeout to resolve
• Handling Timeout– Retry (Reentrant consideration)– Abort – Do nothing (Fire and Forget)
![Page 27: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/27.jpg)
27
Client Side – Detecting Timeoutvar xhReq = createXMLHttpRequest(); xhReq.open("get", "infiniteLoop.jsp", true); // Server stuck in a loop. var requestTimer = setTimeout(function() {
xhReq.abort(); // Handle timeout situation, e.g. Retry or inform user.
}, MAXIMUM_WAITING_TIME); xhReq.onreadystatechange = function() {
if (xhReq.readyState != 4) { return; } clearTimeout(requestTimer); if (xhReq.status != 200) {
// Handle error, e.g. Display error message on pagereturn;
} var serverResponse = xhReq.responseText; ...
};
![Page 28: Lecture 7](https://reader035.vdocuments.us/reader035/viewer/2022062511/54b6e8384a7959f7708b46a6/html5/thumbnails/28.jpg)
28
Lab Time