Develop Reference

audio file and json file reading methods difference in javascript

I find difficult to understand one methodological thing about javascript coding.
When in a script I want to read an audio file, I do it like this:
var audio = new Audio('theme.mp3');
audio.play();
It is simple, clear and works dynamically: I have an access to a file system from the site (is it true?).
But if I'd like to read a json file, which is substantially a text file, I have to write an AJAX request:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
//code
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
And also using jQuery we see the same but shorten thing.
Could you explain me, why I can read all the graphics, audio files etc, but to upload JSON file I have to do that request? How does this kind of communication between client and server work? Where is a difference? Why I can't just read the text file, like I did it above with theme.mp3?
Thank you so much.
UPDATE:
The most important thing: when I read the audio file as above, the script is working nicely even if I open the html file from the computer. At the same time the loading of JSON file doesn't work until the page is opened from the localhost. (I'm sorry if I use incorrect terms).
"Help me StackOverflow, you are the my last hope."

Load a 'server-side' file with XMLHttpRequest in local html file

I want to load a json-stringified file in my javascript. The javascript reside in a html-file which I load from my local file system.
I have tried with the following code:
var xhr = new XMLHttpRequest();
xhr.open('GET', fileName, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// get binary data as a response
var blob = this.response;
alert("Yo");
}
};
But the onload event fires only once, with the status=0, then no more happens.
I have tried to use both a full path to the file as well as a local file path like "/files/the_file.txt".
It looks like the problem is related with me trying to run the html file locally. I don't want to set-up a local server as I have seen proposed in similar posts here at so.
Anyone out there with a solution to this problem?
EDIT:
This is not what I want, but this might serve to give an example of how I almost want it. This example let the user select a file, and my script can now access the content of the selected file.
HTML:
<input type="file" id="FancyInputField" onchange="doIt();">
Javascript:
function doIt(){
var selectedFile = document.getElementById('FancyInputField').files[0];
reader = new FileReader();
reader.onload = function (e) {
var output = reader.result;
var daObject = JSON.parse(output);
}
reader.readAsText(selectedFile);
}
This also works with a local html file. (No local server)
My question stands; How do I read the file(s) with no user interaction? The files reside in a sub-folder to where the html file are located. I can with no problem load and show an image from the same sub-folder, with an <img> tag. ..So why is it so difficult to load a text file?

How do I read the file(s) with no user interaction?
You can't. Those files belong to the user, not your website. You can't choose to read them.
I can with no problem load and show an image from the same sub-folder, with an <img> tag
There is a lot of difference between displaying an image to the user, and making the content of a file available to JavaScript code written by the page author.
So why is it so difficult to load a text file?
Send someone an HTML document in an email
Enjoy the JavaScript in it scooping up files from the hard disk and sending them to Joe Evil Hacker's server
It's just basic security.

Use URL.createObjectURL(file), instead of ajax.

Read directory contents using Javascript locally

I have a standard folder structure for a web app.
css
js
img
asetts
lib
index.html
Inside my assets folder I have a bunch of plain text files and I would like to first be able to list the filenames using Javascript, so I can store the URI's in the model, and read from them later on the in the application. I want all of this happening client side.

(Client-side) JavaScript does not have access to the file system like that.
This is not possible without some kind of browser plugin.

You can read the textfiles in the local folder.
function read()
{
var xHR = new XMLHttpRequest();
//replace textfile_url with the relative url of your text file
xHR.open("GET", "textfile_url", true);
xHR.onreadystatechange = function ()
{
if(xHR.readyState === 4)
{
//all your text is in the next line
var text = xHR.responseText;
}
}
xHR.send();
}

load json from external file

I've never touched on JSON, but I just need some bits clearing up so that I can research how to solve my problem properly.
I have
-HTML file
-JS file
-JSON file.
All are linked in the html file.
My challenge is to load the JSON file and add together some of the values that are located within it.
So far I'm struggling to find anything other than JQuery to open it... I can find things about parsing, but many examples use code inline and i'm lost as to whether they're coding on the js file or the JSON one!
I'm seeing AJAX mentioned too, but i plead ignorance to its use so far (i'm very new to JS).
so, what would you recommend to load it?
what should i research to see about obtaining the values and creating additions with them?

Loading a JSON file:
jQuery:
$.getJSON('/my/url', function(data) {
console.log(data);
});
Non-jQuery:
request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400){
// Success!
var data = JSON.parse(request.responseText);
console.log(data);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
note the console.log prints the contents of the JSON file to the javascript console. You can do whatever you want with the "data" variable.

Access Gmail attachment from a chrome extension?

Hi I am trying to write a chrome extension which needs to read in an email attachment (plain txt). I feel this should be possible as gmail gives you a download link, however it is not a direct link does this make it impossible?
I have the following code to read a remote file which works just not for gmail:
<script>
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://remote.com/remote_file", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
lines = txtFile.responseText.split("\n"); // Will separate each line into an array
alert(allText)
}
}
}
txtFile.send(null);
</script>
Does anybody know how I can read a gmail attachment like this?
thanks

Gmail has a link to original email source ("Show Original" from the menu). Not sure if it is possible to read it programmatically, but if it is, I would try to parse original message source instead and get attachments from there (they are base64 encoded I beleive).