Scribd
Upload
7 views

Program 10

The document is an HTML example demonstrating how to load a text file's content using AJAX with both plain JavaScript and jQuery. It includes buttons for each method and a div to display the loaded content. The JavaScript code handles the AJAX requests and updates the content area based on the response from the text file.

Uploaded by

flytechi13579
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

Program 10

The document is an HTML example demonstrating how to load a text file's content using AJAX with both plain JavaScript and jQuery. It includes buttons for each method and a div to display the loaded content. The JavaScript code handles the AJAX requests and updates the content area based on the response from the text file.

Uploaded by

flytechi13579
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Load Text File Content with AJAX</h1>
<button id="loadPlainJs">Load with Plain JS</button>
<button id="loadJQuery">Load with jQuery</button>
<div id="content"></div>

<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

document.getElementById('loadPlainJs').addEventListener('click', function() {
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("content").innerHTML = this.responseText;
}
};

xhttp.open("GET", "textfile.txt", true);


xhttp.send();
});

document.getElementById('loadJQuery').addEventListener('click', function() {
$.ajax({
url: "textfile.txt",
method: "GET",
success: function(data) {
$("#content").html(data);...
},
error: function() {
$("#content").html("An error occurred while loading the file.");
}
});
});

You might also like