Better way to return data via AJAX?

Let's say I have three files: a page that is used for searching data called search, a file that handles requests called controller, and a file that has functions which the controller calls based on what POST parameter is passed. From the search page, I post some data and specify my action (search) via AJAX to the controller. The controller then takes that and calls a function that returns the data (which is inserted into the appropriate place in the DOM) which looks something like this:

```
prepare("SELECT t1.id,
t2.placement_date,
t2.placement_room,
t1.student_id,
t1.student_type,
t1.last_name,
t1.first_name,
t1.satr,
t1.ptma,
t1.ptwr,
t1.ptre,
t1.ptlg,
t1.waiver,
t2.tests_needed,
t2.blackboard_id
FROM student_data AS t1
JOIN additional_data AS t2
ON t1.id = t2.student_data_id
WHERE t2.placement_date = :search
ORDER BY t1.last_name ASC");
$query->bindParam(":search", $search);
$query->execute();

if($query->rowCount() == 0) {
return;
}

echo "
Placement Roster For $search

Placement Room
Student ID
Student Type
Last Name
First Name
SATR
PTMA
PTWR
PTRE
PTLG
Waiver
Tests Needed
Blackboard ID
";
while($row = $query->fetch()) {
echo "
{$row['placement_room']}
{$row['student_id']}
{$row['student_type']}
{$row['last_name']}
{$row['first_name']}
{$row['satr']}
{$row['ptma']}
{$row['ptwr']}

First of all, you should read about MVC.

There are a lot of tutorials out there, as well as frameworks (like CodeIgniter) that implement it. Basically your code should be divided into 3 main categories:

-
Controllers - where all logic should be placed like validations, checks. This is also where Views and Models are used, hence "controller"

-
Models - basically the source of data. Usually this is the abstraction of the data storage (databases, sessions, external requests) in the form of functions.

-
Views - the presentation, or in this case, the HTML.

Reasons to use MVC or MV* patterns is

-
Portability.

The files, especially the views and models, can be plucked out of the architecture, and be used elsewhere in the system without modification.

Models are simply function declarations one can just plug in the controller and call their functions. Views are simply layouts that, when plugged with the right values, display your data. They can be used and reused with little or no modification unlike with mixed code.

-
Purpose-written code and Readability

You would not want your HTML mixed with the logic, nor the data gathering mechanism. This goes for all other parts of your code. For example, when you edit your layout, all you want to see on your screen is your layout code, and nothing more.

Never, and I mean NEVER return marked-up data using AJAX (use JSON).

The main reason AJAX is used is because it's asynchronous. This means no page-loading, no more request-wait-respond, and you could do stuff in parallel. It's pseudo-multitasking for the human.

On the same train of thought, the reason why JSON was created was because XML was too heavy for data transfer and we needed a lightweight, data transport format. XML is NOT a data-transport format but a document and mark-up language (Though by "X" for extensibility, it has served a lot of purposes beyond document).

Use client-side templating

JavaScript engines have become fast these days that even developers create parsers/compilers on JavaScript. And with that comes client-side templating, like Mustache.

Coupled with raw data from JSON, which is very light, you can integrate that data into a template to form your view and have JavaScript display it, like you already do.

Have a rendered version and a data version

Taking into account the previous answer, if you are making a website rather than a web app, where JS is optional rather than required, one should create a website that works without JS.

However, for the same data but different format, the URL should not change (much). You should then take into account in the request what data type is requested by the client. And so you must accept a parameter which indicates the data type.

An example url would look like this:

//for a website page format (default: HTML):
http://example.com/my/shop/available/items.php

//for the JSON version
http://example.com/my/shop/available/items.php?format=JSON

//for the XML version
http://example.com/my/shop/available/items.php?format=XML

This means, that for the same page (available items), you have 3 formats you can use. This can be seen in the Joomla Framework (the framework that powers the Joomla CMS)

With these 3 tips, your code will be cleanly separated and purposely written (MVC), fast on transport and rendering (JSON + client-side templating) and extensible (multi-format support).

StackExchange Code Review Q#19710, answer score: 5