Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Data Fetching

Well done!

You have completed JavaScript Data Fetching!

Sign up for Treehouse Back to Library

HTTP in the Browser

2:35 with Travis Alstrand

Understand how browsers send requests and receive data. Learn to use DevTools to inspect requests and visualize the HTTP request/response cycle.

https://dog.ceo/api/breeds/list/all

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In the last video, we quickly looked at the structure 0:00
    of HTTP requests and responses. 0:03
    Now we're going to see how your browser acts as a graphical interface 0:06
    for these requests and how we can inspect them easily. 0:09
    When you type a URL into your browser and press enter, 0:13
    your browser is actually sending an HTTP GET request behind the scenes. 0:16
    You don't see it in text form like we did in the last video. 0:21
    The browser hides all the details for you, so it feels like magic. 0:24
    But under the hood, it's the same process. 0:28
    Could you imagine having to write out a request like that 0:30
    every time you wanted to go to a website or even click a link? 0:33
    Yikes. 0:37
    So visiting our endpoint for the list of all dog breeds from the API in 0:40
    our browser is exactly like sending that GET request we looked at last time. 0:44
    The browser makes the request, receives the JSON response, and displays it. 0:48
    The URL is in the teacher's notes below if you'd like to play around 0:53
    with this too. 0:56
    If you're using Chrome, there's actually an extension 0:57
    which can display this JSON a little bit nicer. 0:59
    I'll leave a link for that in the teacher's notes as well. 1:02
    Modern browsers have developer tools that let us inspect these requests in detail. 1:05
    DevTools will be slightly different across different browsers, 1:09
    but they all essentially have the same features. 1:12
    So let's open them up. 1:15
    I'm gonna right click and choose inspect, 1:16
    and I'll head to the network tab. 1:21
    I'm going to reload our current page, 1:25
    and here we can see our all response. 1:29
    We can see here is the request URL, 1:32
    the method, which is get, status code, which was 200, 1:35
    headers, and the response body. 1:39
    This allows us to see exactly what data the server sends back 1:42
    and is invaluable when debugging or learning about APIs. 1:46
    Back in the day, developers had to inspect network 1:50
    traffic with external tools or command line programs. 1:52
    Now your browser does it all visually. 1:56
    The combination of APIs, HTTP, and DevTools 1:59
    makes working with data much easier and more approachable. 2:03
    So that's the surface scratched regarding HTTP. 2:07
    I highly recommend checking out our dedicated course on HTTP 2:10
    to learn more about it. 2:14
    I'll leave a link in the teacher's notes below. 2:15
    So now that we understand enough about HTTP 2:18
    and how our browser can show us what's happening under the hood, 2:21
    we're ready to see how JavaScript can make these requests automatically. 2:24
    That's where AJAX comes in. 2:28
    In the next video, I'll show you how this was done before the fetch API. 2:29

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up