Question

I have a jQuery Ajax call to my server to retrieve some HTML for a section on my page based on some user activity with my site. I’m finding I need in addition to the rendered HTML from the server some JSON data. What’s best way to return to the client rendered HTML and JSON data? I’m thinking there are 3 different options:

1. make a second call to the server for the JSON data. This involves a second round trip. I can string multiple ajax calls using:

   $when(call_1, call_2).done(function(results_1, results_2){…}))

2. include a script block in the rendered html that is called once the rendered html is added to the dom:

   ... rendered html output ...
   $(document).ready(function ()
   {
       alert('data here');
   });
   

3. somehow embed rendered html into json returned from call then have calling JS function separate the rendered html from JSON and update DOM accordingly. This option just smells bad.

I’m leaning to option 1 even though it’s an additional server hit because it seems like a better approach. Which approach is better in your opinion? Is there another way I’ve not thought of?

Thanks

Answer 1

First of all, encode your HTML on server side.. something like:

function HTMLEscape(str) {   //Javascript code, adjust as per your server-side lang
    return String(str)
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

Now, supposedly you received the following JSON response at client-side:

data = {
     html: "<div>Text goes here</div><script type='text/javascript'>alert('text goes here too')</script>",
     status: 1,
     some: 'stuff'
};

On Ajax complete, start unpacking your JSON:

ResultJSON = data;

$("div#destination").html(HTMLUnescape(ResultJSON.html));
$("input#status").val(ResultJSON.status)

Finally, hide this Javascript function somewhere in your .js file:

function HTMLUnescape(str) {
    return String(str)
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>');
}

Hope it helps. (-: