Ajax app using CAP -- return JSON or HTML?

[Mark Rajcok]

I'm writing a new CGI app, and decided to go web 2.0 -- i.e., use Ajax
to update parts of the page, trying to never load an entirely new
page.

I'm at a crossroad:
should the CAP-based back-end normally return
  JSON data (and let the javascript library (I've decided on jQuery)
place and format the data on the page),
or should the back-end normally return
  HTML (via html templates), which will be dropped into different, say, <div>s?
(BTW, I'm not considering XML.)

It seems like the road I take will have a signficant impact on
implementation, and maybe maintainability, etc.  so I'd like to go
down the better road, if there is one.

Thinking out loud here... with JSON, I see these advantages:
- the back-end will just return data, not (HTML) document structure
- I can more easily target multiple areas of the page with a single
AJAX call (with jQuery, I don't think it is easy to target multiple
DOM elements if I return HTML)
- it will probably be easier to add visual effects to certain DOM
elements as I'm converting JSON to HTML (vs. hunting through the
returned HTML for specific elements... hmm, that would require changes
to both the back-end and the javascript -- yuck)

With HTML I see these advantages:
- less javascript to write
- the HTML can be put into templates (so the back-end logic is still
pretty much isolated from (HTML) structure), and it may be easier to
manage HTML template files, vs. one large javascript file

Comments?

And maybe it would be appropriate to do both -- sometimes return JSON,
and sometimes HTML.  Any suggested guidelines?

-- Mark

#####  CGI::Application community mailing list  ################
##                                                            ##
##  To unsubscribe, or change your message delivery options,  ##
##  visit:  http://www.erlbaum.net/mailman/listinfo/cgiapp    ##
##                                                            ##
##  Web archive:   http://www.erlbaum.net/pipermail/cgiapp/   ##
##  Wiki:          http://cgiapp.erlbaum.net/                 ##
##                                                            ##
################################################################

[Ron Savage]

Hi Mark

> I'm at a crossroad:
> should the CAP-based back-end normally return
>   JSON data (and let the javascript library (I've decided on jQuery)
> place and format the data on the page),
> or should the back-end normally return
>   HTML (via html templates), which will be dropped into different, say, <div>s?
> (BTW, I'm not considering XML.)

My policy is to put as much code as possible into a single language, so
I'd do the work on the server side.

> It seems like the road I take will have a signficant impact on
> implementation, and maybe maintainability, etc.  so I'd like to go
> down the better road, if there is one.
>
> Thinking out loud here... with JSON, I see these advantages:
> - the back-end will just return data, not (HTML) document structure
> - I can more easily target multiple areas of the page with a single
> AJAX call (with jQuery, I don't think it is easy to target multiple
> DOM elements if I return HTML)
> - it will probably be easier to add visual effects to certain DOM

If you use CSS it presumably would not advantage one way over the other.

> elements as I'm converting JSON to HTML (vs. hunting through the
> returned HTML for specific elements... hmm, that would require changes
> to both the back-end and the javascript -- yuck)

How about listing the disadvantages? Perhaps that will tell you
something.

For instance, a disadvantage of JSON would be the fact you'd have to
ship more code from the server to the client to do the processing on the
client side. Why do that at all?

> With HTML I see these advantages:
> - less javascript to write
> - the HTML can be put into templates (so the back-end logic is still
> pretty much isolated from (HTML) structure), and it may be easier to
> manage HTML template files, vs. one large javascript file

Or to put it slightly differently, 'it may be easier to manage /multiple, small/ HTML template files'.

--
Ron Savage
ron@...
http://savage.net.au/index.html



#####  CGI::Application community mailing list  ################
##                                                            ##
##  To unsubscribe, or change your message delivery options,  ##
##  visit:  http://www.erlbaum.net/mailman/listinfo/cgiapp    ##
##                                                            ##
##  Web archive:   http://www.erlbaum.net/pipermail/cgiapp/   ##
##  Wiki:          http://cgiapp.erlbaum.net/                 ##
##                                                            ##
################################################################

[Stewart Heckenberg]

> I'm at a crossroad:
> should the CAP-based back-end normally return
>  JSON data (and let the javascript library (I've decided on jQuery)
> place and format the data on the page),
> or should the back-end normally return
>  HTML (via html templates), which will be dropped into different, say, <div>s?
> (BTW, I'm not considering XML.)

Depends mostly on what the application you're writing does. One way of
doing it is to write the whole thing sans-ajax, e.g. have a runmode
that returns only a form and another that returns only the results of
that form, and then you can easily convert that to ajax with jQuery by
doing what you suggest above, i.e. loading the form results into a div
(done by using jQuery to catch the form submission and call the
results runmode via ajax). I wouldn't pass the data back as JSON
unless it's some instance where that data is more useful in that
format, e.g. using it with jQuery or some other JavaScript API to do
something funky.

#####  CGI::Application community mailing list  ################
##                                                            ##
##  To unsubscribe, or change your message delivery options,  ##
##  visit:  http://www.erlbaum.net/mailman/listinfo/cgiapp    ##
##                                                            ##
##  Web archive:   http://www.erlbaum.net/pipermail/cgiapp/   ##
##  Wiki:          http://cgiapp.erlbaum.net/                 ##
##                                                            ##
################################################################

[bmckenzie]

Mark Rajcok wrote in an email message dated 5/24/2008 10:11 PM:
> I'm writing a new CGI app, and decided to go web 2.0 -- i.e., use Ajax
> to update parts of the page, trying to never load an entirely new
> page.
>
> Thinking out loud here... with JSON, I see these advantages:
> - the back-end will just return data, not (HTML) document structure
> - I can more easily target multiple areas of the page with a single
> AJAX call (with jQuery, I don't think it is easy to target multiple
> DOM elements if I return HTML)

It is easy. Just turn the html into a jQuery object (a pseudo-Array).
The ajax call should include options like these:

dataType: "html",
success: function(html){
// return from ajax is html because you specified that dataType
    var $myDivs = $(html);
    $('#someDiv').html( $myDivs.eq(0) );
    $('#anotherDiv').replace( $myDivs.eq(1) );
   //etc
}

HTH

Bruce
--
Bruce McKenzie
http://www.2MinuteExplainer.com

#####  CGI::Application community mailing list  ################
##                                                            ##
##  To unsubscribe, or change your message delivery options,  ##
##  visit:  http://www.erlbaum.net/mailman/listinfo/cgiapp    ##
##                                                            ##
##  Web archive:   http://www.erlbaum.net/pipermail/cgiapp/   ##
##  Wiki:          http://cgiapp.erlbaum.net/                 ##
##                                                            ##
################################################################

[bmckenzie]

Bruce McKenzie wrote in an email message dated 5/26/2008 6:48 PM:

> It is easy. Just turn the html into a jQuery object (a pseudo-Array).
> The ajax call should include options like these:
>
> dataType: "html",
> success: function(html){
> // return from ajax is html because you specified that dataType
>    var $myDivs = $(html);
>    $('#someDiv').html( $myDivs.eq(0) );
>    $('#anotherDiv').replace( $myDivs.eq(1) );
>   //etc
> }
>
> HTH
>
> Bruce

er, that won't help because it should be
   $myDivs = $(html).find('div');



--
Bruce McKenzie
Business Information Graphics

212-477-4288
http://www.2MinuteExplainer.com

#####  CGI::Application community mailing list  ################
##                                                            ##
##  To unsubscribe, or change your message delivery options,  ##
##  visit:  http://www.erlbaum.net/mailman/listinfo/cgiapp    ##
##                                                            ##
##  Web archive:   http://www.erlbaum.net/pipermail/cgiapp/   ##
##  Wiki:          http://cgiapp.erlbaum.net/                 ##
##                                                            ##
################################################################