Proper Ajax Coding Question

[pmmenneg]

So just getting started with 'ajax' and chaning over a few components on an existing site to use ajax, such as an item where people can rate profile, etc.

Old model:

- people view profile, there is an image representing the profile's '5-star rating' (i.e. one to five stars are lit up).
- they can choose a rating from a dropdown, from one to five, below the image, then click submit.
- form sends rating to php script, it gets existing rating from db, adds this new rating to it to calculate new rating, and redirects the user back top the profile page
- profile page loads, with code on it that goes to db and grabs profile rating, including number of ratings submitted.

New Model:

- people view profile, there is an image representing the profile's '5-star rating' (i.e. one to five stars are lit up).
- they can choose a rating from a dropdown, from one to five, below the image. Upon 'onchange', form is submitted, saving them a button click and allowing me to remove submit button from page (less clutter).
- using jquery, send ajax request to php backend to add rating. change profile page so that existing rating, dropdown are hidden, and a 'Rating being processed...' message appears in it's place.
- in the background rating committed to db, and php script snds back a string of data that the jquery can then process to determine success.
- jquery gets return string, which it parses to determine success. new string also contains html for the new rating image to display. new rating image displayed to user, new umber of ratings is displayed, and a success message displayed.

So, I've saved a page-load, a click and a bunch of time for the end-user, and I am very happy with the results. However, I have a question related to this change and want to be sure I am doing things 'the right way' as I further change the site...

1) Is there a standard, in terms of what the php page sends back to the calling javascript in ajax? For example, my php pages echoes back a string of the form:

[result code (a number)]¦[number of profile ratings]¦[html code for new rating image (so that I don't have to ever update the js code should I change the name of the rating image files, the css formatting, etc)]

This is then parsed as a string by the js. Is this typical, I mean in terms of how the backend page sends data to the calling js? What are you doing in your interactions.. any suggestions for a newbie?

[Gibble]

I usually return an object serialized to json, or xml depending on the situation.

[blang]

Agree. JSON would be ideal in most cases like this, where you have an object containing several attributes you want to make use of. XML is, IMHO, overkill unless you have a pre-existing feed or a need to describe the data in some way. If you just have a single string, just return it as text.

So in your case, you might go one of two ways: either an object literal that stores an array you can iterate through, e.g.

{ "data" : [ x, y, z ] }

..where x, y and z directly represent your data, like returnObj.data[0], etc.

..or an object literal with name : value pairs , e.g.

{ "x" : 1, "y" : 2, "z" : 3 }

..which can be more easily referenced as returnObj.x, etc.

Or a combination, depending on the nature of your data.

[Gibble]

Also, the times XML is useful is when you have a lot of data, and are going to use XSL to convert to HTML. Even though it's more verbose, XSL is faster than looping through a large JSON structure. But other than that, JSON is much simpler to work with.

And btw, JSON stands for JavaScript Object Notation...thus, it's ideal for returning to your javascript front end, as it's the native format.

[blang]

Also, the times XML is useful is when you have a lot of data, and are going to use XSL to convert to HTML. Even though it's more verbose, XSL is faster than looping through a large JSON structure.

Very good point, thanks for mentioning that. Also, if you're using a JS library such as jQuery, it's a snap to find members in XML and parse through them quickly to output what you need.

[pmmenneg]

So, I have modified my php page to echo back JSON, as follows:

{"code":12,"votes":1,"html":"Success!"}

This is being returned to a jquery initiated call, as variable 'data'.

When I alert(data), I see the whole JSONified return value above. When I try to access a specific value using dot notation, i.e. alert(data.code), I get 'undefined' as the response.

Any ideas?

Thanks!

[Gibble]

I presume you returned it as a string containing that text?

ie return '{"code":12,"votes":1,"html":"Success!"}';

You'll need to convert it to an object.

See:
[json.org...]

The quick (and dirty, and insecure) way is to just use:
var data = eval('(' + data + ')');

[pmmenneg]

Perfect, using JSON.parse, works like a charm, thanks!

[blang]

Oh, I'm sorry, I neglected to mention. I assumed you would use jQuery.getJSON() [docs.jquery.com] for that.