How would I save my Javascript objects with JSON/PHP/Mysql, to re-load them upon user return?

I'm working to create a "sandbox" of sorts, where numerous users will login and create draggable "nodes" on their own "sandbox." I'd love to be able to have the app auto-save after every modification, but first things first--I'm trying to get my Javascript objects stored in MySQL.

I'm new to Javascript, PHP and MySQL, but JSON seems to be my best friend for this task. Here's a rough example of a node:

node1.pos
node1.name
node1.content
node1.siblings

*Note: The actual node will house many more attributes, some with potentially sensitive information.

My goal is to have each node manipulated by the user (dragged, linked to siblings, name change, etc.) and then upon 开发者_开发百科re-visiting the page, the "sandbox" re-populates with the nodes in the correct position, with all the correct data associated with it.

I think I can handle the function that will populate the canvas, but shifting the object between MySQL and Javascript is what confuses me. Will the object having methods cause any problems?

Does anyone have any help, advice or reference material that could help me out?

1. I would recommend you to create a web service which would store any data the user sends. Let's call it http://server.net/store.php.

2. The client would then use JavaScript to serialize to JSON the meaningful data, alongside with some user credential...

   var dataPacket = {
       userCredentials: 77777777, /* whatever is sensible */
       nodes: [ {id: 1, posX: 10, posY: 345 }, {id: 2, posX: 5, posY: 136} ]
   };
   

3. The client would then send the data to the server with jQuery + AJAX...

   $.ajax({
      type: "POST",
      url: "http://server.net/store.php",
      dataType: "json",
      data: dataPacket
    });
   

4. Then, on the server-side the data would be checked for valid user credentials and then it could proceed to save, in some kind of database, the JSON encoded data which was received, which is in fact just a plain string.

5. Create a web service which would read from the database and return any previously stored data. Let's call it http://server.net/load.php.

6. When the user needs to load what he was doing previously the client would use JavaScript to ask for the data...

   $.ajax({
      type: "POST",
      url: "http://server.net/load.php",
      dataType: "json",
      data: {
          userCredentials: 77777777, /* whatever is sensible */
      }
      success: function(dataPacket) {
         /* process the received dataPacket */
      }
    });
   

Note that the code depends on jQuery and is provided just as an example, and I haven't actually tested it.

See also:

• jQuery Tutorials
• jQuery AJAX documentation
• JSON parsers and documentation (in case you want to process the dataPacket before storing/retrieving it from the DB)

Hope this helps.

God bless!

A suggestion off the top of my head:

Save edits on the fly:

Create a PHP page that does nothing but accept POST requests from a user (you'll obviously want to have some form of authentication in place so that randoms can't just hit the page with random data, but that's another matter). This page will solely be responsible for accepting AJAX requests from a user.

Create your sandbox page using something like jQuery's UI library (especially if you're new, use something pre-written, don't try to write your own). This will be a PHP page that will simply load whatever values have been already stored in the database by your the AJAX handling page. Using jQuery's drag and drop methods, you can detect whenever an element has been moved. On move end, you'd use jQuery's .ajax functionality to send the element and coordinates to the ajax handling page.

Next time the user logs in, it would be trivial to add/position the elements as required.