Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Israel
1,894 PointsCant update status dynamically.
I was able to complete this task but the thing is when I go back to "employees.js" file and change the 'inoffice' status I was not able to notice the changes in the HTML page dynamically until I refresh it. So what should I do to see the results dynamically??
1 Answer
miikis
44,957 PointsHi John,
So, you wouldn't ever want to manually change stuff in a JSON file and save it like that; you can imagine that that would get tedious fast as the number of Employees increase. Usually, you would have some sort of API (Application Programming Interface) set up on the server side that handles tasks like creating an Employee, retrieving an Employee, updating an Employee or deleting an Employee.
This course isn't really meant to discuss how API's work; it's main intent is to describe how AJAX works. In real-world apps, though, it'd be rare to have a use-case that required you to request a single, JSON file via AJAX — like we're doing here. Usually, your data will be kept in a database and your API would be responsible for getting stuff out of the database, — perhaps parsing that data into JSON, if you wanted — and subsequently sending that data back to your Client as a response. Likewise, your Client would be able to use that same API to update a specific Employee's details, delete an Employee and so on.
Let me know if that helps :)
John Israel
1,894 PointsHi Mikis,
Thank you for the answer..!! But in this particular tutorial the response on the employee status to the client should be dynamic. Hmm lets pretend that we are not using the "employees.json" file and the response is coming directly from the DB. Lets assume an employee has left the office and obviously his "inoffice" status changes and the response from the DB should portrait on the client side. But the thing is I cant see the response on my page from the DB until I refresh the page and sometime the response wont reflect even after refreshing the page many times.
What I am trying to achieve here is the "online status" that we see in Facebook. As soon as my friend logs into his account i could see his name in the list and a green circular light glowing right next to the name and as soon as he logs out you know what happens. All of this happens very dynamically and without refreshing the page. Ignore the UI and please give me an idea how this functionality can be achieved by using AJAX for this practise application.
Thanks in advance!!! Have a great day!! :-)
miikis
44,957 PointsHey John,
So that's what AJAX is for: fetching data from a server without having to reload the page. And for simple tasks — like fetching a list of employees stored in a JSON file — it's a sufficient method. But, you'll rarely have to do simple things like that. And the second you need to do more — like update an Employee's data, for instance — you need to think about adding a new mechanism to act as a mediator between requests from the Client and any persistence-related stuff (think stuff that has to do with rewriting a JSON file or updating a row in a table on a Database).
This new mechanism is what is called the API. Without it all you can ever do is request simple data that already exists on the Server. If you need to change that data in any way, you'd have to do it Client-side. But then, you won't be able to save the newly-changed data because — without an API — the server has no idea how to do that. If you need to create the data Server-side before you send it to the Client, once again you'd just be out of luck without some sort of API.
About your Facebook chat example...it's a different beast altogether. It has to do with WebSockets and has almost nothing to do with what we're discussing here.
A more apt example would be the "infinite" scrolling on your Timeline. When you scroll past a certain point, the Browser sends an AJAX request to Facebook's server's API for more Timeline data — for that specific User, at that specific point in the page. Facebook's server would then reach into whatever Facebook has chosen to use as a storage mechanism, get the specified data and send a response — with that data — back to the Browser. The Browser would then render the data in any way that it desires, as per usual.
Note: I didn't want to confuse you so I didn't mention it before, but you wouldn't want your server to actually access the thing you're using as persistence (think: database) directly. You'd want a separate layer, a separate mechanism to deal with storage. And all your server is responsible for is interacting with this mechanism, and not the actual storage. But, you don't have to worry about this right now — it's almost a completely different topic.
Lol I hope that answers your question ;)
Kevin Korte
28,149 PointsTo build on Mikis's answer, yes, ajax and sockets are two very different things. To build a presence indicator, you could build it yourself, or you could use one of a few services out there that provides an API to implement this feature easier. One option is:
https://www.pubnub.com/products/presence/
Near real time applications are all the rage today, but there are a few different technologies for different situations.
PoJung Chen
5,856 PointsI have the question as John Israel . I used to thought that I can get data dynamically through native function like "setInterval" to repeatedly send request to server and update the newest information. However, after seeing this discussion, it seems that this process (dynamically change information) is through websocket or other services??
I am not sure whether my understanding now is correct or not?
Carlos Vieira
Courses Plus Student 1,345 PointsCarlos Vieira
Courses Plus Student 1,345 PointsYes, the PoJung Chen the answer is WebSockets. You could do it with setTimeouts and setIntervals but it will be a pain to be requesting the server all the time, mainly in situations where the data in the database does not change often.