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
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 PointsAJAX & Fetch API purposes
Hello everyone! I think I'm a little confused by the purpose of these two.. So, the purpose of these two is just to communicate with a third-party right? In other words, if you don't have anything to get from another website like for example, pictures, you won't need them? Am I right? And in other words, you can't fetch or use XHR on anything that is in your computer, right? And in order to make your page change content without loading is if you have a server-side code with you, that's the time you will need it, right? I think this question sounds stupid because of the obvious meaning of the two. But, I just need some clarifications.
My goal on my website is when the user clicks on one of my navbars, it will look like it did not load at all. Does this have a connection to my question? Please help, I'm just confused. Thank you!
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 PointsHey man! Yeah, I totally get your point. So to sum it all up, you just use or call API on dynamic data, right? I don't know a lot about those frameworks yet though. Anyways, I'm just trying to sharpen my skill on this aspect, just trying to load some non-sense. But, I always get this error: fetch API cannot load file:///C:/Users/USERR/Documents/chicago_project/explore-now.html. URL scheme must be "http" or "https" for CORS request.
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 PointsHey man, I have one more question.. where did the server come from? Or do we make it? If yes, what are the required languages to do so? I’m sorry if this sounds stupid but I just feel completely lost right now. Thanks.
3 Answers
hombah
Python Web Development Techdegree Student 16,241 PointsHey Ceil, to add to Kyle Hartigan nice answers, you should look into either the Full Stack Javascript techdegree or the python one when you finish your front end one. They will teach you how to create your own API that serves json to a front end framework using node https://nodejs.org/en/about/. I did the JS and I highly recommend it
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 PointsShoot! You guys are amazing, thank you so much. I will definitely do that after my front end techdegree. Thank you so much.
Kyle Hartigan
16,967 PointsHi Ceil,
AJAX and API's are different things. I will define each of them and then describe how they can work together.
AJAX is a technology that is written in JavaScript to make requests to a database on the fly. Meaning, AJAX does not require page refreshes in order to make a request to a server. You see this technology on Twitter feeds and Facebook feeds where new status' are being brought in as you scroll down without having the webpage to reload.
An API is an application interface. An application interface (API) allows one system to pass data to another system. Say you created a website, and you wanted to display weather data. It would be nice to get the weather data in real time from another source, as opposed to getting your own weather gear. So what you would use would be an API, other companies host these API's and give out access to other people to use their data. How they work is you basically make a request to the API saying, this is the data I would like, and the server responds and says "here you go" and formats it in code in the form of JSON (look this up). So in this example, you may make a request every minute to the API asking for updated weather data (this would make sure your site is up to date).
Now bringing AJAX and the use of an API together. I will continue with my example above with having a weather website. Say you were displaying weather information for the next 7 days. Wouldn't it be nice for the users to not even have to refresh the page when new weather data/information came in. Maybe it was supposed to rain on Tuesday but now the data is saying it will be sunny. Well... bam, AJAX allows the data to come in without even reloading the page and your content is now updated. So, you make the request to the API for new weather data, then using AJAX you populate the data onto the page without even triggering a page refresh to the user!
In regards to your question about clicking Nav bars and not triggering page loads. You should look into the React framework. It is a JavaScript front end framework that allows for this sort of thing you are asking for.
Hope this was clear. All the best!
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 PointsHI! Yes, it was crystal clear, thank you. I actually figured out what it is that’s confusing me when using AJAX and fetch.. it’s where I get the data. I am taking the course AJAX Basics, Dave mentioned that the web browser sends a request and the “server” sends a response, that was the big question to me. Where did that server come from. Though, I know that making a JSON file in my computer and storing data their, I can definitely access it using fetch or AJAX, right? But it would make no sense because I would just make my work complicated if that’s the case.. One last question, what if I want to store credit card infos on my website, I would need to learn back end first, right? Thank you so much!
Kyle Hartigan
16,967 PointsHi Ceil,
Without seeing the video myself, my guess would be that Dave made a query to an API and the API responded to Dave's query with some data in the form of JSON (meaning the API's server responded, this server is not Dave's server).
Now that Dave has the data in the form of JSON, Dave can do whatever he wants with this data. Dave can store it in his own database, or he can just serve the data to the front end of his website and not even have to store it. In either case, if Dave is using the data from the API on his website, Dave can use AJAX to have this data refreshed or updated without causing a page refresh.
I would be extremely careful with storing credit card information on your website. I would recommend using a third party e-commerce provider like Shopify or Paypal to fulfill this service. There is a lot of liability and legal issues that can arise from storing such sensitive data.
If you intend on storing any data relating to your website, you will need to learn back end web development and need to implement a database to your web application.
My favorite web framework is Django, you should check it out I find python very friendly!
Cheers
Ceil-Ian Maralit
Front End Web Development Techdegree Graduate 19,434 PointsYeah, you’re right. That’s exactly what Dave got, a data in the form of JSON. I got the point of it now, I understand it better now. Thank you so much! Yeah, I had an experience with python before but I switched to JS too, before I go deep into it due to some reasons. Anyways, thank you again!
Happy Coding!
hombah
Python Web Development Techdegree Student 16,241 Pointshombah
Python Web Development Techdegree Student 16,241 PointsHey man, in modern web development a lot of websites are built with front end frameworks like react, vue and angular which just help you create the ui. developers tend to just create the ui bit without any data (to make the site more dynamic), so imagine we write some code to show the football league table - we will do this without any of the teams and scores hard coded in there (because we want to be able to use this during the whole season, and their positions and points will change), so then we make an API call (either to a server that we have written which has the latest league standing or a third party server - it doesnt really matter as long the the structure of the data coming back works with the way we have written the front end component). this way you can use this component the whole season without having to come back each week and manually update the ui code. with regards to the navbar if you dont want the browser to refresh when someone clicks on the navbar, you dont need to make an api call - you just have to prevent this default behaviour using javascript. hope that helps