Skip to content

Latest commit

 

History

History

15_http_and_forms

readme.md

HTTP and Forms🌟

Welcome to the exciting world of HTTP! 🚀 In this section, we'll learn how the Hypertext Transfer Protocol works behind the scenes to fetch and send data on the web 🌍. Plus, we'll see how JavaScript can interact with it. Let's dive into a simplified and beautiful explanation, with helpful examples along the way! 😄

🌐 What is HTTP?

HTTP (Hypertext Transfer Protocol) is a set of rules used for transferring data between your browser (like Chrome, Firefox) and a server (the place where the website lives). Think of it as the conversation between the browser and the server, where the browser asks for a webpage, and the server delivers it.

🖼️ Example: Opening a Web Page

When you type codewithhashim.com/about.html into your browser, here's what happens:

  1. The browser finds the server for codewithhashim.com.
  2. It creates a connection with the server (like starting a phone call 📞).
  3. The browser sends a request asking for the webpage. It looks something like this:
GET /about.html HTTP/1.1
Host: codewithhashim.com
User-Agent: Your browser's name

👉 This is the browser saying: "Please send me the page!" 🙏

📨 The Server’s Response

When the server receives the request, it replies with the webpage and some details:

HTTP/1.1 200 OK
Content-Length: 87320
Content-Type: text/html
Last-Modified: Sat, 21 sept 2024 10:05:41 GMT
<!DOCTYPE html>
... the rest of the HTML document

This means:

  • 200 OK: The request was successful! ✅
  • Content-Length: The webpage is 87,320 bytes in size 📏.
  • Content-Type: The document is in HTML format 📝.
  • Last-Modified: The webpage was last updated on sept 21, 2024 🗓️.

Then, the body (the actual content of the page) is sent, and the browser displays it to you as a webpage.

💬 HTTP Requests

An HTTP request is how the browser asks the server for something. Here's an example:

GET /about.html HTTP/1.1
  • GET: The request method, asking to get a webpage 📄.
  • /about.html: The specific page or file the browser is requesting 🔎.
  • HTTP/1.1: The version of HTTP being used for this request.

✨ Other HTTP Methods

  • POST: Sends data to the server (e.g., when you submit a form 📝).
  • DELETE: Requests to delete a resource (though websites don’t usually allow this!).
  • PUT: Requests to create or update a resource 🔄.

🚨 Important: Just because you send a DELETE request, doesn’t mean the server will allow it! Most servers will reject requests that could cause problems 😅.

🔄 HTTP Versions

There are multiple versions of HTTP:

  • HTTP/1.1: The simpler version, used in this example 👶.
  • HTTP/2: A faster and more complex version ⚡. Most browsers will automatically switch to this version if supported by the server.

🔢 HTTP Status Codes

After you send a request, the server responds with a status code to let you know how things went. Here are some common codes:

  • 200 OK: Success! Everything worked as expected ✅.
  • 404 Not Found: The page or resource could not be found 🔍❌.
  • 500 Internal Server Error: Something went wrong on the server's side 😱.

📝 HTTP Headers

Headers are extra pieces of information sent along with requests or responses. Here are some headers you might see:

Content-Length: 87320
Content-Type: text/html
Last-Modified: Sat, 21 sept 2024 10:05:41 GMT
  • Content-Length: Tells you how big the document is 📏.
  • Content-Type: Tells you what kind of document it is (HTML, JSON, etc.) 📝.
  • Last-Modified: Shows when the document was last changed 🕰️.

Some headers are essential, like Content-Type, which helps the browser understand how to display the document (HTML, images, etc.).

📦 Request & Response Body

After the headers, a request or response might include a body, which contains the actual content or data being sent.

  • GET and DELETE requests usually don’t have a body 🙅‍♂️.
  • POST and PUT requests often include a body because they are sending data to the server (e.g., form data) ✉️.
  • Some responses, like error messages, also don’t need a body.

🔑 Key Takeaways

  • HTTP is the protocol that powers the web, allowing browsers and servers to exchange data 📡.
  • A request is how the browser asks the server for something.
  • A response is the server’s answer, often including the requested webpage.
  • Status codes help you understand whether a request was successful or if something went wrong ❗.
  • Headers provide important extra information about the request or response.
  • Not all requests or responses have a body, but when they do, it contains the actual content being transferred.