Rich Internet Application

Introduction
• Desktop is a very powerful s/w experience when talked about look & feel.
• To a user, it is easy to handle and work with any software that behaves in a manner
similar to a users desktop.
• New ways are being adopted to develop interfaces that provide users with better
powerful experiences.
• Applications developed to provide exciting rich interactivity features in software
programs are known as Rich Internet Applications (RIA).
Introduction
• RIAs are developed as web applications behaving like desktop application in their
look & feel.
• RIA can perform computation on both the client side and sever side.
• It is developed using various technologies that includes Java, Silverlight, JavaFX,
Adobe Flash & Flex, AJAX, OpenLaszlo
Characteristics of RIA
1. Enhanced Accessibility
2. Direct Interaction
3. Improved features
4. Partial update of webpages.
5. Better feedback to users.
6. Collaborative Web Application Access
7. Consistency of look & feel
8. Offline use of the application
9. Impact on performance
Introduction to AJAX
Asynchronous JavaScript and XML
Asynchronous JavaScript and XML
• AJAX is an acronym for Asynchronous JavaScript and XML.
• It is a group of inter-related technologies like JavaScript, DOM, XML, HTML/XHTML, CSS,
XMLHttpRequest etc.
• AJAX allows to send and receive data asynchronously without reloading the web page.
• AJAX allows to send only important information to the server not the entire page.
• So only valuable data from the client side is routed to the server side.
• It makes application interactive and faster.
• There are too many web applications running on the web that are using ajax technology
▫ gmail, facebook, twitter, google map, youtube etc.
Asynchronous JavaScript and XML
AJAX
• not a programming language.
• imply a development technique for creating interactive web applications.

JavaScript
• Client side scripting language.
• It is executed on the client side by the web browsers that support JavaScript.
• JavaScript code only works in browsers that have JavaScript enabled.

XML
• Acronym for Extensible Markup Language.
• It is used to encode messages in both human and machine readable formats.
• It’s like HTML but allows you to create your custom tags
Asynchronous JavaScript and XML

• AJAX uses an XMLHttpRequest object to send data to a web server

• XML is commonly used as the format for receiving server data, although any format

including JSON, plain text can be used.

How it Works?

• An event occurs in a web page (the page is loaded, a button is

clicked)

• An XMLHttpRequest object is created by JavaScript

• The XMLHttpRequest object sends a request to a web server

• The server processes the request

• The server sends a response back to the web page

• The response is read by JavaScript

• Proper action (like page update) is performed by JavaScript

XMLHttpRequest Object
• The keystone of AJAX is the XMLHttpRequest object.
• All modern browsers support the XMLHttpRequest object.
• The XMLHttpRequest object can be used to exchange data with a server behind the
scenes.
• This means that it is possible to update parts of a web page, without reloading the whole
page.
XMLHttpRequest Object
• An object of XMLHttpRequest is used for asynchronous communication between client
and server.
It performs following operations:
• Sends data from the client in the background
• Receives the data from the server
• Updates the webpage without reloading it.
XMLHttpRequest Object
Create an XMLHttpRequest Object
• All modern browsers (Chrome, Firefox, IE7+, Edge, Safari Opera) have a built-in
XMLHttpRequest object.

• Syntax for creating an XMLHttpRequest object:

variable = new XMLHttpRequest();

Eg: var xhttp = new XMLHttpRequest();

 Methods of XMLHttpRequest Object
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method, url, async, user, psw) Specifies the request
method: the request type GET or POST
url: the file location
async: true (asynchronous) or false (synchronous)

user: optional user name

psw: optional password
Methods of XMLHttpRequest Object
Method Description
send() Sends the request to the server
Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent
 Properties of XMLHttpRequest Object
Property Description
onload Defines a function to be called when the request is received (loaded)
onreadystatechange Defines a function to be called when the readyState
property changes
readyState Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
 Properties of XMLHttpRequest Object
Property Description
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number of a request
200: "OK"
403: "Forbidden"
404: "Not Found"
statusText Returns the status-text (e.g. "OK" or "Not Found")
 The onload property Example
<!DOCTYPE html>
<html>
<body> • The XMLHttpRequest object is used to exchange data
with a server.
<div id="demo">
<h2>The XMLHttpRequest Object</h2> • To send a request to a server, use the open() and send()
<button type="button" onclick="loadDoc()"> Change Content</button>
methods of the XMLHttpRequest object:
</div>
[Link]("GET", "ajax_info.txt", true);
<script>
[Link]();
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML =
• For security reasons, modern browsers do not allow
[Link]; access across domains.
}
[Link]("GET", "ajax_info.txt"); • This means that both the web page and the XML file it
[Link](); tries to load, must be located on the same server.
}
</script>

</body>
</html>
The onload property Example
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML =
[Link];
}
[Link]("GET", "ajax_info.txt");
[Link]();
}
</script>

</body>
</html>
GET or POST method?
GET is simpler and faster than POST, and can be used in most cases.

Use POST requests when:

• A cached file is not an option (update a file or database on the server).

• Sending a large amount of data to the server (POST has no size limitations).

• Sending user input (which can contain unknown characters), POST is more robust and secure than GET.
 GET method Example
<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML = [Link];
}
[Link]("GET", "demo_get.asp");
[Link]();
}
</script>

</body>
</html>
 GET method Example (With [Link])
<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML = [Link];
}
[Link]("GET", "demo_get.asp?t=" + [Link]());
[Link]();
}
</script>

</body>
</html>
GET method Example (Adding information to URL)
<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML = [Link];
}
[Link]("GET", "demo_get2.asp?fname=Henry&lname=Ford");
[Link]();
}
</script>
</body>
</html>
 POST method Example
<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML = [Link];
}
[Link]("POST", "demo_post.asp");
[Link]();
}
</script>

</body>
</html>
 POST method Example (POST data like HTML form)
<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML = [Link];
}
[Link]("POST", "demo_post2.asp");
[Link]("Content-type", "application/x-www-form-urlencoded");
[Link]("fname=Henry&lname=Ford");
}
</script>

</body>
</html>
AJAX vs Traditional Approach
 1. the user fills in the form’s fields, then submits the form (Fig. Step 1).
Traditional Approach 2. The browser generates a request to the server, which receives the

request and processes it (Step 2).

3. The server generates and sends a response containing the exact

page that the browser will render (Step 3), which causes the browser

to load the new page (Step 4) and temporarily makes the browser

window blank

4. Note that the client waits for the server to respond and reloads the

entire page with the data from the response (Step4).

5. While such a synchronous request is being processed on the server,

the user cannot interact with the client web page.

Traditional Approach 6. Frequent long periods of waiting, due perhaps to

Internet congestion, have led some users to refer to

the World Wide Web as the “World Wide Wait.”

7. If the user interacts with and submits another form,

the process begins again (Steps 5–8).

AJAX Design Basics – Working of AJAX
 1. Ajax applications add a layer between the client and the server to

AJAX Web Application Model manage communication between the two

2. When the user interacts with the page, the client creates an

XMLHttpRequest object to manage a request (Step 1).

3. The XMLHttpRequest object sends the request to the server (Step 2)

and awaits the response.

4. The requests are asynchronous, so the user can continue interacting

with the application on the client-side while the server processes the

earlier request concurrently.

5. Other user interactions could result in additional requests to the server

(Steps 3 and 4).

6. Once the server responds to the original request (Step 5), the

XMLHttpRequest object that issued the request calls a client side

function to process the data returned by the server.

AJAX Web Application Model 6. This function known as a callback function uses partial

page updates (Step 6) to display the data in the existing

web page without re-loading the entire page.

7. At the same time, the server may be responding to the

second request (Step 7) and the client-side may be

starting to do another partial page update (Step 8).

8. The callback function updates only a designated part of

the page. Such partial page updates help make web

applications more responsive, making them feel more like

desktop applications.

9. The web application does not load a new page while the

user interacts with it.

Key Points
• AJAX or Ajax is Asynchronous JavaScript and XML.

• It is used for exchanging data with a server and updating a portion of a webpage without reloading the whole

webpage on the client side.

• The display and behavior of the existing webpage doesn’t get interfered at all while exchanging and updating the

data.

• Ajax is also considered a group of technologies which has HTML, CSS, DOM, and JavaScript that are utilized to

mark up, style, and allow the user to interact with the information on the webpage.

• Some basic knowledge of HTML, DOM, JavaScript, and a local Web server or remote Web Server is required.
JQuery
JQuery
• jQuery is open source, browser-independent, platform-independent.

• The most important reason behind developing jQuery is to simplify client side scripting
(i.e. coding JavaScript).

• Using JavaScript, it is frustrating in some of the situations like selecting or targeting HTML elements, applying effects to them, adding and
removing events, navigating and manipulating DOM tree, developing AJAX applications etc

• jQuery makes things like

selecting or targeting elements ,
adding styles,
adding effects,
creating animations,
event handling,
navigating and manipulating DOM tree,
developing AJAX applications etc.

• It is much much simpler than JavaScript.

JQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

where

• $ sign to define/access jQuery

• (selector) to "query (or find)" HTML elements

• jQuery action() to be performed on the element(s)

Examples:

• $(this).hide() - hides the current element.

• $("p").hide() - hides all <p> elements.

• $(".test").hide() - hides all elements with class="test".

• $("#test").hide() - hides the element with id="test".

The Document Ready Event
Here all jQuery methods in examples, are inside a document ready event:

$(document).ready(function(){
// jQuery methods go here...
});

• This is to prevent any jQuery code from running before the document is finished loading (is ready).
• It is good practice to wait for the document to be fully loaded and ready before working with it.
• This also allows you to have your JavaScript code before the body of your document, in the head section.
The Document Ready Event
Here are some examples of actions that can fail if methods are run before the document is fully loaded:

• Trying to hide an element that is not created yet

• Trying to get the size of an image that is not loaded yet

The jQuery team has also created an even shorter method for the document ready event:

$(function(){

// jQuery methods go here...

});
Jquery Example
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>
JQuery and AJAX
• jQuery provides several methods for AJAX functionality.

• With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using

both HTTP Get and HTTP Post –

• And you can load the external data directly into the selected HTML elements of your web page!

• Writing regular AJAX code can be a bit tricky, because different browsers have different syntax for AJAX

implementation.

• This means that you will have to write extra code to test for different browsers.

• However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only

one single line of code.

JQuery - AJAX load() Method
The jQuery load() method is a simple, but powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected element.

Syntax:
$(selector).load(URL, data, callback);

• The required URL parameter specifies the URL you wish to load.
• The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
• The optional callback parameter is the name of a function to be executed after the load() method is completed.
JQuery - AJAX load() Method
<!DOCTYPE html> The following example loads the content of the file
<html> "demo_test.txt" into a specific <div> element
<head>
<script src="[Link]
Here is the content of our example file: "demo_test.txt":
<script>
$(document).ready(function(){
$("button").click(function(){ <h2>jQuery and AJAX is FUN!!!</h2>

$("#div1").load("demo_test.txt"); <p id="p1">This is some text in a paragraph.</p>

});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>
JQuery - AJAX load() Method
<!DOCTYPE html> It is also possible to add a jQuery selector to the URL
<html>
parameter.
<head>
<script src="[Link]
<script>
The following example loads the content of the element
$(document).ready(function(){
with id="p1", inside the file
$("button").click(function(){
$("#div1").load("demo_test.txt #p1"); "demo_test.txt", into a specific <div> element
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>
 JQuery - AJAX get() Method
<!DOCTYPE html> jQuery $.get() Method
<html>
The $.get() method requests data from the server with
<head>
<script src="[Link] an HTTP GET request.
<script>
Syntax:
$(document).ready(function(){
$("button").click(function(){ $.get(URL,callback);
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
}); • The required URL parameter specifies the URL you
}); wish to request.
});
• The optional callback parameter is the name of a
</script>
</head> function to be executed if the request succeeds.
<body>
• The following example uses the $.get() method to

retrieve data from a file on the server:

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>
 JQuery - AJAX get() Method jQuery $.get() Method
<!DOCTYPE html>
• The first parameter of $.get() is the URL we wish to
<html>
<head> request ("demo_test.asp").
<script src="[Link]
• The second parameter is a callback function. The
<script>
$(document).ready(function(){ first callback parameter holds the content of the
$("button").click(function(){ page requested, and the second callback
$.get("demo_test.asp", function(data, status){
parameter holds the status of the request.
alert("Data: " + data + "\nStatus: " + status);
});
});
the ASP file looks like ("demo_test.asp"):
});
</script> <%
</head> [Link]("This is some text from an external
<body>
ASP file.")

<button>Send an HTTP GET request to a page and get the result back</button> %>

</body>
</html>
 JQuery - AJAX get() Method
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>
 JQuery – AJAX post() Method jQuery $.post() Method
<!DOCTYPE html>
<html> The $.post() method requests data from the server using an
<head>
HTTP POST request.
<script src="[Link]
<script>
$(document).ready(function(){
$("button").click(function(){
Syntax:
$.post("demo_test_post.asp",
$.post(URL,data,callback);
{
name: "Donald Duck", • The required URL parameter specifies the URL you wish
city: "Duckburg"
to request.
},
function(data,status){ • The optional data parameter specifies some data to
alert("Data: " + data + "\nStatus: " + status);
}); send along with the request.
});
• The optional callback parameter is the name of a
});
</script> function to be executed if the request succeeds.
</head>
The following example uses the $.post() method to send
<body>
some data along with the request
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
 JQuery – AJAX post() Method jQuery $.post() Method
<!DOCTYPE html>
<html>
The first parameter of $.post() is the URL we wish to
<head> request ("demo_test_post.asp").
<script src="[Link]
<script>
$(document).ready(function(){
Then we pass in some data to send along with the request
$("button").click(function(){
$.post("demo_test_post.asp", (name and city).
{
name: "Donald Duck",
city: "Duckburg"
The ASP script in "demo_test_post.asp" reads the
},
function(data,status){ parameters, processes them, and returns a result.
alert("Data: " + data + "\nStatus: " + status);
});
}); The third parameter is a callback function.
});
</script> The first callback parameter holds the content of the page
</head>
requested, and the second callback parameter holds the
<body>
status of the request.
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
 JQuery – AJAX post() Method jQuery $.post() Method
<!DOCTYPE html>
<html>
Here is how the ASP file looks like
<head>
<script src="[Link] ("demo_test_post.asp"):
<script>
$(document).ready(function(){
$("button").click(function(){ <%
$.post("demo_test_post.asp",
{ dim fname,city
name: "Donald Duck",
fname=[Link]("name")
city: "Duckburg"
}, city=[Link]("city")
function(data,status){
alert("Data: " + data + "\nStatus: " + status); [Link]("Dear " & fname & ". ")
});
[Link]("Hope you live well in " & city & ".")
});
}); %>
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
 JQuery – AJAX post() Method
<!DOCTYPE html>
<html>
<head>
<script src="[Link]
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>