<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Ajax Examples</title>
<style>
body {
font-family: Arial,sans-serif;
background-color: #f9f9f9;
margin: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px 0;
}
button:hover {
background-color: #0056b3;
}
.output {
margin: 20px 0;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>Ajax Examples</h1>
<h2>a. JavaScript `ajax()` Request</h2>
<button onclick="loadDoc()">Load Text (Jscript) </button>
<div class="output" id="outputJS">Text content will be loaded here.</div>
<h2>b. jQuery `ajax()` Request</h2>
<button id="loadTextJQuery">Load Text (jQuery)</button>
<div id="outputJQuery" class="output">Text content will be loaded here.</div>
<h2>c. Using `getJSON()`in jQuery</h2>
<button id="loadJSONJQuery">Load JSON Data</button>
<div id="outputJSONJQuery" class="output">JSON data will be loaded here.</div>
<h2>d. Using `parseJSON()`</h2>
<button id="loadJSONParse">Parse JSON Data</button>
<div id="outputJSONParse" class="output">Parsed JSON data will be displayed here.</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// a. AJAX using JavaScript
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("outputJS").innerHTML = this.responseText;
}
xhttp.open("GET","example.txt");
xhttp.send();
}
// b. AJAX using jQuery's ajax() method
$('#loadTextJQuery').click(function () {
$.ajax({
url: 'example.txt', // Specify the text file to load
method: 'GET',
success: function (data) {
$('#outputJQuery').text(data);
},
error: function () {
$('#outputJQuery').text('Failed to load content.');
}
});
});
// c. Using getJSON() to load JSON data
$('#loadJSONJQuery').click(function () {
$.getJSON('example.json', function (data) {
let output = '<ul>';
data.forEach(function (item) {
output += `<li>${item.name} - ${item.age}</li>`;
});
output += '</ul>';
$('#outputJSONJQuery').html(output);
});
});
// d. Using parseJSON() to parse JSON data
$('#loadJSONParse').click(function () {
const jsonString = '{"students":[{"name":"John","age":20},{"name":"Jane","age":22}]}';
const parsedData = $.parseJSON(jsonString);
let output = '<ul>';
parsedData.students.forEach(function (student) {
output += `<li>${student.name} - ${student.age}</li>`;
});
output += '</ul>';
$('#outputJSONParse').html(output);
});
</script>
</body>
</html>
Comments
Post a Comment