AJAX Need To Update Multiple Values

[spacepir]

Hey, I've recently started developing an online game, and I'm getting on pretty well. To prevent the page from reloading all the time, which is very annoying, I decided to use AJAX to update all the values on screen, whenever the user performs an action.

I use a table to display all the users "materials" and how much of each material they have. I'd like to update these individually, but I can't figure out how to do this. Do I assign the returned text into separate variables, or do I secretly update the whole page as one, re-writing the entire contents of the main div? If I re-wrote everything, I'm sure it would freeze for a second, wouldn't it?

So, if refreshing the entire div isn't a good idea (please answer ), how would I get the values from the database, to the place where it should be on screen?

Many thanks,

~XxDarthDexterxX

 

[essellar]

Exactly how you'd go about it really depends on the format of the return value from the server (is it plain text, XML or JSON) and the structure of your HTML.

If you're dealing with plain text or with an HTML document fragment, it may be quicker and easier to update the entire table at one go. You shouldn't see much of a "flash" or "freeze" unless the table is huge or deeply nested; that was mostly a problem in IE6 and the first couple of major Firefox releases (which hadn't yet been given innerHTML to play with). That also means, though, that the user won't get much of an indication that something has been updated (particularly if the update is happening off-screen, in an area they'd need to scroll to see). To get anything different, you'd need to parse the return into bite-sized data chunks first.

JSON and XML come "pre-chunked", if you will. JSON merely needs to be evaluated to turn into a JavaScript object, while XML can be treated as DOM objects. Either way, the parsing can be pretty much done for you, so you can easily see what needs to be updated, added or deleted in the table. You can also give the user a separate indication of the changes if that's appropriate (a "yellow fade" or a pop-up news ticker are popular notification methods). Sticking something into the middle of a table can have a greater effect on the UI as things are re-rendered than swapping out the whole table in one go; it depends how complex the table is, and whether it depends on any of its content to control column widths, etc. Putting things into a notification area and animating that can be expensive as well, though CSS transitions will have a lot less of an effect than their older JS counterparts (which set a timeOut in the JS runtime's single thread and would interfere with other time-sensitive JS processing).

 

[spacepir]

Hmm. I've never worked with XML or JSON before, but they sound much better than updating the entire page.

Because I've never worked with it before, I don't know the difference between a bad tutorial, and a good one. You wouldn't happen to have any links on hand, would you?

 

[essellar]

If you haven't got anything going yet, forget about XML — it's just way too verbose for what it gives you (that is, there's a lot of text that doesn't add enough to the conversation to justify transmitting it, and you'd need to parse that text into something useful before you can use it). That leaves JSON.

Luckily, JSON is the brainchild of Douglas Crockford (he developed it as a technique while doing most of the good parts of Yahoo!'s JavaScript stuff), and he's probably the most vocal advocate for sane JavaScript. When a few sad people complained that JSON wasn't a standard, he founded JSON.org to remedy that little oversight. JSON.org is a very good place to start learning. And jQuery has a good JSON library if you want to avoid some of the pitfalls of cross-browser development. Because JSON (JavaScript Object Notation) is JavaScript, it's easy to get the data out at the browser side, and it's really pretty easy to build the data at the server side as well.