Actual changing of XML file in Javascript / AJAX - javascript

since days I have been searching for answers but couldn't get what I am searching for.
I program a realtime webapp using Javascript and HTML5. For saving game stats I wanted to use a XML-file, that holds all the levelpoints and the achievements and lies locally within the same folder as the html.
So I found out, how to read out the values stored in the XML-file with an XMLHttpRequest. The problem is, that I can only change the node values client-sided, so if I empty the cache or simply reload the page, the XML does hold the original values.
To save the XML server-side is what I want. I hope, you can help me :)
Thanks in advanced!

You can use XMLHttpRequest (an AJAX request) to send the updated XML to the server and then have a server side script (using a server side language such as PHP for example) which will replace the contents of the XML file on the server.
Here's for example how you could send the XML to the server:
var xhr = new XMLHttpRequest();
xhr.open('POST', '/some_script', true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(this.responseText);
}
};
var xml = '<foo>Bar</foo>';
xhr.send(xml);

The apps that save game stats, store the data locally on the client. They don't post on to the server. If they are, then they would need internet connectivity and post data to the game server. where again there would be a PHP page or a servlet to handle data.
For client side storage, HTML5 has options. Please check the below link
http://diveintohtml5.info/storage.html

Related

How to push data to external JSON file (Using jQuery)?

I want to push an data to array in external local JSON file using jQuery.
So any ideas?
I have tried this:
$.getJSON('test.json', function(data) {
data.push('Something');
});
And it wont be pushed into local JSON file
You can do this in JavaScript with node.js (or a multitude of other languages/platforms) but not with a browser & jQuery.
Here's how to read and write a json file in node.js
On the other hand, users could upload a JSON file to your server, where you modify the structure and send them a modified JSON file back as a download.
Is not possible to write files using Javascript (can cause security problems through xss, csrf ..)
No, JavaScript doesn't have access to writing files as this would be a huge
security risk to say the least. If you wanted to get/store information server-
side, though, you can certainly make an Ajax call to a PHP/ASP/Python/etc.
script that can then get/store the data in the server. If you meant store data
on the client machine, this is impossible with JavaScript alone. I suspect
Flash/Java may be able to, but I am not sure.
If you are only trying to store a small amount of information for an
unreliable
period of time regarding a specific user, I think you want cookies. I am not
sure from your question what you are trying to accomplish, though.
Read/write to file using jQuery
You cannot access the files in a local client's machine. May be for development setup you can do it. But before you need to restart the browser with file-access flag set.
You can see my answer here that describes the opening browser setup with the flag set.
Then, you can use the following code to read the data.
var data = [];
var url = "/Users/Vignesh/Desktop/test.json";
var req = new XMLHttpRequest();
req.open("GET",url,true);
req.onreadystatechange=function(){
if(req.readyState === 4)
{
data = JSON.parse(req.responseText);
}
};
req.send();
To write into the file you may look into this. (Not sure it is working or not)

Sending an image to a online storage/database using XHR

I've been through a few similar posts here, but cannot seem to find what I need.
I have a web application (HTML5 and Javascript), which has a picture taking function and I need it to then send it to some form of storage or database (preferably something like .json). I am quite new to web development so I am not very familiar with how exactly this would work.
So far I have the following code, which takes the picture and sends it using XHR.
<input id="objPic" type="file" accept="image/*" capture="camera">
<script>
var newImage = document.getElementById('objPic');
function sendPic()
{
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/path', true);
xhr.send(file);
}
myInput.addEventListener('change', sendPic, false);
</script>
My Question is about how/where to send it (what do I put as a path)? What is the best way to store the images?
My webpage is using github as a host (if that is relevant in any way).
Unfortunately this is not really easy. As you said you need to access some form of storage, and GitHub Pages (I imagine that's what you use) doesn't provide that. Depending on your needs I see two ways forward:
If you only need to store the image for the user who uploads it, you could save it directly in his browser using localstorage.
If you need to access the images of all users, you could use a javascript API of a third-party storage provider, like Google Cloud Storage. This is an example that can get you started.

XMLHttpRequest() post does not appear as file on server

As far as my limited understanding goes, this function should create a file on the server containing the text string returned by the function NewFileToSave():
function SaveDay()
{
var toSend = NewFileToSave();
var xhr = new XMLHttpRequest();
xhr.open('POST', 'postTest.dat', true);
xhr.onload =
function(e)
{
if (this.status == 200)
{
alert("Sent");
}
};
xhr.send(toSend);
alert(toSend);
}
When it runs (in Chrome, with no complaints from Chrome's Javascript console) the final alert gives me my text string as expected, and then the alert in the onload function tells me it's been sent, also as expected. But I get no server file called postTest.dat in the folder at the URL from which the HTML page containing the script was loaded into Chrome (or anywhere else on the server as far as a file search can tell).
Can someone please tell me how silly I am being?
That makes a POST request to the server with whatever the return value of NewFileToSave() is as the body of the request. (Since the file doesn't exist already, you'll probably get a 404 Not Found response).
If you want to create a file on the server, then you need the server to run a program that will read that data and use it to create a file (and you probably want to be using a PUT request instead of a POST request, to specify the Content-Type request header, and to add some kind of authentication/authorisation layer to the system).
The specifics of how you might go about that depend on which HTTP server you are using and your programming language preferences.
An arbitrary POST request to an arbitrary HTTP server won't create an arbitrary file. That would be a huge security hole.

what's needed in asp file for xmlhttp request to save data to a database

I need to use JavaScript to send data to be stored in a database. Having looked around on-line I think the best way was to use a xmlhttp request to send data to an asp file.
Below is the script I've got to send to 'Receiver.asp'.
Searching the web hasn't helped me uncover the code I need in Receiver.asp.
function postToASP(name, time) {
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var UrlToSend = "Receiver.asp?" +"n=" + name + "t=" + time ;
xmlhttp.open("GET", UrlToSend, false);
xmlhttp.send();
}
Thanks for any help.
Some additional info if needed:
the majority of my code is written in processing
the above js script and the .asp file will be stored in same folder as sketch
eventually i intend to run on a xampp server
First of all, I'm assuming that that's supposed to be client side JavaScript and that it works.
You say you want to use XAMPP. Forget it. Classic ASP is proprietary Microsoft technology which will only run on IIS.
What Receiver.asp has to do is quite simple. First it has to use the request object to retrieve the data it has been sent. (I'm using VBScript as my scripting language because it's what I'm used to, you can use Javascript if you prefer
dim time, name
time = Request.Querystring("t")
name = Request.Querystring("n")
If you were using the post method then you would use Request.Form() Alternatively Request() works for both get and post methods.
Then it's a standard database insert. It doesn't matter if the data is sent in a querystring, in an html form or by an ajax call, the server side code is pretty much the same. Here's a simple tutorial, you should find plenty more if you google
http://www.codefixer.com/tutorials/form_to_database.asp
You haven't said what sort of database you want to write to. You'll need the relevant connection string. Here's a very useful resource with an easy to remember url.
http://www.connectionstrings.com/

send predefined data to browser local storage with .crx

I am building my first chrome extension, for that I want to have some predefined data at client browser.
I want that data be able to be edited by user by means of extension and save back the changes.
I first thought of using HTML5 local database or Indexed Database APIfor this.(Am I doing right?)
But I don't know how can I send this local database to client place in .crx..because the database will be with browser rather than extension.
How can I send data to client side browser by .crx and save the data on browser?
(I know its not right to save data on browser, but I can't save data back if I save data along with extension)
What other way I can use to implement the requirement?
can I use the same method if I want to use Indexed Database API instead?
My data is not simple key value pair but table kind of data.
I don't have any code for data access part, because I want to be sure before I can proceed
No, You can't send database file with ctx file. Simply You can't replace it on client side.
Actually you have two options:
1) save predefined data into your extension (in any extension file. save whole query or data as JSON) and after first run exec those query to local Database.
2) create web service from where you will get predefined data and save it to local DB.
For example (data.json):
[{"name":"name", "desc":"desc","some_column":"some value"},{"name":"name", "desc":"desc","some_column":"some value"}, ...]
In background.html:
var xhr = new XMLHttpRequest();
xhr.open('GET', chrome.extension.getURL('data.json'), false);
var dataStr = xhr.send(); //don't do this way. use asynch api :)
var data = JSON.parse(dataStr);
//connect to local database
for(var _item in data){
//create query to insert data into DB
//and exequte query
}

Categories