We Keep Coding

How can I stop caching when using AJAX to read a file?

I'm currently building a website that uses AJAX to dynamically update sections of the page without the need to refresh, however, when I change aspects of the file that AJAX reads the website sometimes takes minutes to update even though the file is read about once per second. Whilst looking for the issue I found that I can turn caching off by using the developer tools and this then allowed the website to update at the appropriate speed.
Here's the code I am using:
var path = "Path of the json file i am reading"
var state;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
state = JSON.parse(this.responseText);
}
};
xhttp.open("GET", path, true);
xhttp.send();
I've been looking for a while now and the only advice I can see about what to do about the cache is to use the developer tools to turn it off. Is there any way I can implement some code to automatically tell the browser to not cache the file being read?

Change content of text with Ajax in pug

I have to use Ajax on my website for a school project. I want to change the content of a button, but I first wanted to be able to change some text. I've found some examples on how to change text in a pug-file but they never seem to be working. Does anybody know what I'm doing wrong?
Pug:
extends layout
block content
#reizen.w3-content.w3-container.w3-padding-64
//test ajax
#demo
h2 The XMLHttpRequest Object
button(type='button' onclick='loadDoc()') Change Content
block content
script.
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
And I have also a little file, ajax_info.txt, in the root map (the pug file is in the views-map) with only:
Ajax is cool!
The result is always some text: The XMLHttpRequest Object,
and under the text a button with, Change content, but nothing happens when I click on it.

Pug is a completely separate paradigm from Ajax. Ajax is used to make a request from a server without reloading a page, and pug dynamically renders pages when they are requested from the server. A pug application involves building multiple pages, and an Ajax application uses one page.
You can generate the HTML and JavaScript using pug, but that's where the pug ends. It simply can't be used in Ajax calls.
You should look into Ajax libraries like Axios or jQuery and focus your attention there. You can use Express (without pug) to handle your API calls.

POST data with ajax

I'm trying to save a few lines of text in a textarea with ajax targeting a classic asp file.
I'm not sure how to use ajax when when it comes to sending data with POST method and NOT using jQuery, didn't find any questions concerning this here either, no duplicate intended.
Ajax function:
function saveDoc() {//disabled
var xhttp = new XMLHttpRequest();
var note = document.getElementById("note");
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("0").innerHTML = xhttp.responseText;
}
};
xhttp.open("POST", "saveNote.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(note);
ASP Classic:
set fs=Server.CreateObject("Scripting.FileSystemObject")
set f=fs.OpenTextFile("c:\inetasp\1.txt",8,true)
dim note
note = RequestForm("note")
f.Write(note)
f.Close
Response.Write("Works.");
set f=nothing
set fs=nothing
I'm aware there might be a lot wrong with the .asp since i couldn't find any specific info about how to handle ajax requests with Classic ASP correctly.
Any suggestions on how to make this work without jQuery are welcome.

I cannot test your code as I don't have a backend running on my machine right now. But I can already tell you a few things:
you are calling xhttp.send(note); but your note is a DOM element. It should be a string with a querystring format.
in your server side code you call RequestForm is it a custom function you have previously defined ? The usual syntax is Request.Form
Hope it can help

using JavaScript XMLHttpRequest() with ASP.NET MVC

I am trying to test using the JavaScript XMLHttpRequest() object in an ASP.NET MVC application.
I have written the following test code which I put into a View -
<script type="text/javascript">
var request;
function getAJAX() {
request = new XMLHttpRequest();
request.open("GET", "test.txt");
request.onreadystatechange = checkData();
request.send(null);
}
function checkData() {
if (request.readyState == 4) {
if (request.status == 200) {
alert(request.responseText);
}
}
}
</script>
<form action="">
<p>
<button type="button" onclick="getAJAX()">DO IT!</button>
</p>
</form>
When I click in the "DO IT!" button, the script functions get called, but the "request.onreadystatechange" never changes.
I have a few questions about this -
Is there a simple way to trace what is happening with the request.open() call?
Will the XMLHttpRequest() object even work in an ASP.NET MVC application?
Will I have to make changes to the Global.asax file (or other changes) to make this work?
I have "test.txt" in the "base" directory (the same location as the Global.asax file) is that where the request.open call will look?
(NOTE: I am trying to do this without jQuery)
Thanks very much!

You're setting the callback to onreadystatechange to the result of executing checkData. Set onreadystatechange equal to checkData instead and you should be good to go:
function getAJAX() {
request = new XMLHttpRequest();
request.open("GET", "test.txt");
request.onreadystatechange = checkData; // Don't execute checkData
request.send(null);
}
As for your other questions:
Is there a simple way to trace what is happening with the request.open() call?
Use Firebug or the development tool of your choice to inspect AJAX requests.
Will the XMLHttpRequest() object even work in an ASP.NET MVC application?
Yes, it'll work fine.
Will I have to make changes to the Global.asax file (or other changes) to make this work?
Not that I'm aware of.
I have "test.txt" in the "base" directory (the same location as the Global.asax file) is that where the request.open call will look?
Maybe? It really depends on your routing rules and how you have IIS configured.

How can I open a JSON file in JavaScript without jQuery?

I am writing some code in JavaScript. In this code i want to read a json file. This file will be loaded from an URL.
How can I get the contains of this JSON file in an object in JavaScript?
This is for example my JSON file located at ../json/main.json:
{"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]}
and i want to use it in my table.js file like this:
for (var i in mainStore)
{
document.write('<tr class="columnHeaders">');
document.write('<td >'+ mainStore[i]['vehicle'] + '</td>');
document.write('<td >'+ mainStore[i]['description'] + '</td>');
document.write('</tr>');
}

Here's an example that doesn't require jQuery:
function loadJSON(path, success, error)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
if (success)
success(JSON.parse(xhr.responseText));
} else {
if (error)
error(xhr);
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
Call it as:
loadJSON('my-file.json',
function(data) { console.log(data); },
function(xhr) { console.error(xhr); }
);

XHR can be used to open files, but then you're basically making it hard on yourself because jQuery makes this a lot easier for you. $.getJSON() makes this so easy to do. I'd rather want to call a single line than trying to get a whole code block working, but that's up to you...
Why i dont want to use jQuery is because the person i am working for doesn't want it because he is afraid of the speed of the script.
If he can't properly profile native VS jQuery, he shouldn't even be programming native code.
Being afraid means he doesn't know what he is doing. If you plan to go for performance, you actually need to know how to see how to make certain pieces of code faster. If you are only just thinking that jQuery is slow, then you are walking into the wrong roads...

JSON has nothing to do with jQuery.
There is nothing wrong with the code you have now.
To store the variable mainStore, it is a variable in that json.
You should store that json to a variable:
var myJSON = {"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]};
var mainStore = myJSON.mainStore;
//.. rest of your code.

I understand that by "reading a json file" you mean making the request to the url that returns json content. If so, then can you explain why you don't want to use jQuery for this purpose? It has $.ajax function that is perfectly suitable for this and covers the browsers' differences.
If you want to read the file then you have to do it server-side, e.g. php and provide it somehow to the dom (there are different methods) so js can use it. Reading file from disk with js is not possible.

function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(xhttp.responseText)
}
};
xhttp.open("GET", "./user.json");
xhttp.send();
}
Naming using the linux filename structure
You can store the responseText to a variable or whatever you want to do with it