rnd me
07-03-2008, 11:10 PM
Loading and Saving Files with browser javascript
Most of the ajax examples I've come across are complicated and use a two-step asynchronous process to fetch data.
new users get lost in the status checking and callback writing, and simply want to load a text file like a csv log file, an m3u playlist, or a css stylesheet into a variable.
browser javascript can use standard http methods like
GET, PUT, and DELETE (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html) to create, modify, and manage files on a remote server.
Setup:
for reading:
no setup is required to simply read a file into a string. while i have found way to sniff out ajax-type requests like used below, i haven't noticed anyone doing so.
for writing
The only configuration needed on the server, is the allowance of public or user-based write permissions. check configuration section of your hosting providers. most allow you to setup public read-private write on files. that's great because everyone can instantly see the changes only you can make.
browsers should automatically ask you to login if you try to write to a file that has private write. Assigning the permissions to the urls you will use in this code is a critical security consideration.
setup can be done with winxp pro's iis server by right-clicking a folder in the IIS web site folder-view. (run compmgmt.msc to view)
if you use apache, then you will need a bit of server-side code called a
put handler (http://httpd.apache.org/docs/1.3/misc/FAQ.html#putsupporthttp://) to catch the PUT requests. (module here (http://hpwww.ec-lyon.fr/~vincent/apache/mod_put.html))
however, many apache installations have these capabilities ready to go.
the IO function:
function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;}
arguments[0] is the url (relative or absolute) of the file you want to access.
arguments[1] is an optional string .
if arguments[1] is set to anything, IO places that string into the url passed in arguments[0]
A tested cut-and-paste example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript-only file writing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>javascript fileIO demo</h1>
open <a href='newPage.htm' target="_blank">my new page</a> in a new tab/window.
<br />
<br />
<textarea rows='10' cols='80' id='userValue'>Hello World</textarea>
<br />
<input type='button' value='Save' onclick="doSave()" />
<input type='button' value='Load' onclick="doLoad()" />
<script type='text/javascript'>
function el(tid) {return document.getElementById(tid);}
function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;}
function doSave(){
IO("newPage.htm" , el("userValue").value );
}
function doLoad(){
el("userValue").value = IO("newPage.htm");
}
</script>
</body>
</html>
So will this work for me?
working servers support GET, so consider IO's read capability reliable.
you can check what methods your server supports by saving the code below as "servertest.htm" (or whatever) and opening it your browser.
it will list the HTTP verbs your server will support. for saving files, you need PUT.
<html><head><script>
function sOptions(tUrl) { //server options
var XHRt = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
XHRt.open("OPTIONS", tUrl , false);
XHRt.send("");
return XHRt.getResponseHeader("Allow").split(/\W+/g);
}
document.write (sOptions(window.location.href));
document.close()
</script></head</html>
One more bonus (no example)
if you are allowed to do so, you can delete files as well:
function DELETE(U) {//LA MOD A tiny ajax library. (c)2007, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open("DELETE");
X.send('');
return X.status;}
Most of the ajax examples I've come across are complicated and use a two-step asynchronous process to fetch data.
new users get lost in the status checking and callback writing, and simply want to load a text file like a csv log file, an m3u playlist, or a css stylesheet into a variable.
browser javascript can use standard http methods like
GET, PUT, and DELETE (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html) to create, modify, and manage files on a remote server.
Setup:
for reading:
no setup is required to simply read a file into a string. while i have found way to sniff out ajax-type requests like used below, i haven't noticed anyone doing so.
for writing
The only configuration needed on the server, is the allowance of public or user-based write permissions. check configuration section of your hosting providers. most allow you to setup public read-private write on files. that's great because everyone can instantly see the changes only you can make.
browsers should automatically ask you to login if you try to write to a file that has private write. Assigning the permissions to the urls you will use in this code is a critical security consideration.
setup can be done with winxp pro's iis server by right-clicking a folder in the IIS web site folder-view. (run compmgmt.msc to view)
if you use apache, then you will need a bit of server-side code called a
put handler (http://httpd.apache.org/docs/1.3/misc/FAQ.html#putsupporthttp://) to catch the PUT requests. (module here (http://hpwww.ec-lyon.fr/~vincent/apache/mod_put.html))
however, many apache installations have these capabilities ready to go.
the IO function:
function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;}
arguments[0] is the url (relative or absolute) of the file you want to access.
arguments[1] is an optional string .
if arguments[1] is set to anything, IO places that string into the url passed in arguments[0]
A tested cut-and-paste example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript-only file writing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>javascript fileIO demo</h1>
open <a href='newPage.htm' target="_blank">my new page</a> in a new tab/window.
<br />
<br />
<textarea rows='10' cols='80' id='userValue'>Hello World</textarea>
<br />
<input type='button' value='Save' onclick="doSave()" />
<input type='button' value='Load' onclick="doLoad()" />
<script type='text/javascript'>
function el(tid) {return document.getElementById(tid);}
function IO(U, V) {//LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html')
X.send(V ? V : '');
return X.responseText;}
function doSave(){
IO("newPage.htm" , el("userValue").value );
}
function doLoad(){
el("userValue").value = IO("newPage.htm");
}
</script>
</body>
</html>
So will this work for me?
working servers support GET, so consider IO's read capability reliable.
you can check what methods your server supports by saving the code below as "servertest.htm" (or whatever) and opening it your browser.
it will list the HTTP verbs your server will support. for saving files, you need PUT.
<html><head><script>
function sOptions(tUrl) { //server options
var XHRt = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
XHRt.open("OPTIONS", tUrl , false);
XHRt.send("");
return XHRt.getResponseHeader("Allow").split(/\W+/g);
}
document.write (sOptions(window.location.href));
document.close()
</script></head</html>
One more bonus (no example)
if you are allowed to do so, you can delete files as well:
function DELETE(U) {//LA MOD A tiny ajax library. (c)2007, DanDavis
var X = !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
X.open("DELETE");
X.send('');
return X.status;}