Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to Express Index

HTTP Request(s)
Introduction

Now that we have our server up and running, how do we actually send and receive data, to and from the server? Simple. We're going to use HTTP request(s). Ok, great. What are those?

HTTP stands for Hypertext Transfer Protocol (HTTP). The key word here is Transfer, which is what we want to do. This "transfer" protocol is already built into the entire web structure.

HTTP is the foundation of the World Wide Web, and is used to load webpages using hypertext links. HTTP is an application layer protocol designed to transfer information between networked devices and runs on top of other layers of the network protocol stack. A typical flow over HTTP involves a client machine making a request to a server, which then sends a response message, back to the client.

There are several different "request" types which we will discuss below:

If you remember from our discussion on creating a server setup, you'll see that so far, our server code looks like this:

  • JavaScript
  • // import express and set a variable for default express functionality
  • import express from 'express';
  • const app = express();
  • const port = 3000;
  •  
  • // setup listening port
  • // when we run this file, it starts the server
  • app.listen( port, () => {
    • console.log(`Server running on port: ${port}`);
  • });

And when we run node index.js from the terminal, our server would be up and running on port: 3000. At this point it has no functionality, it's only "listening" for request(s).

GET Request

With GET, you are getting a resource from a server.

The HTTP GET method is used to retrieve information from a given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data. The GET method is a read-only request, meaning that it does not modify the server's state or the requested resource.

In summary, the HTTP GET method is used to request data from a specified resource, and it is designed for querying, searching, or fetching information without modifying any resources on the server.

The basic syntax for a GET request would go in our server index.js file and would look something like this:

  • // get request
  • app.get( "/", ( req, res ) => {
    • // do something here
    • // in this example output something to the page designated
    • res.send( "Hello World" );
  • });
  • app is the variable we assigned in our server setup to represent the express function.
  • get is an express method we are going to use to send a get request.
  • the "/" represents that the result of the get request will point to the "HTTP root".
    • you are defining a route to handle the request, in this case, the root of the server or http://localhost:3000/
  • req & res represent the request and response of the callback function.
  • the res object is used to send the response back to the client. In this case, "Hello World" is output on the client terminal @ (http://localhost:3000/)
    • as far as the coding goes, this response can be anything you need. It can do more that just output a text string to the webpage.
POST Request

With POST, you are sending (posting) a resource or data to a server.

Unlike the GET method, which appends data to the URL, the POST method sends data in the body of the request, allowing for larger amounts of data to be transmitted. This makes POST more suitable for submitting forms, uploading files, or sending sensitive information, as the data is not exposed in the URL.

Additionally, POST requests are not stored in the browser history or cache, enhancing security. The POST method is not idempotent, meaning that sending the same POST request multiple times may have different effects, such as creating multiple entries.

The data type in the POST request body is indicated by the Content-Type header, and the size is specified by the Content-Length header.

The basic syntax for a POST request would go in our server index.js file and would look something like this:

  • // post request
  • app.post( "/register", ( req, res ) => {
    • // process the new data (eg. add new login to database)
  • });
  • app is the variable we assigned in our server setup to represent the express function.
  • post is an express method we are going to use to send a post request.
  • the "/register" is sending the result of the post request to the "localhost:3000/register page".
  • req & res represent the request and response of the callback function.

So the post method is going to send new data to the server for processing and return the result to the designated page (http://localhost:3000/register).

PUT Request

With PUT, you are updating a resource on a server, by replacing every aspect of that resource completely.

PUT requests are idempotent, meaning that calling the same PUT request multiple times will always produce the same result. When you make an HTTP PUT request, and the Request-URI points to an existing resource, the server must completely replace that resource with the data enclosed in the body of the PUT request.

  • // put request
  • app.put( "/user/angela", ( req, res ) => {
    • // replace the existing data with new data
  • });
  • app is the variable we assigned in our server setup to represent the express function.
  • put is an express method we are going to use to send a put request.
  • the "/user/angela is sending the result of the post request to the "localhost:3000/user/angela page".
  • req & res represent the request and response of the callback function.

So the put method is going to send new data to the server, that is going to completely replace the current data, and return the result to the designated page (http://localhost:3000/user/angela).

PATCH Request

With PATCH, you are also updating a resource on a server, but you are only replacing the part of the resource that has changed.

Unlike the PUT method, which replaces the entire resource, PATCH is designed to update only specific parts of a resource. For example, if a resource has multiple fields, a PATCH request can update just one or a few of them without affecting the others.

  • // patch request
  • app.patch( "/user/angela", ( req, res ) => {
    • // update the existing data with new data
  • });
  • app is the variable we assigned in our server setup to represent the express function.
  • patch is an express method we are going to use to send a patch request.
  • the "/user/angela is sending the result of the post request to the "localhost:3000/user/angela page".
  • req & res represent the request and response of the callback function.

So the patch method is going to send new data to the server, that is going to update the current data, and return the result to the designated page (http://localhost:3000/user/angela).

DELETE Request

With DELETE, you are entirely deleting a resource from a server, or database.

DELETE is not safe or cacheable but is idempotent, meaning that sending the same DELETE request multiple times will have the same effect on the server and will not cause additional side effects. The DELETE method is commonly used to instruct the server to delete a specific resource identified by the provided URL or resource identifier. When a client sends a DELETE request to the server, it indicates that the client wants to remove the resource permanently.

  • // delete request
  • app.put( "/user/angela", ( req, res ) => {
    • // delete ALL of the existing data
  • });
  • app is the variable we assigned in our server setup to represent the express function.
  • delete is an express method we are going to use to send a delete request.
  • the "/user/angela is sending the result of the delete request to the "localhost:3000/user/angela page".
  • req & res represent the request and response of the callback function.

So the delete method is going to delete the current data, and return the result to the designated page (http://localhost:3000/user/angela).


Back to Top