jls33fsls
asked on
Fastest/Best Method of Parsing Data with AJAX
I made an AJAX/php/mysql poker game around 3 years ago. I had never done anything with AJAX before, so I was pretty much making it up as I went along. I am now looking to improve this application to take it to a larger scale, and looking for some best practices input.
Current the way I have it setup, is that every 2 seconds I make a call to a script that prints a bunch of data, seprated with "~!@#~" (I know this probably sounds moronic), and I then split this data when it is returned to the javascript and update what the user sees. I am looking for a better way of doing this (or if this actually is the best way...which I find hard to believe...then great!). Whether that is doing it with XML, JSON, etc I am not sure. Or if I am thinking through this completely wrong that would be great to know. Any references or examples would be great as well.
Current the way I have it setup, is that every 2 seconds I make a call to a script that prints a bunch of data, seprated with "~!@#~" (I know this probably sounds moronic), and I then split this data when it is returned to the javascript and update what the user sees. I am looking for a better way of doing this (or if this actually is the best way...which I find hard to believe...then great!). Whether that is doing it with XML, JSON, etc I am not sure. Or if I am thinking through this completely wrong that would be great to know. Any references or examples would be great as well.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
RQuadling: not questioning your answer - but why use jsonp when the request isn't cross domain? just curious...
ASKER
Thank you for the great answer, though I am wondering if this would actually be faster than what I am already doing. It seems like this would increase the data size, can JavaScript parse JSONP faster, or?
The code is in several parts.
Specific JS <-> Generic JS <-> Generic PHP <-> Specific PHP
JSONP allows my to code the specific ends without the generic bits caring.
The code I supplied is actually quite old. The whole AJAX code is now part of a generic AjaxJsonpUpdator call within the Generic JS.
I know I could have added onSuccess responders to the AJAX request, but I wanted to keep the actual data handler function within the Specific layer and not the generic layer.
The cross domain issue wasn't/isn't part of the concern.
Essentially, I hardly touch the GenericJS/PHP part.
I create Specific JS/CSS/HTML/PHP parts and drop them on the server and they then auto-magically incorporate themselves into the site due to the way my Generic JS/CSS/HTML/PHP parts work.
Specific JS <-> Generic JS <-> Generic PHP <-> Specific PHP
JSONP allows my to code the specific ends without the generic bits caring.
The code I supplied is actually quite old. The whole AJAX code is now part of a generic AjaxJsonpUpdator call within the Generic JS.
I know I could have added onSuccess responders to the AJAX request, but I wanted to keep the actual data handler function within the Specific layer and not the generic layer.
The cross domain issue wasn't/isn't part of the concern.
Essentially, I hardly touch the GenericJS/PHP part.
I create Specific JS/CSS/HTML/PHP parts and drop them on the server and they then auto-magically incorporate themselves into the site due to the way my Generic JS/CSS/HTML/PHP parts work.
JSON IS Javascript. No need to manually decode the string.
It IS javascript.
JSONP is a "pattern", a way of doing something.
By using the correct headers, the AJAX code simply runs a JS function, supplying a JS object as the parameter.
No deconstructing of a string into parts for processing. Well, at least not in the userland aspects of the JS. Sure, it does this internally, but that is no different to it reading the JS code you created.
Hmm..
Not very well explained.
Using the first 2 snippets I supplied, the JS code looks like this ...
updateUser({"userName":"Ri
That is what PHP generated.
It is pure javascript.
The parameter to the updateUser() function is usable instantly. No need to break it apart into bits. You also know what bits have been supplied as it is a hash.
Oh.
If you use this, make sure you use json_encode($a_Data, JSON_FORCE_OBJECT); as an empty array ends up as something different in JSON.
See example 2 on http://docs.php.net/json_encode
It IS javascript.
JSONP is a "pattern", a way of doing something.
By using the correct headers, the AJAX code simply runs a JS function, supplying a JS object as the parameter.
No deconstructing of a string into parts for processing. Well, at least not in the userland aspects of the JS. Sure, it does this internally, but that is no different to it reading the JS code you created.
Hmm..
Not very well explained.
Using the first 2 snippets I supplied, the JS code looks like this ...
updateUser({"userName":"Ri
That is what PHP generated.
It is pure javascript.
The parameter to the updateUser() function is usable instantly. No need to break it apart into bits. You also know what bits have been supplied as it is a hash.
Oh.
If you use this, make sure you use json_encode($a_Data, JSON_FORCE_OBJECT); as an empty array ends up as something different in JSON.
See example 2 on http://docs.php.net/json_encode
ASKER
Okay this is making a little more sense. I still don't get how I would do something as simple as updating the innerHTML of a div element with this method.
$('some_div_ID').update('s
$('some_div_ID').update(o_
$('some_div_ID').update(o_
See the first snippet.
ASKER
So you really don't need an onSuccess function doing this since what the AJAX calls is javascript that does the update itself?
More or less.
ASKER
Okay so I tested this out at http://pokerrpg.com/test3.php. Can I just use that basic format and have PHP output all of the functions needed and pass it all back to run and update? Also, did I do anything wrong there even though it works?
That's pretty much it.
Well done.
Well done.
Sure it requires JS, but the code is added unobtrusively so if there is no js available, the standard way is used and that involves page refreshes.
What I've shown above are elements from one of the frameworks I've built. Hopefully it'll make sense.