HTML Markup in PHP vs Javascript - php

Question

I've been doing a lot of things that include making AJAX requests to get information from the backend of my site when i had an interesting question. Is it better to do the html styling in php, then send to the client, or is it better to send the data as json and then style in javascript?
Since this question is kind of vauge i'll give an example:
<?php
$data = array();
$data[0] = array("username" => "Supericy", "content" => "just a sample message 1");
$data[1] = array("username" => "Supericy", "content" => "just a sample message 2");
$data[2] = array("username" => "Supericy", "content" => "just a sample message 3");
// etc...
// now this is the choice:
if ($json)
{
return json_encode($data);
}
else
{
// or
$returnString = "";
for (...)
{
$returnString .= '<div class="username">' . $data[i]["username"] . '</div>';
$returnString .= '<div class="content">' . $data[i]["content"] . '</div>';
}
return $returnString;
}
?>
And then in my javascript:
// get the information as raw json
var data = ajax_request(json = true);
var author = document.createElement('div');
author.className = "author";
author.innerHTML = data[i]["username"];
var content = document.createElement('div');
content.className = "content";
content.innerHTML = data[i]["content"];
body.appendChild(author);
body.appendChild(content);
// -- OR --
// get the information as pre-formated html
var data = ajax_request(json = false);
body.innerHTML += data;

Answer 1

As other users have stated, it depends greatly on who your intended audience is. If you are trying to keep startup costs low and are developing for users who generally have a cable / constant internet connection, then you can do whatever floats your boat.
However, if you are designing application and would like it to remain relatively maintainable, you should probably look into JSON. If you do go with JSON, I would also suggest your pick up a javascript library like jQuery so that you can safely and easily handle decoding of the JSON object.
In fact, anymore, even when I am returning HTML from the AJAX page, I still wrap it in a JSON object. It seems a bit more standardized that way and I can easily reuse my previous javascript code.
Here are some basic tradeoffs:
Sending HTML Straight from PHP
HTML code is visible in the code and may be easier to find validation issues.
May be easier to maintain. (Key word MAY.) If you are generating complex html, it might be easier to build in PHP.
Sending JSON to PHP and letting Javascript Convert to HTML
Less data sent to browser. This is a big plus for mobile users who are on limited connections and pay for their bandwidth usage.
Generally more maintainable.
Lets the clients computer do the processing rather than the server (reduces server load).
Appears to be a standard format for communication with a server these days. Even Google Maps API uses JSON to interact with developers. You might even consider JSON the new XML.
By the way JSON stands for Javascript Object Notation. It follows the standard syntax for objects in javascript:
For example: var blah = {'variable_name':'variable_value'};
So my answer to you would be to use JSON, no matter what, but who your viewer is should determine how much data you are sending.

Answer 2

For extremely simple sites/examples it doesn't matter... for larger projects I would go with always having a json response which is more portable.
Using json makes both the server call and js view logic reusable.

Answer 3

JSON would be my preference. It's much easier to work with HTML properly in JavaScript, and PHP's json_encode is ever so convenient. Plus, it gives a nice, clean MVC feel.

Answer 4

I like back end styling because then you dont have to worry about browser compatibility (ie interent explorer).