javascript & ajax

1

JavaScript & AJAX

CS 236607, Winter 2007/8

2

JavaScript

3

Overview JavaScript is a scripting language most often

used for client-side web development, and best known for this use in websites (as client-side JavaScript).

JavaScript is essentially unrelated to the Java programming language, though it copies many Java names and naming conventions.

JavaScript is used in many Web pages to add functionality, validate forms, detect browsers, and much more.

4

JavaScript by Examples

We will look at some JavaScript examples…

5

Hello World<html><body>

<script type="text/javascript">document.write(“<h1>Hello World!</h1>");

</script>

</body></html>

DOM treatment of the page

6

Document URL<html><body>The URL of this document is:

<script type="text/javascript">document.write(document.URL);

</script>

</body>

</html>

7

More Examples

Count the number of images in a document What are the coordinates of the cursor?

Notice events are thrown (events-driven)

http://www.w3schools.com/js/tryit.asp?filename=trydhtml_collection_imglength

http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_clientxy

Form Validation<html><head><script type="text/javascript">function validate() …(next slide)</script></head>

<body><form action="tryjs_submitpage.htm" onsubmit="return validate()">Name (max 10 chararcters): <input type="text" id="fname"

size="20"><br />Age (from 1 to 100): <input type="text" id="age" size="20"><br />E-mail: <input type="text" id="email" size="20"><br /><br/><input type="submit" value="Submit"> </form></body></html>

Form Validation (Cont.)<script type="text/javascript">function validate(){ var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; var fname=document.getElementById("fname").value; submitOK="true";

if (fname.length>10){alert("The name must be less than 10 characters");submitOK="false"; }

if (isNaN(age)||age<1||age>100) {alert("The age must be a number between 1 and 100");submitOK="false"; }

if (at==-1) {alert("Not a valid e-mail!");submitOK="false"; }

if (submitOK=="false") {return false; }

}</script>

DOM Objects

JavaScript Function

Object Property

10

AJAX

11

Where Were We Before AJAX?

Static pages give the illusion of interactivity through standard form submissions.

Form submissions result in full page loads.

12

So, What’s The Problem? Many actions only manipulate small portions of the

page but the entire page must be reloaded. Server responses contain the entire page content

rather than just the portion being updated. Loading entire pages typically results in several

additional HTTP requests for images, style sheets, scripts, and any other content that may be on the page.

13

AJAX - Asynchronous JavaScript and XML An interface that allows for the HTTP

communication without page refreshment. Web pages are loaded into an object within the

script (e.g., JavaScript) execution and integrated with the page content.

Thus, the Web page can communicate with the server without refreshing the whole page.

14

Real-Life Examples of AJAX Apps Google maps

http://maps.google.com/ Goolgle Suggest

http://www.google.com/webhp?complete=1&hl=en Gmail

http://gmail.com/ Yahoo Maps (new)

http://maps.yahoo.com/ Many more…

15

AJAX Components JavaScript

DOM XMLHttpRequest object (XHR) XML

16

Ajax Fundamentals

Ajax uses a three-step process:1. Request a URL from JavaScript code on the client.

2. Handle the URL on the server and write to the response.

3. After the response is complete, integrate the response into the DOM (Document Object Model).

In an Ajax request we don't refresh the entire page; instead, we update only part of the page.

17

The Server sideDid we reduce the load on the server? Ajax newcomers sometimes mistakenly believe

that Ajax, because it provides a more responsive user interface, reduces server-side traffic.

In fact, Ajax applications typically have more server-side traffic because each Ajax request involves a trip to the server. Because those requests are asynchronous, however,

Ajax creates the perception of a more responsive UI, though it typically does not reduce the load on the server.

18

So, How Does It Work? JavaScript is used to:

Create and control instances of the XMLHttpRequest (XHR) object.

Provide handlers for responses. Manipulate the DOM.

The XMLHttpRequest object: Allows scripts to perform HTTP client functionality. Supports GET and POST operations.

19

Launching HTTP Requests

Typically, 3 steps are required:

1.1. Construct and configure an XMLHttpRequest object

2.2. Launch the request

3.3. Process the response

20

Constructing an XMLHttpRequest

For Mozilla:

For Microsoft Explorer:

var request = new XMLHttpRequest();

var request = new ActiveXObject("Microsoft.XMLHTTP");

21

Configuring an XMLHttpRequest

request.open("method","URL",false)

request.setRequestHeader("header","value")

• method is GET, POST, etc.

• URL must be in the domain of the current (or a relative URL), for security reasons

• The false will be discussed later

22

Launching the Request

request.send(content )

• content is the posted in a POST request

• content can be "null" or empty

Reading the Response

request.responseText

• The response as flat text

request.responseXML

• The response as a (DOM) Document object

• Available if response Content-Type is text/XML

request.status request.statusText

request.getAllResponseHeaders()

request.getResponseHeader("header")

24

<html>

< head>

< title<Jokes>/title>

< script type="text/javascript">

...2 slides ahead...

/< script>

/< head >

An Example

>body onload="init(); setJoke()"<

>h1<Select a Joke:>/h1<

>p<>select onchange="setJoke(value)"<

>option value="1" selected="selected"<Joke 1>/option<

>option value="2"<Joke 2>/option<

>option value="3"<Joke 3>/option<

>/select<>/p<

>div id="jokediv"<>/div<

>/body<

>/html<

An Example (Cont.)

>script type="text/javascript"<

var jDiv;

function init() { jDiv = document.getElementById("jokediv");}

function setJoke(value) {

request = new XMLHttpRequest();

request.open("GET","joke"+value+".txt",false);

request.send(null);

if(request.status==200){jDiv.innerHTML=request.responseText;}

else {jDiv.innerHTML = ">i<Cannot load joke...>/i<";}

}

>/script<

What if we didn’t get yet the response in this stage?

27

Example (Cont.)

Our examples use “false" in the third parameter of open(). This parameter specifies whether the request should be

handled asynchronously. True means that the script continues to run after

the send() method, without waiting for a response from the server.

Let’s see how it works, and how it is saved on the Tomcat server.

28

Asynchronous Requests Reading of a Web page can take a long time during

which the browser is blocked Solution: launch the request asynchronously That is, the execution continues after send is called

without waiting for it to complete

When the request is completed, a predefined function is called

request.open("method","URL",true)

29

XMLHttpRequest States The XMLHttpRequest goes through several

states:

In the request configuration, you can define a function to call upon state change:

00 not initialized 11 loading 22 loaded

33 interactive 44 complete

request.onreadystatechange = functionName

30

XMLHttpRequest States (Cont.)

Use request.readyState to get the current state of the request

Use request.abort() to stop the request

31

var request;

function setJoke(value) {

request = new XMLHttpRequest();

request.open("GET","joke"+value+".txt",true);

request.onreadystatechange = updateJokeDiv;

request.send(null);

}

Asynchronous Example

33

Integrating AJAX and XML using DOM

The next example shows how XML data can be parsed and added into the content of your page

34

>html<

>head<>title<Country List>/title<

>script type="text/javascript"<…>/script<

>/head<

>body onload="init();loadCountries()"<

>h1<Select a Continent:>/h1<

XML+AJAX Example

>p<>select id="continenetList" onchange="loadCountries()"<

>option value="asia"<Asia>/option<

>option value="africa"<Africa>/option<

>option value="europe"<Europe>/option<

>/select<>/p<

>p<>select size="10" id="countryList"<>/select<>/p<

>/body<

>/html<

XML+AJAX Example (Cont.)

function init() {

continents = document.getElementById("continenetList");

countries = document.getElementById("countryList"); }

function loadCountries() {

var xmlURL = "countries-"+continents.value+".xml";

var request = new XMLHttpRequest();

request.onreadystatechange = updateCountries ();

request.open("GET",xmlURL,true);

request.send(null); }


38

JavaScript Libraries

To reduce the amount of JavaScript code you need to write for Ajax requests, and to make sure that those requests succeed across multiple browsers, one better use a JavaScript library that neatly encapsulates those details and sharp edges in convenient JavaScript objects.

The Prototype Library is one option.

39

Resources

DaveFancher.com Hebrew University Course javapassion.com W3 Schools Wikipedia Core JavaServer Faces(2nd Edition) / David

Geary, Cay S. Horstmann

javascript & ajax

Documents