Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

AJAX calls - where does logic go?

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.

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.
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).
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*

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.

Edit Summary*

Cancel

Okay, I see where I've made the mistake. Your explanation makes much more sense. I've currently been trying to develop the frontend separately from the backend and thought to call a .json file (later replace with call to server instead). I incorrectly started assuming a file renders. However, as you said, it's just data format. Your explanation and example then is similar to my #1, in that the logic is on the server side. It's the server that gets request and returns the request information to browser. I mistakenly assumed requested information = JSON file, but it's simply data in JSON format.
– jstacks
Commented Jun 5, 2013 at 3:17
Let me know if my understanding of what you said is accurate. And in terms of code, I had assumed the "get" would be .json file (it's what I've been doing locally), but as you've shown in your example and explained, it would be a request to the server (in your example "somelogicpage.pgp?blah=blee$bloo=bar") and returns the proper information. From there, you can filter the data without calling the server again (at least in Angular), like my example regarding # views, video duration, etc. Just one other question though. How would I code that AJAX call to be based upon the specific user action?
– jstacks
Commented Jun 5, 2013 at 3:21
To clarify (ran out of words), say you click a specific YouTube cat video to watch, how would I go about specifying this request to load up that specific video? Or let's say the user interacts and sends a rating (an example you used), how would you code this to be familiar with the specific page your on? It would seem that within a "get" or "post" or whatever other request, the "somelogicpage.php?..." would depend upon the user (i.e. who is on the page), the page they are on, etc. Is that type of logic also on the backend? Or would deal with using JS MVC (like AngularJS).
– jstacks
Commented Jun 5, 2013 at 3:29
Just attach a click handler to the DOM element, and put that request code inside of it, maybe like this: document.getElementById('btnLike').onclick = function() { ...my code example... } and when the click is triggered, the request code will run. You can store data in the value attribute of the button, or somewhere else in a different element, and pull it with .value or .innerHTML or something.
– Ben
Commented Jun 5, 2013 at 3:37
BTW all of this uses raw Javascript, which is what all of the libraries are written in, including Angular. Their Ajax request will be the same bare-bones with a few bells and whistles. I personally prefer writing raw JS over learning the syntax of a library, but I'm apparently in the minority :) However, more apps are using more Javascript now, so the raw skills come in very handy (Photoshop, for example).
– Ben
Commented Jun 5, 2013 at 3:43

| Show 1 more comment

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

Collectives™ on Stack Overflow

AJAX calls - where does logic go?

Answer*