AJAX (Asynchronous JavaScript and XML) is a technique for sending and receiving data from a web server without requiring a page refresh. It allows for more dynamic and interactive web pages by enabling data to be loaded and updated in the background without interrupting the user’s experience.
APIs (Application Programming Interfaces) are a set of protocols, routines, and tools for building software applications. Web APIs are APIs that are accessible over the internet and allow different software systems to communicate with each other.
JavaScript can interact with APIs using AJAX to send and receive data over HTTP. This allows for the integration of external data and services into a web page or application.
Tabular Comparisons:
| AJAX | APIs |
|---|---|
| Allows for sending and receiving data from a web server without requiring a page refresh. | A set of protocols, routines, and tools for building software applications. |
| Uses JavaScript to send and receive data over HTTP. | Web APIs are accessible over the internet and allow different software systems to communicate with each other. |
| Allows for the integration of external data and services into a web page or application. | Can provide data, functionality, or services to other software systems. |
| Enables more dynamic and interactive web pages by allowing data to be loaded and updated in the background. | Can be used to build web-based applications, mobile applications, or desktop applications. |
Text Diagram:
Web Browser Web Server
| |
| AJAX Request |
|-----------------> |
| |
| AJAX Response |
|<----------------- |
| |
Basic Programs:
- Sending an AJAX request to a web server:
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
<script>
function loadData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML = this.responseText;
}
};
xhttp.open("GET", "data.txt", true);
xhttp.send();
}
</script>
</head>
<body>
<button onclick="loadData()">Load Data</button>
<div id="data"></div>
</body>
</html>
- Retrieving data from a Web API:
<!DOCTYPE html>
<html>
<head>
<title>APIs</title>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
document.getElementById('title').innerHTML = data.title;
document.getElementById('body').innerHTML = data.body;
});
</script>
</head>
<body>
<h1 id="title"></h1>
<p id="body"></p>
</body>
</html>
To run these programs in Visual Studio Code, save them with a .html extension and open them in a web browser. You can also use Node.js and the http module to create a web server and serve the HTML files locally.
Core Java in 25 hours 