AJAX JavaScript Tutorial: Making Asynchronous Web Requests with Examples and Code

Published on : May 16,2023

Asynchronous JavaScript and XML (AJAX) allows web developers to make requests to servers without having to reload the entire page. In this tutorial, we will explore the basics of AJAX JavaScript, providing you with examples and code snippets to help you understand and leverage this functionality in your web projects.

Getting Started with AJAX JavaScript

To begin, create an HTML file that includes a JavaScript file where you will write your AJAX code. In this example, we will create a simple HTML file with a button that, when clicked, will trigger an AJAX request to retrieve data from a server.

<!DOCTYPE html>
<html>
<head>
	<title>AJAX JavaScript Tutorial</title>
	<script src="ajax.js"></script>
</head>
<body>
	<button onclick="loadData()">Load Data</button>
	<div id="data"></div>
</body>
</html>

Making an AJAX Request

Now let's look at the AJAX code in ajax.js that retrieves data from a server when the button is clicked:

function loadData() {
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			document.getElementById("data").innerHTML = this.responseText;
		}
	};
	xhr.open("GET", "data.txt", true);
	xhr.send();
}

In this code, we create an XMLHttpRequest object, which allows us to communicate with the server. We set the onreadystatechange property to a function that is called every time the readyState property changes. When the readyState is 4 (indicating that the request is complete) and the status is 200 (indicating success), we set the innerHTML property of the data element to the response text.

Sending Data to the Server

AJAX requests often involve sending data to the server. Here's an example of how to send data using the POST method:

function saveData() {
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			console.log(this.responseText);
		}
	};
	xhr.open("POST", "save.php", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send("name=John&age=25");
}

In this example, we create an AJAX request to save data to the server. We set the method to POST and include the data we want to send in the send method. We also set the Content-type header to indicate that we are sending URL-encoded form data.

Handling JSON Responses

AJAX requests often involve retrieving and working with JSON data. Here's an example of how to handle a JSON response:

function loadJSON() {
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			var data = JSON.parse(this.responseText);
			console.log(data.name);
		}
	};
	xhr.open("GET", "data.json", true);
	xhr.send();
}

In this example, we create an AJAX request to retrieve a JSON file from the server. We use the JSON.parse() method to convert the JSON response to a JavaScript object, which we can then access and manipulate as needed.

Conclusion: This tutorial introduced you to AJAX JavaScript, a powerful tool for making asynchronous web requests. We covered the basics of making AJAX requests, sending data to the server, and handling JSON responses.

AJAX JavaScript simplifies the process of communicating with servers and retrieving dynamic data for your web applications. By leveraging this functionality, you can create more interactive and responsive user experiences.

Now that you have a foundation in AJAX JavaScript, feel free to explore further and experiment with different options and scenarios to enhance your web development projects.

Happy coding with AJAX JavaScript!

Categories : JavaScript

Tags : AJAX JavaScript tutorial AJAX examples asynchronous web requests web development XMLHttpRequest AJAX data JSON responses AJAX basics AJAX for beginners.

Abhay Dudhatra

I am a full-stack developer who is passionate about creating innovative solutions that solve real-world problems. With expertise in technologies such as PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter, and Bootstrap, I love to share my knowledge and help others in the industry through writing tutorials and providing tips. Consistency and hard work are my mantras, and I constantly strive to improve my skills and stay up-to-date with the latest advancements in the field. As the owner of Open Code Solution, I am committed to providing high-quality services to my clients and helping them achieve their business objectives.