AJAX-使用JSON与echo HTML

I have the below ajax call.

jQuery.post('index.php',{
                        'option'    : 'com_one',
                        'controller': 'product',
                        'task'  : 'loadColors',
                        'format'    : 'raw',            
                        'design_id' : design_id,
                        'collar_id' : collar_id                        
                }).success(function(result) { 
                    jQuery('div#color_wrapper').html(result); 
                }).error(function() { 
                    jQuery('div#color_wrapper').html('<h1>ERROR WHILE LOADING COLORS</h1>');
                });

Method 1 It returns large set of HTML. Then those are assigned to the div#color_wrapper. What I do here is echo all the HTML I want in the model.php.

Method 2 I just got to know that I can get the data as a JSON object and render them inside the page using a JavaScript template.(handlebarsjs).

As far I understand It's client side processing(Method 2)vs server side processing(Method 1).

My problem is which method is faster? Which method is the industry standard? Are there any pros and cons of these two methods? What method should I use and Why?

Thanks

I think the JSON method is better, since there's less data to transfer for consecutive requests.

If you're really that conscious about performance, you should precompile your templates.

Additionally, if you precompile your templates, you don't even have to send handlebars.js to the client. You can send a much smaller handlebars.runtime.js to the browser, further decreasing load time!

JSON is definetly better, especially if you use an MVC framework like Google's AngularJS. Ideally, you should only have to load data once.

I don't know that "industry standard" is necessarily the best way to judge such a thing. I would guess that your typical developer has no idea what handlebars.js even is, and would just load HTML into the div as you are currently doing.

You would have to test which method is faster. Obviously using JSON would make the request faster and require less bandwidth, thus being better for server performance, but overall time to execute the insertion of final HTML into the document would have to be something that you test.

If I was going to do doing a lot of AJAX calls, and could utilize a templating system like handlebars, and was worried about server performance and bandwidth, I would lean towards the JSON approach.

If I just needed a one-off AJAX call and just needed something quick and dirty and was dealing with a low traffic site, I would probably just do the HTML response.

I prefere to use the second method.

The processing time is generally not important, either server-side or client-side.

In contrast, bandwith are an important factor which make website viewer pleasant or not. Sending a heavy HTML response, especially when it's repeated, forces users to wait each time if they have not a good internet connection.

it's the time to wait which encourages users to quit the webpage.