Scribd
Upload
13 views

unit 2 AJAX

AJAX NOTES

Uploaded by

ayyanreddymanda
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

unit 2 AJAX

AJAX NOTES

Uploaded by

ayyanreddymanda
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Purpose of AJAX

 Read data from a web server - after the page has loaded
 Update a web page without reloading the page
 Send data to a web server - in the background

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change
Content</button>
</div>

</body>
</html>

function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {

document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

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).

How AJAX Works


 1. An event occurs in a web page (the page is loaded, a button is clicked)
 2. An XMLHttpRequest object is created by JavaScript
 3. The XMLHttpRequest object sends a request to a web server
 4. The server processes the request
 5. The server sends a response back to the web page
 6. The response is read by JavaScript
 7. Proper action (like page update) is performed by JavaScript

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

The XMLHttpRequest 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.
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();

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
}

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();

<!DOCTYPE html>

<html>

<body>

<h2>The XMLHttpRequest Object</h2>

<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");

xhttp.send();

</script>

</body>

</html>

XMLHttpRequest Object Methods


XMLHttpRequest Object Methods

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

XMLHttpRequest Object Properties


Property Description

onload Defines a function to be called when the request is


received (loaded)

onreadystatechang Defines a function to be called when the readyState


e 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

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"
For a complete list go to the Http Messages
Reference

statusText Returns the status-text (e.g. "OK" or "Not Found")

The onload Property


With the XMLHttpRequest object you can define a callback function to be
executed when the request receives an answer.

The function is defined in the onload property of the XMLHttpRequest object:

The onreadystatechange Property


The readyState property holds the status of the XMLHttpRequest.

The onreadystatechange property defines a callback function to be executed


when the readyState changes.

The status property and the statusText properties hold the status of the
XMLHttpRequest object.

Property Description

onreadystatechang Defines a function to be called when the readyState


e 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

status 200: "OK"


403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages
Reference
statusText Returns the status-text (e.g. "OK" or "Not Found")

The onreadystatechange function is called every time the readyState changes.

When readyState is 4 and status is 200, the response is ready:

<!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();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML =

this.responseText;

};

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

</script>

</body>
</html>

You might also like