Lecture 7

Web page the old way

1

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)

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

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

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

6

Ajax Applications

• Dynamic Text

• Populate Lists

• Dynamic Validation

• Table Editing

• And many more …

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

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

9

Ajax Communication Model

10

Browser-Server Interaction

11

Browsers Support

• XMLHttpRequest supports ready in:– Internet Explorer 5.0+ (with ActiveXObject )– Safari 1.2– Mozilla 1.0 / Firefox– Opera 8+– Netscape 7

12

Ajax Lifecycle

• Visit

• Initialization

• Event Loop– Browser Event– Server Request– Service Process Event– Server Response– Browser Update

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>

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 }

}

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

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 ...

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

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;

}

19

XMLHttpRequest

• Synchronous Call Example

var xhReq = new XMLHttpRequest();

xhReq.open("GET", "serverProg.jsp?arg1=value1", false);

xhReq.send(null);

var serverResponse = xhReq.responseText;

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;...

}

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() {



}

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() {



}

23

Client Side – Response Handling

• Simple HTTP status

• Check XMLHttpRequest.status

• Anything other than 200 means ERROR– 404 Page not found– 500 server error– …

24


• 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

25


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;

...

};

26

Client Side – Detecting Timeout

• Response may never return

• Use timeout to resolve

• Handling Timeout– Retry (Reentrant consideration)– Abort – Do nothing (Fire and Forget)

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; ...

};

28

Lab Time

Lecture 7

Documents

Transcript of Lecture 7