AJAX Tutorial in JavaScript What AJAX Is and How to Use it

CSS : Cascading Style Sheet (CSS) is used to provide look and style to a Web Application.

JavaScript : JavaScript is used for making a Web Application interactive, interesting and user friendly.

XML : Extensible Markup Language (XML) is a format to store and transport data from the Web Server.

What’s the meaning of Asynchronous in AJAX?

Asynchronous means that the the Web Application could send and receive data from the Web Server without refreshing the page. This background process of sending and receiving data from the server along with updating different sections of a web page defines Asynchronous property/feature of AJAX Tutorial.

How AJAX works:

AJAX makes use of a browser built-in XMLHttpRequest object to request data from a Web Server and Html DOM to display or use the data and AJAX Tutorial.

XMLHttpRequest Object : It is an API in the form an object whose methods help in transfer of data between a web browser and a web server.

Html DOM : When a web page is loaded, the browser creates a Document Object Model of the page.

Create a XMLHttpRequest Object :
var xhttp = new XMLHttpRequest();

Properties of XMLHttpRequest object :

ready state is a property of the XMLHttpRequest Object which holds the status of the XMLHttp Request.

request not initialized

server connection established

request received

processing request

request finished and response is ready

on ready state changeis a property of the XMLHttpRequest Object which defines a function to be called when the readyState property changes. status“` is a property of the XMLHttpRequest Object which returns the status-number of a request

200: “OK”
403: “Forbidden”
404: “Not Found”

XMLHttpRequest Object Methods :

To send a request to a Web Server, we use the open() and send() methods of the XMLHttpRequest object.
xhttp.open(“GET”, “content.txt”, true);
xhttp.send();

Create a function changeContent() using JavaScript :
function changeContent() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“foo”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “content.txt”, true);
xhttp.send();
}

The file content.txt should be present in the root directory of the Web Application.
This is a basic example, and you can expand upon it by handling more complex scenarios, sending data with POST requests, and incorporating error handling based on your application’s needs.

Javascript training in hyderabad
contact