I'm brand new to JavaScript and I'm trying to send an ajax request to retrieve the contents of a JSON file and display it in a div. Here's the code I currently have:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Ajax 1 - Text File</title>
</head>
<body>
<button id="button">Get Text File</button>
<br><br>
<div id="text"></div>
<script>
document.getElementById("button").addEventListener('click', loadText);
function loadText(){
var xhr = new XMLHttpRequest();
xhr.overrideMimeType('application/json');
xhr.open('GET','users.json',true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == '200') {
result.innerHTML = '<pre><code>[
{
"id":1,
"name":"Rick",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24564d474f644349454d480a474b49">[email protected]</a>"
},
{
"id":2,
"name":"Negan",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46282321272806212b272f2a6825292b">[email protected]</a>"
}
]
The code works properly but I'm facing an issue where even after manually updating the users.json file, the browser still displays the old version. What could be done to resolve this problem?