ajax – a synchronous j avascript a nd x ml
DESCRIPTION
AJAX – A synchronous J avaScript a nd X ML. CS 236369, Spring 2010. Where Were We Before AJAX?. Static pages give the illusion of interactivity through standard form submissions. Form submissions result in full page loads. So, What’s The Problem?. - PowerPoint PPT PresentationTRANSCRIPT
1
AJAX – Asynchronous JavaScript and XML
CS 236369, Spring 2010
2
Where Were We Before AJAX?
Static pages give the illusion of interactivity through standard form submissions.
Form submissions result in full page loads.
3
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.
4
AJAX - Asynchronous JavaScript and XML A group of interrelated web development
techniques used on the client-side to create interactive web applications / rich Internet applications.
With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.
Thus, the Web page can communicate with the server without refreshing the whole page.
5
Real-Life Examples of AJAX Apps Google maps
http://maps.google.com/ Goolgle Suggest (Now integrated in Google’s
homepage) http://www.google.com/webhp?complete=1&hl=en
Yahoo Maps http://maps.yahoo.com/
Many more…
6
AJAX Components JavaScript
DOM XMLHttpRequest object (XHR) XML
7
Ajax Fundamentals
Ajax uses a three-step process:1. Request a URL by the JavaScript code – client side.
2. Handle the URL on the server and write to the response – server side.
3. After the response is complete, integrate the response into the DOM (Document Object Model) – client side.
In an Ajax request we don't refresh the entire page; instead, we update only part of the page.
8
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.
9
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.
10
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
11
Constructing an XMLHttpRequest
In all modern browsers:
In older Microsoft browsers (IE 5 and 6):
(The XMLHttpRequest object is not specified in any W3C recommendation – it is not a W3C standard)
var request = new XMLHttpRequest();
var request = new ActiveXObject("Microsoft.XMLHTTP");
12
Configuring an XMLHttpRequest
request.open("method","URL",isAsynchronous)
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 isAsynchronous boolean parameter will be discussed later
13
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")
The XHR Object
15
<html>
< head>
< title<Jokes>/title>
< script type="text/javascript">
...2 slides ahead...
/< script>
/< head >
An Example
>body onload="init(); setJoke()"<
>h2<Current date on server:>span id="serverTimeSpan“<? >/span<>h2<
>h1<Select a Joke:>/h1<
>p<>select onchange="presentServerTime();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.)
17
18
current-time.jsp
<%= new java.util.Date() %>
<%
long t0,t1;
t0=System.currentTimeMillis();
do{
t1=System.currentTimeMillis();
{
while (t1-t0<3000);//wait for 3 seconds
%>
19
20
Example (Cont.)
Our examples use “false" in the third parameter of open(). This parameter specifies whether the request should be
handled asynchronously. As you can notice by running this example, the joke
only appear after the JSP response is received. True means that the script continues to run after
the send() method, without waiting for a response from the server.
21
To be continued…