AJAX
AJAX stands for Asynchronous JavaScript And XML.
It’s not a programming language itself but rather a combination of
several technologies.
It is used to:
o Update a web page without reloading it
o Send request to server in background
o Read data from server after page is loaded
AJAX just uses the combination of :
o A web server having XMLHttpRequest object
o JS DOM to display the response from server
Allow web pages to be changed Asynchronously while sending
requests to server in the background
How AJAX works?
1. An event occurs on web page
2. XMLHttpRequest created
3. Request sent to server
4. Server process it
5. Server send response to webpage
6. Response read in JS
7. Proper action is performed
Modern browsers (fetch API):
Modern browsers uses fetch API that have HttpRequest object
instead of XMLHttpRequest object.
The XML request object:
All modern browsers support the XMLHttpRequest object.The
XMLHttpRequest object can be used to exchange 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.
Working of XMLHttp request object:
1. Create a XMLHttp request object
2. Define a Callback function
3. Open object
4. Send request to server
1. Create XMLHttp request object:
All modern browsers (Chrome, Firefox, IE, Edge, Safari, Opera) have a builtin
XMLHttpRequest object. Syntax for creating an XMLHttpRequest
object:
variable = new XMLHttpRequest()
2. Define a Callback function:
A callback function is a function passed as a parameter to another
function. In this case, 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 }
3. Send 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();
Access across domains:
For security reasons modern browsers do not allow access across
domains. It means the web page and the xml request it tries to load must
be at same place.
XMLHttpRequest Object Methods:
Sr Method Description
no
1. new XMLHttpRequest() Creates a new
XMLHttpRequest object
2. abort() Cancels the current request
3. getAllResponseHeaders() Returns header information
4. getResponseHeader() Returns specific header
information
5. open(method, url, async, Specifies the request method:
user, psw) the request type GET or POST
url: the file location on server
async: true (asynchronous)(by
default) or false (synchronous)
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. Modern developer
tools are encouraged to warn
about using synchronous
requests and may throw an
InvalidAccessError exception
when it occurs.
user: optional user name
psw: optional password
6. send() Sends the request to the server
Used for GET requests
7. send(string) Sends the request to the server.
Used for POST requests
8. setRequestHeader() Adds a label/value pair to the
header to be sent
Properties of XMLHttpRequest Object:
Sr Proper Description Usage
n ty
o.
1. On Defines a xhttp.onload = function()
load function to be { document.getElementById("demo").innerH
called when TML = this.responseText;
the request is }
received xhttp.open("GET", "ajax_info.txt");
xhttp.send();
(loaded)
2. On Defines a function loadDoc()
ready function to be {
state called when
change the
const xhttp = new
readyState XMLHttpRequest();
property xhttp.onreadystatechange =
change function()
3. Ready Holds the {
state status of the
if (this.readyState == 4 &&
XMLHttpRe
quest. this.status == 200)
0: request not { document.getElementById("dem
initialized o").innerHTML = this.responseText;
1: server } };
connection
established xhttp.open("GET", "ajax_info.txt");
2: request xhttp.send();
received
3: processing
}
request
4: request
finished and
response is
ready
4. Respo Returns the
nse response data
text as a string
5. Respo Returns the
nse response data
xml as XML data
6. Status Returns the
status-
number of a
request
200: "OK"
403:
"Forbidden"
404: "Not
Found"
For a
complete list
go to the Http
Messages
Reference
7. Status Returns the
text status-text
(e.g. "OK" or
"Not Found")
Get and post request:
The GET method is used to retrieve data from a specified resource
on the server.
It is commonly used for fetching data without altering anything on
the server.
o xhttp.open("GET", "demo_get.asp");
xhttp.send();
The POST method is used to submit data to be processed by a
specified resource on the server.
Unlike GET, POST requests do not cache data and are often used
to send data along with the request.
o xhttp.open("POST", "demo_post.asp");
xhttp.send();
