Program
10. Develop a JavaScript program with Ajax (with HTML/CSS) for:
a. Use ajax() method (without Jquery) to add the text content from the text file by sending ajax request.
b. Use ajax() method (with Jquery) to add the text content from the text file by sending ajax request.
c. Illustrate the use of getJSON() method in jQuery
d. Illustrate the use of parseJSON() method to display JSON values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX and JSON Examples</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
margin: 20px;
}
button {
margin: 10px 0;
padding: 10px 15px;
cursor: pointer;
border: none;
color: #f9f9f9;
background-color: rgb(26, 190, 73);
}
#content, #jsonContent {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<h1>AJAX and JSON Examples</h1>
<!-- Buttons -->
<button id="loadTextJS">Operation without jQuery</button>
<button id="loadTextJQ">Operation with jQuery</button>
<button id="loadJSON">getJSON</button>
<button id="parseJSON">Parse JSON</button>
<!-- Content -->
<div id="content"></div>
<div id="jsonContent"></div>
</div>
<script>
// without jQuery ajax Method
document.getElementById("loadTextJS").addEventListener("click", function () {
const xhr = new XMLHttpRequest();
xhr.open("GET", "example.txt", true); // Assuming "example.txt" is in the same directory
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("content").innerText = xhr.responseText;
}
};
xhr.onerror = function () {
console.error("An error occurred while processing the request.");
};
xhr.send();
});
// with jQuery's ajax method
$("#loadTextJQ").click(function () {
$.ajax({
url: "example.txt", // Assuming "example.txt" is in the same directory
method: "GET",
success: function (data) {
$("#content").text(data);
},
error: function () {
console.error("Error loading the text file.");
},
});
});
// jQuery's getJSON method
$("#loadJSON").click(function () {
$.getJSON("example.json", function (data) {
let output = "JSON Data:
";
$.each(data, function (key, value) {
output += `- ${key}: ${value}
`;
});
output += "
";
$("#jsonContent").html(output);
});
});
// jQuery's parseJSON method
$("#parseJSON").click(function () {
const jsonString = '{"name": "John Doe", "age": 30, "city": "New York"}';
const jsonObj = $.parseJSON(jsonString);
let output = "Parsed JSON:
";
for (let key in jsonObj) {
output += `- ${key}: ${jsonObj[key]}
`;
}
output += "
";
$("#jsonContent").html(output);
});
</script>
</body>
</html>
Output:
Output1 :-
Output2 :-
Output3 :-
Output2 :-
Output3 :-