http entry notes 2 (HTTP request and response)

Get the HTTP request and response

Something to say

: This article uses node.js code to implement http, mainly to understand the whole process of request and response between browser & curl command and http server. The first part will briefly understand the request and response, and the latter part will systematically learn HTTP. Source code + graphic explanation. --Data source Hungry Man Valley


I hope you understand what URL path and query parameters are, and understand IP and port when reading this article. If you don’t know, you can read my http introductory note 1 (analysis of URL) , you need to install Node.js to operate

i. Let's first understand the request and response briefly

http request and response
-Picture from Hungry Man Valley

  • Request is when the browser in the client sends a request to the server

  • The response is that the server returns a response on the same port after receiving the request

1.1 How to send a request

  • ①Use Chrome address bar

The picture below is the first request sent by chrome to after I entered

Baidu request

  • ②Use curl command

curl is a commonly used command line tool to request a web server. Its name means the URL tool of the client

Enter in cmder (or cmd) to curl -v see the request and response process

Highlight request

After entering the command, you can see that the highlighted part above is the encryption process. The highlighted part is the request sent ('>' part), and the highlighted part is the response returned ('<' part)

You can see that the proxy tool uses curl/7.71.1

Agent tool concept:

The tool that helps you send requests is called [User Agent], the English name is User Agent

1.2 How to make a response

Ask yourself to use curl to send requests and respond to yourself

Node.js has an http module to do it (I also paste and copy the teacher Hungry Guy)

The following is the complete code of the node.js code server, mainly looking at the middle part, the complete code is also available in server.js of

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

  console.log('请指定端口号好不啦?\nnode server.js 8888 这样不会吗?')

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){
     queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method

  /******** 从这里开始看,上面不要看 ************/
   console.log('有个傻子发请求过来啦!路径(带查询参数)为:' + pathWithQuery)
/*每次请求都会执行 */
  if(path === '/'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.writ  console.log('有个傻子发请求过来啦!路径(带查询参数)为:' + pathWithQuery)
/*每次请求都会执行 */
  if(path === '/'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    <!DOCTYPE html>
    <link rel="stylesheet" href="/x">
    /* 注意:``和''是不同的,``里可以加回车 ,''里回车用\n表示*/
  } else if(path === '/x'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(`h2{color: green;}`)
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    <!DOCTYPE html>
    <link rel="stylesheet" href="/x">
    /* 注意:``和''是不同的,``里可以加回车 ,''里回车用\n表示*/
  } else if(path === '/x'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/css;charset=utf-8')
    response.write(`h2{color: green;}`)
  } else {
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
  /******** 代码结束,下面不要看 ************/

console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

The response is mainly to discuss the above intermediate code

  • These codes are server codes, usually on the server

  • path is the path without query parameters /x

  • query is the object form of query parameters {a:'1'}

  • queryString is the string form of the query parameter? a=1

  • pathWithQuery is a path with query parameters, generally not

  • request is the request object

  • response is the response object

1.2.1 Response code logic

① Grammar

  • ``You can enter inside

  • ''The carriage return can only be expressed by \n


  • Every time a request is received, the code in the middle will be executed again, the path is judged by if else, and the response will be returned
  • If it is a known path, always return 200
  • If it is an unknown path, always return 404
  • Content-Type represents the "type/syntax" of the content
  • response.write() can fill in the returned content
  • response.end() indicates that the response can be sent to the user

Enter cd + relative absolute path on the command line to enter the file, enter the following command to display the effect

Follow the link to enter http://localhost:8888 and get the effect
server effect

A port 8888 is opened and is monitored by node.js. If someone requests the port 8888, they will enter the node.js code. The above code will be executed every time the server code is changed. The server code must be restarted. Server can take effect

Then look at what the server displays

Effect 1

Click on the address to visit the webpage with path /

ii. Systematic learning of HTTP

2.1 What must be learned

  • Basic concepts (mainly request and response)
  • How to debug (by using Node.js, log / debugger can be used)
  • Where to find information (Node.js is used, see Node.js documentation)
  • Who is the standard maker (HTTP specification document: RFC 2612 <RFC 2612 specifically stipulates http rules> etc.)

How to learn (CRM learning method)

  • Copy-copy documents, copy teachers
  • Run-run successfully on your own machine
  • Modify-add a little bit of your own thoughts and rerun

2.2 HTTP basic concepts

1) request

  • Request verb path plus query parameter protocol name/version

  • Host: domain name or IP

  • Accept: text/ html

  • Content-Type: The format of the request body

  • Carriage return (add a carriage return between the request header and the request body to distinguish)

  • Request body (that is, upload content, it can be any content, but it must be clearly written in the request body format)


①. Three parts: request line ( emphasis in red part ), request header (blue part), request body (green part)

②. Request verbs include GET (get content)/POST (upload content) /PUT/PATCH/DELETE, etc.

③. The request body is generally empty in the GET request

④. The document is in Chapter 5 of RFC 2612

⑤. Not case sensitive (optional)

The following figure is the request process

HTTP request and response 11

In the developer tools, you can see that the request verb is GET, the access path is / (without query parameters), the protocol is HTTP, and the version number is 1.1

Host is the domain name and port number

Accept is used to indicate what content to accept. The browser will add accept by default to be html or xhtml+xml or xml, etc. (First> HTML first, if there is no HTML, you can also accept Xhtml, if you don’t have Xhtml, you can also accept Xml, etc.)

2) Response

  • Protocol name/version status code status string

  • Content-Type: The format of the response body

  • Carriage return

  • Response body (that is, download content)


①Three parts: status line, response header, response body

②Common status codes are test sites

③The document is in Chapter 6 of RFC 2612

The following figure is the response process

http response process

The beginning is HTTP/1.1, protocol plus version. 200 is the status code (200 represents ok), ok is the explanation of 200

Content-Type is the format of the response body (text, syntax is html, character encoding is UTF-8)

You can see the response body in Response. This part of the syntax format is written in Content-Type, as follows


Focus on remembering the request line and status line , HTTP is ok

Remember again:

  • The request line is:

Request verb path (plus query parameters) Protocol name/version

  • The status line is:

Protocol name/version status code status string

iii. Construct a request with curl

Main codecurl -v

Simple request

Origin server

  • Set request verb


curl -v -X POST

You can see that the original GET has become POST


Pay attention to capitalization!!!

  • Set path and query parameters

Add directly after the url

curl -v -X POST

The path is /xxxx added after the address, and the query parameter is?wd=h1

The anchor will not be passed to the server

Path and query parameters 222

  • Set request header

-H 'Name: Value’或者–header ‘Name: Value’

curl -v -X POST -H 'Accept: text/html'

Change accepting arbitrary to accept html content


Any weird content can be set in the request header, and the server can read it, such ascurl -v -X POST -H 'dw: SB'

dw: sb

  • Set request body

-d'content' or --data'content'

Usually with POST

Command line input
curl -v -X POST -H 'dw: SB' -H 'Content-Type: text/plain;charset=utf-8' -d '请求体内容'

The content I want to upload is plain text, the encoding is utf-8, and the content to be uploaded is the five words "request body content"

Generally 1 Chinese character 2 bytes

iv. Use node.js to read and construct requests

  • Read request verb



 console.log('有个傻子发请求过来啦!路径(带查询参数)为:' + pathWithQuery)
/*每次请求都会执行 */

After the server restarts, use curl link curl http://localhost:8888, the server gets

Read verb

Use curl to construct verbscurl -X POST http://localhost:8888


  • Read path

request.url path with query parameters

After the path is written, the path can be read, so I won’t demonstrate

path is a pure path, without query parameters

query has only query parameters

  • Read request header



use this curl -v -H 'dw: SB'

Server gets all request headers

All request headers

  • Read request body

v. Set response with node.js

  • Set response status code

response.statusCode = 200

You can change the response.statusCode = xxx in node.js to change the status code

 response.statusCode = 200
  • Set the response header

response.setHeader(‘Content-Type’, ‘text/html’);

response.setHeader('Content-Type', 'text/htmI');
response.setHeader('dw', 'sb');

You can modify the response header through the above part
Response header

  • Set response body


Can add content

    <!DOCTYPE html>
    <link rel="stylesheet" href="/x">

The first time I wrote the head, the second time I wrote the body, you can add content, as follows, you can read it all

Additional content


I am on my way to learn the front end from entry to soil. Every time you watch, it is your greatest encouragement to my learning journey, let's work hard together!

Welcome to leave your valuable comments.

In the end, you may be tired, send a wave of benefits


-The picture comes from the Internet

Guess you like