Mrs. Sujata Oak Assistant Professor Department of IT: ITC602-Web X.O Module 6: Rich Internet Application

ITC602- Web X.
O
Module 6 : Rich Internet Application
Mrs. Sujata Oak

Assistant Professor
Department of IT
Module 6 :Rich Internet Application
THEORY
2 Module 6 : AJAX and RIA

Module 6 :Rich Internet Application

Module 6 : AJAX: Introduction and Working
What is AJAX?
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:

•A browser built-in XMLHttpRequest object (to request data
from a web server)
•JavaScript and HTML DOM (to display or use the data)

Module 6 : AJAX: Introduction and Working
 AJAX allows web pages to be updated asynchronously by exchanging

data with a web server behind the scenes.
 This means that it is possible to update parts of a web page, without

reloading the whole page.

Module 6 : How AJAX Works

Module 6 : AJAX - The XMLHttpRequest Object
The keystone of AJAX is the XMLHttpRequest object.
1.Create an XMLHttpRequest object
2.Define a callback function
3.Open the XMLHttpRequest object
4.Send a Request to a server

All modern browsers support

the XMLHttpRequest object.
The XMLHttpRequest object can be used to exchange

data with a web server.
This means that it is possible to update parts of a

web page, without reloading the whole page.

Create an XMLHttpRequest Object
All modern browsers (Chrome, Firefox, IE,

Edge, Safari, Opera) have a built-
in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:

variable = new XMLHttpRequest();

Module 6 : AJAX - Define a Callback Function
A callback function is a function passed as a parameter

to another function.
The callback function should contain the code to

execute when the response is ready.
xhttp.onload = function() {
// What to do when the response is ready
}

Module 6 : Send a Request
To send a request to a server, you can use the

open() and send() methods of
the XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Module 6 : XMLHttpRequest Object Methods

Module 6 : XMLHttpRequest Object Properties

Module 6 : AJAX - XMLHttpRequest
The XMLHttpRequest object is used to request data from a server.
Send a Request To a Server
To send a request to a server, we use the open() and send()

methods of the XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Module 6 : The url - A File On a Server
The url parameter of the open() method, is an address to a file

on a server:
xhttp.open("GET", "ajax_test.asp", true);
The file can be any kind of file, like .txt and .xml, or server
scripting files like .asp and .php (which can perform actions on
the server before sending the response back).

Module 6 : Asynchronous - True or False?
Server requests should be sent asynchronously.
The async parameter of the open() method should be set to true:

xhttp.open("GET", "ajax_test.asp", true);
By sending asynchronously, the JavaScript does not have to wait for the
server response, but can instead:
•execute other scripts while waiting for server response

Module 6 : GET or POST?
GET is simpler and faster than POST
However, always 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.

Module 6 : Synchronous Request
To execute a synchronous request, change the third

parameter in the open() method to false:
xhttp.open("GET", "ajax_info.txt", false);
Synchronous XMLHttpRequest (async = false) is not

recommended because the JavaScript will stop executing until the
server response is ready. If the server is busy or slow, the
application will hang or stop.

Module 6 : AJAX - Server Response
The responseText property returns the server response as a

JavaScript string

Module 6 : Server Response Methods
The getAllResponseHeaders() method returns all header information

from the server response.
The getResponseHeader() method returns specific header information

from the server response.

Module 6 : Introduction to CMS
 Content development has become a sensational means of sharing

information over the internet.
 Even the non-technical users got the ability to publish content
easily and quickly on the World Wide Web.
 It is all possible because of the easy-use of content management
tools available and is widely used by firms, news organizations,
educational institutions, and other businesses.

<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt",false);
xhttp.send();
}
</script>
</body>
</html>

26

Mrs. Sujata Oak Assistant Professor Department of IT: ITC602-Web X.O Module 6: Rich Internet Application

Uploaded by

Copyright:

Available Formats

Mrs. Sujata Oak Assistant Professor Department of IT: ITC602-Web X.O Module 6: Rich Internet Application

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mrs. Sujata Oak Assistant Professor Department of IT: ITC602-Web X.O Module 6: Rich Internet Application

Uploaded by

Copyright:

Available Formats

ITC602- Web X.

Mrs. Sujata Oak

2 Module 6 : AJAX and RIA

3 Module 6 : AJAX and RIA

AJAX is not a programming language.

AJAX just uses a combination of:

5 Module 6 : AJAX and RIA

 AJAX allows web pages to be updated asynchronously by exchanging

 This means that it is possible to update parts of a web page, without

6 Module 6 : AJAX and RIA

7 Module 6 : AJAX and RIA

The keystone of AJAX is the XMLHttpRequest object.

1.Create an XMLHttpRequest object

2.Define a callback function

3.Open the XMLHttpRequest object

4.Send a Request to a server

8 Module 6 : AJAX and RIA

All modern browsers support

The XMLHttpRequest object can be used to exchange

This means that it is possible to update parts of a

9 Module 6 : AJAX and RIA

Create an XMLHttpRequest Object

All modern browsers (Chrome, Firefox, IE,

Syntax for creating an XMLHttpRequest object:

10 Module 6 : AJAX and RIA

A callback function is a function passed as a parameter

The callback function should contain the code to

11 Module 6 : AJAX and RIA

To send a request to a server, you can use the

12 Module 6 : AJAX and RIA

13 Module 6 : AJAX and RIA

14 Module 6 : AJAX and RIA

The XMLHttpRequest object is used to request data from a server.

Send a Request To a Server

To send a request to a server, we use the open() and send()

15 Module 6 : AJAX and RIA

The url parameter of the open() method, is an address to a file

16 Module 6 : AJAX and RIA

Server requests should be sent asynchronously.

The async parameter of the open() method should be set to true:

•execute other scripts while waiting for server response

17 Module 6 : AJAX and RIA

GET is simpler and faster than POST

However, always use POST requests when:

A cached file is not an option (update a file or database on the

18 Module 6 : AJAX and RIA

To execute a synchronous request, change the third

Synchronous XMLHttpRequest (async = false) is not

19 Module 6 : AJAX and RIA

The responseText property returns the server response as a

20 Module 6 : AJAX and RIA

The getAllResponseHeaders() method returns all header information

The getResponseHeader() method returns specific header information

21 Module 6 : AJAX and RIA

 Content development has become a sensational means of sharing

22 Module 6 : AJAX and RIA

23 Module 6 : AJAX and RIA

You might also like