Disclaimer: This answer disagrees with the current accepted answer. Keep an open mind and see why. We're all just trying to share knowledge here anyway right? Skip to end for TL;DR
For anyone stumbling upon this now, this answer tries to stick to the design pattern of MVC in context of the web defined simply below:
- Model: the data persistence layer
- View: the templating system
- Controller: action that gets data and gives it to a certain view
I won't explain the reason for the separation just known that this design pattern is known to be more scalable when it is followed appropriately.
A few more terms (the acronyms really mean nothing):
- JSON: a structured data standard
Should I return the HTML as part of the JSON?
No, JSON should only be representations of data. This is part of the 'model' in MVC. If you're returning rendered HTML in your JSON then you can't change the view implementation. Once you get the rendered HTML, you're stuck with it.
Should I only return one or the other?
Yup, JSON is part of the 'model' because it represents data. HTML is part of the 'view'. When you have HTML in a JSON response, you're returning data with a view in it. I believe this doesn't follow MVC.
If anyone is specifically using ASP.NET, I would recommend returning a PartialView when you want to 'return just HTML' when AJAXing. Keep in mind that you only should return a partial view when wanting to change a certain part of the page without refreshing all of it (def of AJAX). This answer might help.
Should I return HTML, then make another AJAX call for the response?
This question may be worded weird. I'm assuming that the goal in context is to update the page without refreshing all of it--aka AJAX. When "returning HTML" you make an AJAX call for HTML and you update a certain part of the page from the rendered HTML. It doesn't make sense to make two AJAX calls because the AJAX call you make for HTML should already have a rendered 'view' with information inside it.
If you make an AJAX call for just data (in JSON form), then you would take that data and manipulate the DOM using the data i.e. Create an element and put data.message in there.
Should I return HTML and store the response in data- tags?
No, I don't think that would make sense. What you're trying to do is save the 'state' of the document in data- tags and you should just be 'saving state' by simply changing the text of the elements themselves.
TL;DR The end goal of AJAX calls is to change the state of the DOM without refreshing the page. You should make AJAX for data (in the form of JSON) not rendered HTML because this is far more flexible and reusable.