العملاء والخوادم والطلبات والاستجابات
في هذا الدرس 11 موضوعات
هذا الدرس متاح حاليًا باللغة الإنجليزية فقط، ولم تُنشر نسخته العربية بعد.
Lesson Overview
You now know how a name becomes an address and how an address and port find a service. This lesson brings everything together to answer a question that every web developer must be able to explain: what actually happens between typing a URL and seeing a page?
The answer has a small cast of characters. A client (usually your browser) asks. A server answers. The question is a request and the answer is a response. Between typing and seeing, the browser looks up the address, connects, sends a request, receives a response, and draws the page.
Why this matters: a backend developer's whole job is to be the server in this conversation. Everything you will write in the Java and web modules is code that receives a request and produces a response. If you can narrate the sequence clearly, you can reason about almost any web problem.
This lesson builds on Lessons 1 to 3 (the internet, addresses and ports, DNS) and on BEG-002 (what a service is and what a backend does).
Learning Objectives
By the end of this lesson you will be able to:
- Define client and server as roles, not as kinds of machine.
- Narrate the steps from typing a URL to seeing a page, in order.
- Describe the parts of an HTTP request: method, path, headers, and optional body.
- Describe the parts of an HTTP response: status code, headers, and body.
- Explain what status codes 200, 301, 404, and 500 mean, and group codes by their first digit.
- Explain why loading one page usually involves many requests.
- Explain what it means that HTTP is stateless, and how cookies help.
Written Explanation
Clients and servers
In networking, client and server describe roles in a conversation:
- The client starts the conversation and asks for something. Your browser is a client. So is a mobile app, or a program calling another program.
- The server waits for requests and answers them. A server is a program (which runs on a computer, often also called a server) that stores or produces what the client wants.
MDN's overview states that in HTTP the client is typically a browser, called a user agent, and that the client always initiates the requests while the server answers each one. The server never sends a page "out of the blue" in plain HTTP. It speaks only when spoken to.
Roles can swap depending on the conversation. A backend server may, in one conversation, be the server for your phone and, in another, the client of a database. "Client" and "server" always describe the relationship at that moment.
The URL: telling the browser what to fetch
A URL (Uniform Resource Locator) is the full address of a thing on the web. A typical one has several parts:
https://www.example.com:443/shop/boots?size=42#reviews
| | | | | |
scheme host port path query fragment| Part | Meaning |
|---|---|
Scheme (https) | Which protocol to use |
Host (www.example.com) | The domain, or an IP address |
Port (443) | Which door on the computer; often omitted because the scheme's default is used (Lesson 2) |
Path (/shop/boots) | Which resource on the server |
Query (?size=42) | Extra details for the server, as name and value pairs |
Fragment (#reviews) | A position inside the page; handled by the browser |
The fragment is for the browser and is not part of what the server needs to answer. The other parts steer the request.
The journey from URL to page
Here is the full sequence. We keep the numbers from the module's diagram: type the URL, DNS lookup, connect, request, response, render.
- You type a URL (or click a link). The browser reads it and splits it into parts.
- DNS lookup. The browser needs an IP address for the host. It uses the lookup process from Lesson 3: caches first, then a resolver. The result is an address such as
192.0.2.10(illustrative). - Connection. The browser opens a connection to that address and the correct port. HTTP is carried over TCP, a set of rules that gives a reliable, ordered connection. MDN notes that opening a TCP connection takes several back-and-forth messages. For
https, a security handshake happens here as well (Lesson 5). - Request. The browser sends an HTTP request over the connection, such as "GET me
/shop/boots". - Response. The server finds or builds what was asked for and sends back an HTTP response: a status code and the content.
- Rendering. The browser reads the content and draws the page. Rendering means turning the downloaded files (HTML, CSS, JavaScript, images) into what you see.
Browser DNS Server
| | |
|-- 1. name? ----------->| |
|<-- 2. IP address ------| |
| |
|-- 3. open connection ---------------------------->|
|-- 4. request: GET /shop/boots ------------------->|
|<-- 5. response: 200 OK + content -----------------|
| |
|-- 6. render the page |Remember this diagram. It is also the assessment for this module.
MDN summarises the web-page journey in a very similar way: query DNS for the server's address, send an HTTP request, receive a 200 OK with the files, then assemble and display the page.
What an HTTP request looks like
HTTP messages are text in a defined layout. A request has:
- A method: what kind of action is wanted.
GETmeans "give me this".POSTmeans "here is some data to handle". There are others you will meet later. - A path: which resource.
- The HTTP version.
- Headers: extra information in
Name: valuelines, such as the host and what languages the user prefers. - An optional body: data for the server, used with methods such as
POST.
An example request, written the way it appears on the wire:
GET /shop/boots?size=42 HTTP/1.1
Host: www.example.com
Accept-Language: enThe Host header tells the server which domain the client asked for. That is how one server can host several domains (Lesson 3).
What an HTTP response looks like
A response has:
- The HTTP version and a status code with a short message, in the first line.
- Headers, such as the type of content and its length.
- An optional body: the page, image, or data itself.
An example response:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1256
<!doctype html>
<html> ... the page ... </html>The Content-Type header says what is in the body, so that the browser knows whether to draw a page, show an image, or hand the data to a script.
Status codes
The status code is a three-digit number that tells the client how the request went. The first digit gives the group:
| Range | Group | Meaning |
|---|---|---|
| 100 to 199 | Informational | Interim messages |
| 200 to 299 | Success | It worked |
| 300 to 399 | Redirection | Look somewhere else, or reuse what you have |
| 400 to 499 | Client error | The request had a problem |
| 500 to 599 | Server error | The server had a problem |
Codes you must know:
| Code | Name | Meaning |
|---|---|---|
| 200 | OK | The request succeeded, and for GET the content is in the body |
| 301 | Moved Permanently | The resource now lives at a new URL, given in the response |
| 404 | Not Found | The server cannot find what was asked for |
| 403 | Forbidden | The server understood but refuses; the client lacks access |
| 500 | Internal Server Error | A generic server-side failure; the server hit something it could not handle |
| 503 | Service Unavailable | The server is not ready, often due to maintenance or overload |
A handy way to remember: 4xx means "your request had the problem", 5xx means "the server had the problem". As a backend developer, 5xx errors are yours to fix.
One page, many requests
When you load one page, you rarely make only one request. The first response is usually an HTML document. As the browser reads it, it finds references to other files: stylesheets, scripts, images, fonts. Each one is fetched with its own request, as MDN explains: a page is assembled from many resources, each fetched separately.
A page may therefore involve dozens of requests, to the same server and to others. The first request, for the main document, is the one you follow in Lessons 6 and 7.
HTTP is stateless
HTTP is stateless: each request stands alone, and the protocol itself does not remember earlier ones. MDN adds an important detail: stateless does not mean without sessions. Servers add memory on top using cookies: small pieces of data the server asks the browser to store and send back on later requests. That is how a shopping basket survives from one request to the next.
For you as a backend developer, this means the server must work out who is asking from the information in each request, such as a cookie, because it cannot assume "this is the same person as a moment ago".
Examples
Example 1: Reading a request (simple)
Look at this request:
GET /about HTTP/1.1
Host: www.example.com- Method:
GET, so the client wants to read something. - Path:
/about, the resource. - Host:
www.example.com, the domain. - No body, because
GETdoes not send data.
A fitting response would be a 200 OK with the HTML of the About page, or a 404 Not Found if no such page exists.
Example 2: Missing page (practical)
A user mistypes a URL and visits https://www.example.com/shpo/boots. The steps up to the request all succeed: the name is looked up, the connection opens, and the request is sent. The server checks its resources, finds nothing at /shpo/boots, and answers:
HTTP/1.1 404 Not Found
Content-Type: text/html
<html> ... "Page not found" ... </html>Notice that the server did answer. A 404 means the conversation worked and the answer is "not found". That is different from a failure to connect at all, such as a wrong IP address or a server that is down, where the browser shows a connection error and no HTTP response exists. Telling these two situations apart is a basic debugging skill.
Example 3: A shop page with many requests (realistic)
You open a shop's home page. The sequence is:
- Request 1:
GET /returns the HTML document (200 OK). - The browser reads the HTML and discovers it needs a stylesheet, a script, and six product photos.
- Requests 2 to 9: it fetches each of those, often at the same time, possibly from another server for the photos.
- As the files arrive, the browser draws the page. The script then asks the backend for the current prices with another request, and fills them in.
- When you click "Add to cart", the browser sends
POST /cartwith the chosen product in the body. The backend saves the choice and answers200 OKor another success code.
Everything you see is the result of many small request and response pairs, and the backend's job is to answer the right ones correctly.
Backend Insight
You are the server. Almost every backend feature you build follows the same pattern:
- Receive a request: read the method, the path, the headers, and the body.
- Process: validate the input, apply the rules, read or change stored data (BEG-001's four steps again).
- Respond: choose a status code, set headers, and write a body.
Choosing the correct status code is part of the job. A missing item is 404, not 200 with an error message in the body. A failure in your own code should be a 500, and you should treat each 500 as a bug report. Clients, monitoring tools, and other developers rely on those codes.
Two habits to start now:
- Remember that every request arrives with no memory. Because HTTP is stateless, anything the server needs to remember must be stored deliberately, in a database or a session.
- Expect many requests. A single page can cause dozens, and thousands of users can ask at once. This is why servers handle several requests at the same time, a topic for later modules.
Common Mistakes
Mistake 1: Thinking "server" means a big machine
A server is a role. Your laptop is a server while it runs a service you wrote and answers requests, and a client when your browser asks someone else.
Mistake 2: Thinking the server talks first
In plain HTTP the client always asks first. The server only answers.
Mistake 3: Confusing a 404 with a broken connection
A 404 response is a successful conversation with the answer "not found". A connection error means you never reached an HTTP server at all.
Mistake 4: Treating a page as one request
A page is many requests. The first returns the HTML. The rest fetch the pieces.
Mistake 5: Mixing up 4xx and 5xx
4xx says the client's request has a problem. 5xx says the server failed. Reporting your own bug as a 4xx hides it.
Exercises
Try each exercise yourself before opening the solutions.
Level A: Foundation
A1. Which is the client and which is the server when you open a site in a browser?
أظهر الحل A1
A1. The browser is the client. The program on the computer that hosts the site is the server.
A2. What does HTTP status code 404 mean, and which group (first digit) is it in?
أظهر الحل A2
A2. It means the server cannot find the requested resource. It is a client error, in the 4xx group.
A3. Name the three main parts of an HTTP response.
أظهر الحل A3
A3. The status line (version and status code), the headers, and an optional body.
Level B: Application
B1. Write the steps from typing https://www.example.com/ to seeing the page in order, using the names: DNS lookup, connection, request, response, render.
أظهر الحل B1
B1. The URL is typed, then DNS lookup finds the IP address, then the connection is opened, then the request is sent, then the server sends the response, then the browser renders the page.
B2. Here is a request line: POST /orders HTTP/1.1. What is the method, what is the path, and why is POST a more fitting choice than GET for placing an order?
أظهر الحل B2
B2. The method is POST and the path is /orders. POST is fitting because the client is sending data to be processed and stored (creating an order). GET is meant for reading and is expected not to change anything.
B3. A page loads one HTML file and twelve images. How many requests are there roughly, and why?
أظهر الحل B3
B3. About thirteen: one for the HTML document and one for each of the twelve images, because each file is fetched with its own request.
Level C: Challenge
C1. A user says "the site is broken". The browser shows "This site can't be reached" for one case and "404 Not Found" for another. For each case, say whether an HTTP response arrived, and what you would check first.
أظهر الحل C1
C1. "This site can't be reached" usually means no HTTP response arrived: check the domain name, DNS, whether the server is running, and the port. "404 Not Found" means a response did arrive: the server is up, so check the path or the content that should exist at that address.
C2. HTTP is stateless, yet a shop remembers your basket between pages. Explain how that is possible, and name where a backend should keep the basket data.
أظهر الحل C2
C2. The server adds memory on top of HTTP, for example by giving the browser a cookie that identifies the basket and receiving it back on later requests. The backend should keep the basket in storage such as a database (possibly with a cache in front), not only in the server's RAM, which is lost on restart.
Mini Challenge
Draw and narrate the URL-to-page sequence for a site you use often.
- Draw three columns: Browser, DNS, Server.
- Draw an arrow for each of the six steps (type URL, DNS lookup, connect, request, response, render) and label each one with a short phrase and, where it fits, a real detail (for example the method
GETor status200). - Say the story out loud in under a minute as if explaining it to a friend, using the words client, server, request, response, and status code.
- Add a second, shorter drawing of what changes if the page does not exist (a
404response).
Check your work: all steps are in order, DNS appears before the connection, and the response comes from the server and not the DNS.
Summary & Next Lesson
Key takeaways
- Client and server are roles. The client asks; the server answers.
- The journey: type URL, DNS lookup, connect, request, response, render.
- A request has a method, a path, headers, and an optional body. A response has a status code, headers, and an optional body.
- Status codes are grouped: 2xx success, 3xx redirect, 4xx client error, 5xx server error. Know 200, 301, 404, and 500.
- One page usually means many requests.
- HTTP is stateless. Cookies let servers build sessions on top of it.
Next lesson
Everything in this lesson travelled as readable text. The next lesson, "HTTP vs HTTPS: what encryption protects", shows why that is a problem and what the letter S adds.
Self-check
- Who starts the conversation in HTTP?
- What is the first step after the browser knows the URL?
- What does a 404 mean?
- Which status groups are errors, and who is at fault in each?
- Why does loading one page usually cause many requests?
أظهر الإجابات
- The client.
- The DNS lookup to find the server's IP address.
- The server could not find what was asked for.
- 4xx: the request had a problem (client side). 5xx: the server had a problem.
- The HTML refers to other files such as styles, scripts, and images, and each is fetched with its own request.
References
- Mozilla Developer Network, An overview of HTTP. Supports the client-server model, the parts of requests and responses, HTTP running over TCP, statelessness with cookies adding sessions, and a page being built from many requests.
- Mozilla Developer Network, How the web works. Supports the DNS, request, response, and assemble steps of loading a page.
- Mozilla Developer Network, HTTP response status codes. Supports the five status classes and the meanings of 200, 301, 403, 404, 500, and 503.
- Mozilla Developer Network, Authority (URL). Supports the URL parts and the default ports. The statement that the fragment is handled by the browser, and the description of
GETversusPOST, are standard HTTP background that was not read on those pages.
التطبيق
طبّق هذا الدرس بمختبر الوحدة وتمارينها واختبارها.
تعليم الدرس كمكتمل اختياري ويمكنك التراجع عنه في أي وقت. يبقى تقدمك محفوظًا في هذا المتصفح.