Summary
Browser (client) -> server interaction
1. Browser (client) -> server interaction
initiate a request: request message Response request: Response message The message is: String
Request message object: request
2. Request message object: request
- request line:
- Request type: (get, post) Other request types will be exposed later
request.method
- Request url: The part after the domain name/url starting from / is the request url
request.url
- http protocol version number: http/1.1
request.httpVersion
- Request type: (get, post) Other request types will be exposed later
- Request header: request.headers returns an object let {host,connection} =
request.headers
There are some differences in the headers requested in each URL, but there will be some common header information. [Reference courseware]
When you build your own service later, you can add custom header information by yourself - blank line
- Request body:
different from the request method-
If it is a get request, there is no request body
Other types have a request body
Although get has no request body, it can display the data that needs to be passed to the server in the request string of the url address
http://localhost/index.html?name=admin&pass=123456?Parameter name=parameter value & amp;parameter name=parameter value This format is called request string/query string, which is appended to the requested url
Use the url module to parse the string in the url into an objectconst url = require(‘url’)
url.parse(request.url,true)
; //{name:admin,pass:123456} -
The post request has a request body
by eventlet s = '' request.on('data', chunk=>{ s + =chunk;//chunk gets the requested data }) \t request.on('end',()=>{ console.log(s); //name=admin & amp;pass=123456 response.end('xxx') })
-
Response message object: response
3. Response message: response
-
Response line:
-
http protocol version number
-
Response status code 200, 404 (not found), 500 (server related error)
response.statusCode
-
Response status string
response.statusMessage
200 -> ok
404 -> not found
500 -> internal server errorThere is a one-to-one correspondence between the response status code and the response status string
-
-
Response header:
response.setHeader('header name','header value')
response.writeHead(response status code, {'header name':'header value'})
-
empty line:
-
Response body: The server gives the client a response result
Image, text, json format string, website label content (html + css). . .response.end()
response.write()
write can be called multiple times and output multiple response results, but in the end it must rely on the end method
Although the end method can be written multiple times, it can only execute the first end in the end, because once the program encounters end, it will directly respond to the client with the result of the response body
//Introduce http module url module const http = require('http'); const url1 = require('url'); // build service object const server = http.createServer( (request,response)=>{<!-- -->//request request message object response response message object const {<!-- -->method,url,httpVersion,headers} = request;//Get request type request url address request http protocol version number request header // Set the response header, two methods response.setHeader('Content-Type','text/html;charset=utf-8'); response.writeHead(200,{<!-- -->'Content-Type':'text/html;charset=utf-8'}); response.setHeader('a','100');//Custom response header information if(method === "GET"){<!-- --> // http://localhost/index.html?name=admin&pass=123456 let data = url1.parse(url,true)//data.query attribute value is converted from string to object {name:admin,pass:123456} console.log(data.query,data.pathname);//pathname request url address }else if(method === "POST"){<!-- --> // Get the post request body through the event let str = ''; // Receive request data request.on('data', chunk=>{<!-- --> str + = chunk;//request data }) //Receive data complete request.on('end',()=>{<!-- --> response.end(str);//Set the response body }) } response.end('Set content');//Set response body method one //Set response body method 2 // response.write('content') // response.write('Content 1') // response.write('Content 2') // response.end('Set content 3'); }); //Set the listening port server.listen(8080,()=>{<!-- --> console.log('service started successfully') })
HTTP protocol
1. Concept
HTTP (hypertext transport protocol) protocol; Chinese called Hypertext Transfer Protocol
It is an application layer communication protocol based on TCP/IP
This protocol specifies the rules for communicating between a browser
and a server
of the World Wide Web.
The agreement mainly stipulates two aspects
- Client: used to send data to the server, which can be called request message
- Server: Return data to the client, which can be called a response message
Message: actually a bunch of strings
2. The composition of the request message 【Key points】
- request line
- request header
- blank line
- request body
3. HTTP request line content
-
request type (get, post, put, delete, etc.)
-
Request URL (Uniform Resource Locator)
For example: http://www.baidu.com:80/index.html?a=100 &b=200#logo
- http: protocol (https, ftp, ssh, etc.)
- www.baidu.com domain name
- 80 port number
- /index.html path
- a=100 & amp;b=200 query string (request string)
- #logo hash (anchor link)
-
HTTP protocol version number
4. HTTP request header structure and common request headers
Format: header name: header value;
Common request headers are:
The request header can be customized by the programmer! ! !
Request Header | Explanation |
---|---|
Host | Host name |
Connection | Connection setting keep-alive (keep connection); close (close connection) |
Cache-Control | Cache-Control max-age = 0 (no cache) |
Upgrade-Insecure-Requests | Convert http requests in webpages into https requests (rarely used) old website upgrade |
User-Agent | User agent, client character The server can use this identifier to identify which client the request comes from. Generally, it is distinguished between PC and mobile. |
Accept | Set the browser Received data type |
Accept-Encoding | Set the received compression method |
Accept-Language | Set the received language q=0.7 as the preference coefficient, the full score is 1 |
Cookie | Separate later |
5. HTTP request body
The format of the request body content is very flexible,
(can be empty) ==> GET request,
(It can also be a string or JSON) ===》POST request
For example:
- Request string (parameter name=parameter value & amp;parameter name=parameter value): keywords=mobile phone & amp;price=2000
- JSON (the key name must be double quotes, and the key value must also be double quotes if it is a string): {“keywords”: “mobile phone”, “price”: 2000}
6. The composition of the response message and the response line
-
response line
HTTP/1.1 200 OK
-
HTTP/1.1: HTTP protocol version number
-
200: Response status code 404 Not Found 500 Internal Server Error
There are also some status codes, refer to: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
-
OK: response status string
There is a one-to-one correspondence between the response status code and the response string.
-
-
response header
Cache-Control: cache control private private, only allows the client to cache data
Connection link settings
Content-Type:text/html;charset=utf-8 Set the data type and character set of the response body, the response body is html, and the character set is utf-8
Content-Length: The length of the response body, in bytes
-
blank line
-
response body
? The type of response body content is very flexible. Common types include HTML, css, js, image, JSON, video, audio, font…
7. Build WEB service
Create an HTTP server using nodejs
Three steps:
① Introduce http built-in module
const http = require("http")
② Create service
const server = http.createServer((request,response)=>{<!-- --> //Ordinary function or arrow function can be used //According to the request, set the content of the response message //end method can set the response body response.end("xxx") })
- request: is an object that can get the data in the request message
- response: is an object, you can set the data in the response message
③ Listening port
- The port number:
- It is the service window of the computer. There are 65536 service windows in total. The program can listen to the port to process the data of the specified port
- Choice of common port numbers: 8000, 8080, 8888, 3000, 9000 The default port number is 80, which can be omitted in “browser request”
Other port numbers should be greater than 1024
server.listen(port number, callback function)
④ Corresponding port of browser request
http://127.0.0.1: port number
-
127.0.0.1 always points to this machine, and the IP address is the only house number of the computer in the network.
-
IP addresses generally consist of four digits, ipv4 (version 4)
-
Get the ip address of a website:
ping domain name
FAQ:
(1) When the service has started
- Want to modify the JS code, after refreshing the browser, it is found that the content of the page has not changed
Answer: After the JS code is modified, the service "must be restarted" (not re-run the file) to see the latest display results
- Port number is occupied
Error: listen EADDRINUSE: address already in use :::8000
Solution 1: Stop the service currently running on the listening port [commonly used]
Answer: Find the corresponding command line window and use the "ctrl + c" key combination
Solution 2: Modify other port numbers to use
- The response content is in Chinese, which is displayed as garbled characters in the browser
Answer: response.writeHead(200,{<!-- -->"Content-Type":"text/plain;charset=utf-8"}) #The default is text
//1. Import http module const http = require('http'); //2. Create service const server = http.createServer((request,response)=>{<!-- --> response.end('hello http'); }) //3. Listen port server.listen(80,()=>{<!-- --> console.log('80 port service has started'); })
8. Get HTTP request data
If you want to get the requested data, you must pass the request object;
It contains the following parameters:
Parameter name | Meaning | Grammar | Key points |
---|---|---|---|
method | request method | request.method | ***** |
httpVersion | request version | request.httpVersion | |
url | Request Path | request.url | ***** |
headers | Request Header | request.headers | ***** |
on | Request Body | request.on(‘data’, function(chunk){}) | |
request.on(‘end’, function(){}); |
Special Instructions:
1. request.url: only the path and query string can be obtained, but the domain name and protocol content in the url cannot be obtained;
2. request.headers: convert the request information into an object, and convert the attribute names into “lowercase”
3. About the path: If you only fill in the IP address or domain name information when visiting the website, the path requested at this time is “/”
4. About ip: ip is the unique house number of the computer in the network, ipv4 156.23.56.85
? 127.0.0.1 is always pointing to this machine
4. Regarding favicon.ico: This request is automatically sent by “Google Chrome”, and other browsers may not necessarily send it.
Used to get the "small icon" of the current website
Exercise 1: According to the following requirements, build an http service and access it according to different url addresses
request type | request address | response body result |
---|---|---|
get | /login | login page |
get | /register | Registration page |
//1. Import http module const http = require("http"); //2, create a service const server = http.createServer((request,response)=>{<!-- --> let {<!-- -->url,method} = request; //Object deconstruction assignment //Set response header information //Solve Chinese garbled characters response.setHeader("Content-Type","text/html;charset=utf-8") if(url == "/register" & amp; & amp; method == "GET"){<!-- --> response.end("Registration page"); }else if(url=="/login" & amp; & amp; method == "GET"){<!-- --> response.end("login page"); }else{<!-- --> response.end("<h1>404 Not Found</h1>") } }) //3, listening port server.listen(8000,()=>{<!-- --> console.log('service starting....'); })
When the request url carries request parameters, you need to use the url module
① Introduce http built-in module
let http = require("http")
② Import the url module
let url = require("url");
③ Create service
let server = http.createServer((request,response)=>{<!-- --> //Analyze for the url in the request //The second true means to convert the query attribute value from a string to an object //Syntax: url.parse(request.url,true) response.end("xxx") })
Commonly used parameters in the url module
-
pathname: the path part in the url
-
query: query string object in url
③ Listening port
The port number:
- It is the service window of the computer. There are 65536 service windows in total. The program can listen to the port to process the data of the specified port
- Choice of common port numbers: 8000, 8080, 8888, 3000, 9000 The default port number is 80, which can be omitted in “browser request”
- Other port numbers should be greater than 1024
Exercise 2: According to the following requirements, build an http service, access it according to different url addresses, and modify the background color of the page
For example:
/server?bg=yellowgreen
/server?bg=red
//1, introduce the http module const http = require("http"); //2. Import the url module const url = require("url"); //3, create a service const server = http.createServer((request,response)=>{<!-- --> // console.log(url); //url is an object //If you want to parse the request address in the address bar, you need to call the parse method in the url object //When the second parameter of url.parse is true, the query module will be used to analyze the query string. The default is false, so we set it to true let data = url. parse(request. url, true); let bg = data.query.bg?data.query.bg:'pink'; console.log(bg); //Set the display color of the response result response.end(`<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background:${<!-- -->bg} } </style> </head> <body> </body> </html>`) }) //4, listening port server.listen(8000,()=>{<!-- --> console.log('Service is starting....ing'); })
9. Get HTTP request body data
When the requested data comes from a form, you need to get the data in the request body before responding to the service
<form method="post" action="http://127.0.0.1/"> Username: <input type="text" name="username"/><br/> Password: <input type="text" name="userpass"/><br/> <button>Login</button> </form>
About the request body:
- Most of the request body of the GET request is empty
- Most of the request body of the POST request is not empty
Three steps to obtain the request body:
1. Declare a string to display the request information
let str = "";
2. Set the binding event and use the readable stream data to read the event
request.on('data',chunk=>{<!-- --> str + =chunk; })
3. Binding event, which is triggered when the data is read
request.on('end',()=>{<!-- --> //Get the result of the request body console. log(str); //response result response.end("over~~~") )
//1. Import http module const http = require("http"); //2, create a service const server = http.createServer((request,response)=>{<!-- --> //4, declare a string let str = ""; //5. Binding events request.on('data', chunk=>{<!-- --> str + =chunk; }) request.on('end',()=>{<!-- --> //Get the result of the request body console. log(str); //response result response.end('over~~~') }) }) //3, listening port server.listen(8000,()=>{<!-- --> console.log('service starting...'); })
10. HTTP module response related API
- response.statusCode set response status code
- response.statusMessage set the response status string (
set less
) - response.setHeader(‘header name’,’header value’) custom header information
- response.write(‘xx’) set the response body
- response.end(‘xxx’) set the response body
Two usages of write and end: //1. Situation 1: Combination of write and end The response body is relatively scattered response.write('xx'); response.write('xx'); response.write('xx'); ... response.end(); //Each request must have the execution of the end method during processing, which cannot be omitted //2. Situation 2: Using the end method alone, the response body is relatively concentrated response.end('xxx');
Case: Build an HTTP service, respond to a table with 4 rows and 3 columns, and realize interlaced color change (JS)
//1. Import http module const http = require('http'); //2. Create service const server = http.createServer((request,response)=>{<!-- --> response. end(` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> td{ width:100px; height: 50px; } table,td { border-collapse: collapse; } </style> </head> <body> <table border="1" align="center" cellpadding="3" cellspacing="3"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <script> //get all tr rows let trs = document. querySelectorAll('tr'); //cycle trs.forEach((item,index)=>{ if(index%2==0){ item.style.background = "orange"; } else { item.style.background = "green"; } }) </script> </body> </html> `) }) //3. Listen port server.listen(80,()=>{<!-- --> console.log('80 port is starting....ing'); });
Case 2: Build a service and respond to a table with data
const data = [ {<!-- --> id:1, name:'Sun Yanzi', song:'Backlight' }, {<!-- --> id:2, name:'Jay Chou', song:'unspoken password' }, {<!-- --> id: 3, name:'JJ Lin', song:'A song not for anyone' }, {<!-- --> id:4, name: 'Mayday', song:'Cheers' }, {<!-- --> id: 5, name: 'Zhang Yixing', song: 'Lotus' }, {<!-- --> id:6, name:'Andy Lau', song:'ice rain' }, {<!-- --> id: 7, name: 'Jacky Cheung', song: 'lover' } ] //Requirement: build a form, the data comes from the data variable require('http').createServer((request,response)=>{<!-- --> let body = ""; body + =` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> td{ width:100px; height: 50px; } table,td{ border-collapse: collapse; } </style> </head> <body> <table border="1"> <tr> <td>id</td> <td>Artist name</td> <td>Famous song</td> </tr>`; data.forEach(item=>{<!-- --> body + =` <tr> <td>${<!-- -->item.id}</td> <td>${<!-- -->item.name}</td> <td>${<!-- -->item.song}</td> </tr> ` }) body + =` </table> </body> </html> `; response. end(body); }).listen(80,()=>{<!-- --> console.log('Port 80 is running....ing'); })
Regarding the response:
- Response file content: For files whose HTML content does not change for a long time, use this method
- Response splicing results: For webpage content, files that often change, use this method
- At work, the most common case is that the server responds to JSON
11. Fixed implementation of response file content
require('http').createServer((request,response)=>{<!-- --> //Get the request method has path let {<!-- -->url,method} = request; //Judge the request method and request path if(method == "GET" & amp; & amp; url == "/index.html"){<!-- --> // need to respond to the content of the file let data = require('fs').readFileSync(__dirname + '/index.html'); response. end(data); }else if(method == "GET" & amp; & amp; url == "/css/app.css"){<!-- --> // need to respond to the content of the file let data = require('fs').readFileSync(__dirname + '/public/css/app.css'); response. end(data); }else if(method == "GET" & amp; & amp; url == "/js/app.js"){<!-- --> // need to respond to the content of the file let data = require('fs').readFileSync(__dirname + '/public/js/app.js'); response. end(data); } else{<!-- --> //404 response response.statusCode = 404; response.end("<h1>404 Not Found</h1>"); } }).listen(80,()=>{<!-- --> console.log('Port 80 is starting....'); })
Obviously, the above code needs to be judged as long as there is a request path. Obviously this method is not perfect, so we need to encapsulate
require('http').createServer((request,response)=>{<!-- --> //Get the request method has path let {<!-- -->url,method} = request; //folder path let rootDir = __dirname + '/public'; // splicing file path let filePath = rootDir + url; // read file content fs.readFile(filePath,(err,data)=>{<!-- --> //judge if(err){<!-- --> //If an error occurs, respond with a 404 status code response.statusCode = 404; response.end('<h1>404 Not Found</h1>'); }else{<!-- --> //response file content response. end(data); } }) }).listen(80,()=>{<!-- --> console.log('Port 80 is starting....'); })
Twelve, the difference between GET and POST requests
GET and POST are two ways of HTTP protocol request.
-
GET is mainly used to obtain data, and POST is mainly used to submit data
-
A GET request with parameters is a GET request after adding parameters to the URL and entering the url in the address bar to access the website.
POST request with parameters is to put the parameters in the request body
-
POST requests are safer than GET, because the parameters will be exposed in the address bar in the browser
-
GET request size is limited, generally 2K, while POST request has no size limit
-
The GET type message request method is GET, and the POST type message request method is POST
Case 1: For security
? POST is more secure, and GET is less secure
Case 2: Representation
? POST submission data is submitted through the request body
? GET exposes the requested data in the request string in the address bar
Case 3: passing data size
? GET basically transfers data less than 2KB
? There is basically no upper limit on the size of POST (but it can be set through background code (java, php…))
Case 4: Use Scenarios
? GET is usually used to get data
? POST is usually used to submit data
Thirteen, GET and POST usage scenarios
The case of a GET request:
- Enter url access directly in the address bar
- click on a link
- The link tag introduces css
- The script tag introduces js
- The img tag introduces pictures
- The method in the form tag is get
- get request in ajax
The situation of the post request:
- The method in the form tag is post
- ajax post request