Reading in from an external file in javascript

[Tesset]

Over the past few months, I have been working on updating my tumblr blog's theme. The blog is a writing blog, and one of the important things I wanted to do with it was have the stories/poems I put up be readable in a "book" format, where the text would be read in from an external file and then converted into pages which the reader could then read through, turning pages as necessary, etc. etc.

 

As a preface for this, the only HTML and javascript I've ever worked with have been for this project, so I don't know a whole lot. In particular, my javascript skills are not really up to the thing I'm trying to do, but I've found that the only way I'm willing to learn a coding language is if I actually have a project or a goal to work towards with it. So I just jumped in.

 

My question is twofold. First, I am wondering about my code:

 

window.onload = function storybook(){
   var leftwrite=toArrayFromFile();
   var rightwrite="Pull right page from external file.";
   document.getElementById("left").innerHTML=leftwrite;
   document.getElementById("right").innerHTML=rightwrite;
   return;
}

function toArrayFromFile(){
var filePath ="https://dl-web.dropbox.com/get/To%20Read.txt?w=AADEw2vKPnayknuLZoalIWplbQqpCe0pv1WqMcmHLsuZKQ";
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",filePath,false);
xmlhttp.send(null);
var fileContent = xmlhttp.responseText;
var fileArray = fileContent.split('\n');
return fileArray;
}

 

The toArrayFromFile function is something I found on the internet - I don't know how it works exactly, but what it's supposed to do is read in the file from filePath and convert it into an array at the line breaks. My question is, will this do what I want? If it will, can you explain how, or link to documentation for the XMLHttpRequest class/API/whatever it's called in JS? If not, how should I be doing this?

 

My second question is what I asked in the today thread. To give a bit more of an explanation of what the problem is: tumblr does not allow you to upload assets to your site/blog. With a few exceptions, if you want something like a custom reblog button image, you have to upload the files yourself, on an external site, or post them as an image post on your blog. There's no way to give files to the tumblr server otherwise. I was fine with images - I just uploaded them to my imageshack account and used them that way. The problem comes when I try to upload the text files containing my stories.

 

I can't upload them to my own site, so I tried looking at things like Dropbox and (at others' suggestions) pastebin and Google Drive, but nothing I have found works - either it doesn't have the option, it doesn't have a link to the raw data, or it gives me a security error when I try to access it from the toArrayFromFile function. Looking at these:

 

If you want your javascript code to be accessible as an embedded script on another website you'll want to actually use a hosting service (like stev suggested) or you could try some kind of open source software repository like google code or github.

 

I'm not entirely sure 000webhost is what I want, and I'm a little lost trying to navigate github (though, I'll look at it again tomorrow because maybe I'm just being dumb who knows).

 

Otherwise, I'm not sure what to do for this problem.

 

Once I have these two things out of the way, I'm fairly confident that I can get everything up and running on my own - I worked out a solution to this problem in java a few months back as practice for a class, so I am pretty sure I know what to do from here. But I need to get this figured out first.

[Stev]

Dibs! Add me on Skype: Stev.Zany. I'll get you hooked up. :).

 

JavaScript will only retrieve information from the same domain. You'll have to use a PHP script as a type of proxy type thing, but we can discuss that on Skype. :P.

[Markup]

The toArrayFromFile uses a method named AJAX https://developer.mo..._XMLHttpRequest

Web requests are subject to cross-site restrictions.

Cross-site restrictions can be disabled but only the server system operator can change that. Find a host that allows this.

Cross-site restrictions can be bypassed by using a server side proxy script which resides on the same site. I don't think tumblr allows users to upload php files so this isn't possible.

 

Use http://imgur.com/ instead of imageshack

 

Dropbox is suppose to be for private sharing. If you reach a certain limit it'll be disabled.

 

I can set you up with an unrestricted cross-site access on my server and ftp upload if you want.

 

Simple example using CORS:

 

"http://example.com/xsite.php"

<?php
header("Access-Control-Allow-Origin: *");
print "test"
?>

 

 

"http://content.host/index.html"

<!DOCTYPE html>
<html>
<head>
<script>
function doreq()
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/xsite.php", true);
xhr.onreadystatechange = function(){
 if(xhr.readyState == 4 && xhr.status == 200)
	 document.getElementById('lol').innerHTML = xhr.responseText;
};
xhr.send(null);
}
</script>
</head>
<body>
<div id="lol">
 a
</div>
<button onclick="doreq();">press</button>
</body>
</html>

 

https://developer.mo...r_compatibility

 

Firefox&Chrome&IE10 support CORS. IE 8/9 support it via XDomainRequest not XMLHttpRequest. Best to use jQuery because it'll do automatic detection and select the right method. (may need $.support.cors = true)

 

Via .htaccess

Header set Access-Control-Allow-Origin "*"

[Tesset]

Yeah, I'm not going to be able to get to this until this weekend at least. Thanks for your help though guys, that explained something I would have taken forever to figure out.