Intro

Glossary

API : Programming Interfaces enable software to interact with other software through exposed functionality.

Client : The client is the initiating party that sends an API request. Often times there will be many clients consuming the same API.

Server : The server is software or hardware that provides a service by responding to requests across a network.

Main points

Client-server communication Model
The HTTP (Hypertext Transfer Protocol) is a communication protocol
Markup Languages

Protocols

The Internet is essentially a network of computer machines.

| Suggested Slidedeck: "Web Development World" https://speakerdeck.com/katychuang/web-development-world

In the early days of the Internet, each machine on the network must have an Internet Protocol (IP) address, which is in the form of nnn.nnn.nnn.nnn where nnn must be a number from 0 - 255. Domain names works as easier to remember masks onto IP addresses. The transmission of information is broken into packets and sent along the TCP/IP protocol stack, which has many layers from the hardware layer to the application layer1.

Learning about each network protocol layer and how they fit together would be more than a semester long course. The main protocol to focus on for building web applications are Hypertext Transfer Protocol (HTTP), which is on the application layer. Another protocol on the application layer to be aware of is the Simple Mail Transfer Protocol (SMTP) for electronic mail, e-mail for short. A majority of "web development work" when folks talk about front end or back end work falls more into the scope of HTTP rather than SMTP layer. That said, the rest of this guide focuses on HTTP.

HTTP & Client-Server Communication

Hypertext Transfer Protocol (HTTP) is the protocol that web browsers and web servers use "under the hood" to communicate with each other over the Internet. It is text based. HTTP is a protocol which allows the fetching of resources, such as HTML documents. After the request is serviced by a server, the connection between client and server across the Internet is disconnected. A new connection must be made for each request. Most protocols are connection oriented, where the connection is kept open over the Internet. HTTP does not however. Before an HTTP request can be made by a client, a new connection must be made to the server.

Clients and servers communicate by exchanging individual messages (as opposed to a stream of data). The messages sent by the client, usually a Web browser, are called requests and the messages sent by the server as an answer are called responses. A request is made by an entity called a user-agent, which is typically a web browser however can be a bot or scraper. The server answer with a response. In between can be any number of proxies or caches that can act as gateways.

HTTP is stateless, which means inherently data isn’t saved. HTTP cookies allow use of stateful sessions. This might be used for example with an e-commerce website as you click from page to page.

HTTP Request

Requests consists of the following elements¹:

An HTTP method, usually a verb like GET, POST or a noun like OPTIONS or HEAD that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using GET) or post the value of an HTML form (using POST), though more operations may be needed in other cases.
The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here, developer.mozilla.org), or the TCP port (here, 80).
The version of the HTTP protocol.
Optional headers that convey additional information for the servers.
Or a body, for some methods like POST, similar to those in responses, which contain the resource sent.

HTP Request

HTTP Response

Responses consist of the following elements:

The version of the HTTP protocol they follow.
A status code, indicating if the request was successful, or not, and why.
A status message, a non-authoritative short description of the status code.
HTTP headers, like those for requests.
Optionally, a body containing the fetched resource.

HTTP Response

Exercise: Checking for HTTP Responses

With Postwoman App https://postwoman.io/

Using the NASA picture of the day API endpoint, we can test to see the request and response. In the url below, everything after the ? symbol are called parameters. They work as key-value pairs, as a way to send to the server some configuration related settings.

https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&hd=True

Entering the URL into the main text box without changing anything else will default to a GET method, and pre-fill the params. There are several HTTP methods, mostly due to varying levels of security permissions and verbosity practices. GET methods are used for viewing something without changing it. POST methods are used for changing something.

HTTP Request Builder

HTTP Response

Information can be sent from the browser to the server encoded in the URL as params, or within the body of the HTTP request. The GET method, which was used in the example earlier, appends name/value pairs to the URL. Unfortunately, the length of a URL is limited, so this method only works if there are only a few parameters. The URL could be truncated if the form uses a large number of parameters, or if the parameters contain large amounts of data. Also, parameters passed on the URL are visible in the address field of the browser not the best place for a password to be displayed.

The POST method packages the name/value pairs inside the body of the HTTP request, which makes for a cleaner URL and imposes no size limitation, it is also slightly more secure. It’s typically used when you want to send data². There are several other HTTP request methods such as DELETE and PUT, all specified in the HTTP/1.1 specifications3.

After clicking the “Send” button in the postman app, you’ll see the response. There are a lot of response codes (HTTP Status Codes), generally we expect to see the response code 200. You’ll see the response code displayed on postman in the middle on the right in green text.

Exercise: Inspecting Network Activity in Chrome DevTools

We can open the DevTools and view the Network UI for any webpage. Here we can try the URL within the Chrome browser: http://www.brooklyn.cuny.edu/web/academics/schools/naturalsciences/departments/computers/news.php

As the page loads you’ll see more items appear in the log at the bottom of the page.

Browser - network activity