Scribd
Upload
9 views1 page

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views1 page

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
We take content rights seriously. If you suspect this is your content, claim it here.
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