Play Store Application link – Java to JavaScript in 13 Steps – App on Google Play
AJAX (Asynchronous JavaScript and XML) is a technique that allows you to send and receive data from a web server without refreshing the entire page. This makes web pages more dynamic and interactive by enabling background data loading and updates without interrupting the user’s experience.
APIs (Application Programming Interfaces) are sets of protocols and tools for building software applications. Web APIs are accessible over the internet and allow different software systems to communicate with each other, similar to how methods and interfaces in core Java allow different components to interact.
AJAX:
AJAX allows you to request data from a server and update parts of a web page without requiring a full reload. This is like making asynchronous requests to a server in core Java using HttpURLConnection or similar classes for non-blocking operations.
- Core Java Comparison: In core Java, you might use
HttpURLConnectionto send a request to a server and process the response. AJAX performs a similar role but is built into JavaScript for use directly in the browser.
Example Program:
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>
APIs:
APIs provide a way to interact with external services and data. In web development, APIs are accessed over HTTP to fetch or send data. This is similar to using APIs in core Java, such as making RESTful service calls using libraries like HttpClient or RestTemplate.
- Core Java Comparison: In core Java, you might use a library like
RestTemplateto make HTTP requests to an external API and handle the responses. JavaScript’sfetchAPI performs a similar role for web applications.
Example Program:
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>
Text Diagram:
Web Browser Web Server
| |
| AJAX Request |
|-----------------> |
| |
| AJAX Response |
|<----------------- |
| |
To run these programs in Visual Studio Code, save them with a .html extension and open them in a web browser. Alternatively, you can use Node.js with the http module to create a local web server and serve the HTML files.