AJAX calls - where does logic go?

Question

This might not even be an AngularJS question and could just be an AJAX question. I'm new to the "developer" side of the frontend so bear with me.

When making an AJAX call to fetch JSON data, where does the logic behind what data is returned and viewed fall? In my mind, there would be a couple of possibilities and I want to understand which is the proper choice and why.

Let's use an example of searching and playing a Youtube video.

1. The logic could fall to the backend (controller), where the JSON is rendered based on some logic to give you a JSON file with exactly the right data. i.e. you search "cat videos" and when making an AJAX call, the JSON file you pull has been rendered to be only cat videos.

2. The opposite end would be that the Angular controller has the logic. This would imply that all data is called (cat videos along with everything else... music videos, funny videos, tutorials, and so on) and then sorted through on the client side. This, to me anyway, would be more inefficient / slow for the client, so doesn't seem to make sense. I suppose still might do some filtering of the data on the client side though. So, maybe a search for "cat videos" wouldn't return ALL videos, but definitely all cat videos and any filtering based on, say, # of views, video length, and so on would be done on the client side (vs. calling the database again for a "new" set of videos).

3. Not sure if this is accurate, but could you have logic in your factory to return only a portion of the data? However, I believe the entire JSON file would need to be rendered, but only portions would be returned. I guess depending on where the JSON file renders (i.e. backend or frontend) this could be similar to either option #1 or #2.

Or maybe I'm misunderstanding things entirely and the way this works is entirely different!

I'm basically looking to figure out how the scenarios of 1. user searches a term and results are shown, 2. user clicks a search result and now more detailed data of the result is on it's own page. And how this ends up working out. I'm looking for help with AngularJS, but I think this ultimately an AJAX question (single page app or not) more than anything.

Answer 1

There's a few critical concepts you may be confused about.

First. JSON is not a file, it's a format, more simply, a type of string. It's really good for collapsing arrays and storing address-value pairs, so a lot of data flies around in that format. Strictly speaking, they are JSON objects, but they're a lot like strings and arrays. It looks like this, if I remember correctly:

{ "name" : "john doe", "pet" : "dog", "hobby" : "parasailing" }

---

Second, AJAX is a request to the server, made from the client (the browser) after the original page has loaded. That is, you type in 'youtube.com' and the youtube server receives the request and sends a big pile of HTML back to your browser.

You watch your video, make a rating, and the browser doesn't reload the page but instead sends a separate request back to the youtube server with your rating. There's a parameter in the request that says "send it to ratingspage.php". This request is AJAX.

---

Now, the logic happens (server-side). ratingspage.php receives your request. It contacts the databases, updates or fails or whatever, and sends back a response to your browser. This response may be in JSON format.

Finally, your browser parses that response and updates the DOM (HTML document) as appropriate.

At this point, it's worth noting that if the logic happened on the client-side (browser), the user could see it - this is a security problem! So, sensitive operations should be carried out on the server side, where you can test and sanitize the request data.

---

In summary:

• AJAX is separate from the initial load event.
• Information sent is gathered from the client browser
• Logic happens server-side
• Logic can use whatever language the server understands (PHP, Java, Ruby, etc.)
• Information is returned to the browser
• Information sent and received may use JSON format
• Everything client-side happens in Javascript

---

Here's a bare-bones ajax request (done in Javascript) with comments. This has no exception handling, state checking, or anything so don't use it! But it gives you the basic idea.

// Make a new request
var req = new XMLHttpRequest(); }                               

// Requests will have various states depending on whether they're processing,
// finished, error, etc.  We'll assume everything went OK.
// We need to establish a handler before the request
// is sent so it knows what to do.
req.onreadystatechange = function() {
    // Here's what the server sent back to the browser
    alert(req.responseText);
}

// Using the GET method, set up some parameters
req.open("GET", "somelogicpage.php?blah=blee&bloo=bar", true);
// Send the request
req.send(null);

Server-side, somelogicpage.php may look like:

<?php
if ($_GET['blah'] != 'blee']) {
    // This is the response text!
    echo "Sorry, you need to blee when you blah.";
}
else {
    // (or this)
    echo "I'm ecstatic to report nothing is wrong!";
}
?>

Your alert(req.responseText) from the handler function in the previous Javascript will say whatever the PHP has dumped out.

So yes, you can use whatever portion of the request you like, and return whatever you like. Javascript kicks bleep.