做个网站费用多少,正能量网站入口不用下载免费,南京网站设计培训,一页网站首页图如何做1. HTTP请求
HTTP#xff08;Hypertext Transfer Protocol#xff0c;超文本传输协议#xff09;是客户端和服务器之间通信的基础协议。HTTP 请求是由客户端#xff08;通常是浏览器、手机应用或其他网络工具#xff09;发送给服务器的消息#xff0c;用来请求资源或执行…
1. HTTP请求
HTTPHypertext Transfer Protocol超文本传输协议是客户端和服务器之间通信的基础协议。HTTP 请求是由客户端通常是浏览器、手机应用或其他网络工具发送给服务器的消息用来请求资源或执行操作。
简单来讲就是向服务器发送请求服务器返回响应给用户端
HTTP请求由三个主要部分组成
1.1 请求行
包含请求方法、目标资源路径、协议版本。
GET /index.html HTTP/1.1常见的请求方法
方法作用GET主要作用于获取数据POST主要作用于新增数据PUT/PATCH主要作用于更新数据DELETE主要作用于删除数据 1.2 请求头
提供额外的信息比如客户端能力请求参数等以键值对的形式呈现
键: 值GET /path/resource HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36
Accept: text/html,application/xhtmlxml,application/xml;q0.9,image/webp,*/*;q0.8
Accept-Language: en-US,en;q0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: sessionIdabc123; themedark
Referer: https://www.google.com1.3 请求体
用于发送数据常见于POST或PUT请求
{username: user1,password: password123
}2. HTTP响应
HTTP 响应是服务器对客户端 HTTP 请求的回复。它包含状态信息、响应头和通常响应体用于传递客户端所请求的资源或告知请求处理的结果。
HTTP响应基本结构由以下三个部分组成
2.1 状态行Status Line
描述响应的总体状态包括协议版本、状态码和状态文本。
HTTP-Version Status-Code Reason-PhraseHTTP-Version: 表示服务器使用的HTTP协议版本。
响应状态码 三位数字的状态码表示服务器对请求的处理结果状态码分为五大类
· 1xx信息
· 2xx成功
· 3XX重定向
· 4XX客户端错误
· 5XX服务端错误
常见状态码
状态码含义200请求成功403禁止请求404找不到资源500服务器内部错误 2.2 响应头Response Headers
HTTP响应头HTTP Response Headers是服务器发送给客户端的信息的一部分它包含关于响应的元数据。这些头部字段为客户端提供了服务器、资源和响应内容的额外信息。例如内容类型、服务器信息、缓存控制等以键值对的形式发送。
Content-Type: text/html
Content-Length: 12342.3 响应体Reponse Body
包含实际的响应数据如 HTML 页面、JSON 数据、文件内容等。
仅在部分响应中有例如 200 OK。错误响应如 404通常没有响应体。 响应示例
简单的HTML响应
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 88!DOCTYPE html
html
headtitleWelcome/title
/head
bodyh1Hello, World!/h1
/body
/htmlJSON响应
HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 57{status: success,data: {id: 1,name: Alice}
}3. IP与端口
3.1 IP
本身就是一个数字标识是一个32Bit的二进制数字每8bit(一个字节)为一组
表示网络中的设备实现设备之间的通信 IP的分类
本机回环IP地址用于测试和通信的特殊 IP 地址始终指向本机。常见为http://127.0.0.1
局域网IP(私网IP)分配给局域网中的设备用于局域网内部通信。
广域网IP(公网IP)分配给设备的唯一 IP 地址可在互联网上直接访问。 3.2 端口
应用程序的数字标识一台现代计算机有65536个端口一个应用程序可以使用一个或者多个端口
实现不同主机应用程序之间的通信。可以理解为端口就是服务器中的每一个房间在执行特定的任务。 4. 创建HTTP服务器
在Node.js中创建HTTP服务器只需要几行简单的代码
const http require(http);// 创建服务器
const server http.createServer((req, res) {// 处理请求res.statusCode 200; // HTTP状态码res.setHeader(Content-Type, text/plain); // HTTP头信息res.end(Hello, Node.js HTTP Server!); // 响应内容
});// 启动服务器
server.listen(3000, 127.0.0.1, () {console.log(Server running at http://127.0.0.1:3000/);
});
其中http协议的默认端口为80https的默认端口为443。我们来详细讲解代码的每一步。 4.1 导入http库
const http require(http); 4.2 创建简单的HTTP服务器
const server http.createServer((request,response){response.end(Hello HTTP server);
});http.createServer是Node.js中用于创建服务器的函数接收一个回调函数作为参数该回调函数会在每次收到HTTP请求时被调用。
· request表示客户端发送的 HTTP 请求对象。包含请求的所有信息例如方法GET/POST、路径、头部等。
· response表示服务器返回给客户端的 HTTP 响应对象控制返回的内容、状态等。
response.setHeader(content-type,text/html;charsetutf-8);
//返回相应内容字符为utf-8 设置返回内容的头部包含浏览器的文字解码信息
response.end(Hello HTTP server);结束响应并向客户端发送数据。 4.3 监听启动服务
//监听窗口启动服务
server.listen(9000,(){console.log(服务启动);
})
server.listen启动服务器并监听端口这里使用9000端口
第二个参数是一个回调函数。会在服务器成功启动后执行 4.4 停止服务
在命令行中输入ctrlc
通过资源管理器找到目标端口对应的应用程序定位对应PID在任务管理器中关闭即可 5. HTTP请求处理
想要获取请求的数据需要通过request对象中的属性进行识别处理
5.1 请求路径区分
如下表格所示request对象中包含诸多属性通过解析不同的属性可以区分请求路径以此做出相应响应
含义语法请求方法request.method请求版本request.httpVersion请求路径request.url请求头request.headers
通过实现路径区分可以对不同请求路径做出相应响应
const server http.createServer((req, res) {if (req.url /) {res.end(Welcome to the Homepage!);} else if (req.url /about) {res.end(This is the About page.);} else {res.statusCode 404;res.end(Page Not Found.);}
});server.listen(3000, () {console.log(Server is running on port 3000);
}); 5.2 处理请求方式
HTTP请求可以分为GET请求和POST等GET请求是请求服务器返回一系列内容POST请求则是向服务器发送对应内容服务器再返回相应报文。
通过request.method,可以区分HTTP不同的请求方式
const server http.createServer((req, res) {if (req.method GET) {res.end(Received a GET request);} else if (req.method POST) {res.end(Received a POST request);} else {res.end(Unsupported request method);}
});server.listen(3000, () {console.log(Server is running on port 3000);
}); 5.2.1 Get请求 在 GET 请求中参数通常通过 URL 查询字符串传递。例如/search?querynodejs。
const http require(http);
const url require(url);// 创建 HTTP 服务器
const server http.createServer((req, res) {if (req.method GET) {// 解析查询字符串const queryObject url.parse(req.url, true).query;res.writeHead(200, { Content-Type: application/json });res.end(JSON.stringify({ message: Hello, query: queryObject }));}
});// 启动服务器
server.listen(3000, () {console.log(Server is running on http://127.0.0.1:3000);
});访问http://127.0.0.1:3000/?nameJohnage30响应结果为
{message: Hello,query: {name: John,age: 30}
}示例根据不同的get请求返回对应内容
const http require(http);const server http.createServer((request, response) {//获取请求的方法let {method} request; //解构赋值等同于let method request.method;//获取请求的url路径let {pathname} new URL(request.url,http://127.0.0.1); //构造URLresponse.setHeader(content-type,text/html;charsetutf-8)console.log(method);console.log(pathname);if (method GET pathname /login){response.end(登录页面);}else if (method GET pathname /reg){response.end(注册页面);}else{response.end(404 NOT FOUND);}
});server.listen(9000, () {console.log(Start, 9000 is been listened);
}); 5.2.2 Post请求
在HTTP模块中post请求处理常使用监听事件的方式进行处理
request.on(,(){})
//request.on(事件名,回调函数);
以下是一个Post传递的例子
htmlheadtitleDocument/title/headbodyform actionhttp://127.0.0.1:9000 contentIEedgeinput typetext nameusernameinput typetext namepasswordinput typesubmit valuesubmit/form/body
/html
const http require(http);
const server http.createServer((request,response){//获取请求方法let body ;request.on(data,chunk{body chunk;})request.on(end,(){console.log(body)response.end(HelloHTTP)})
})server.listen(9000,(){console.log(Start);
})
代码详解
request.on(data, chunk {body chunk;
});客户端发送的请求包含数据例如 POST 请求的请求体这些数据会以“数据块”chunk的形式分批传递给服务器。每次接收到一个数据块时回调函数会被触发chunk 是当前接收到的这一块数据。 request.on(end, () {console.log(body);response.end(HelloHTTP);
});监听请求的end事件当客户端发送的数据流完全传输完毕时触发end事件
传入一个回调函数向客户端返回一个响应内容并结束响应。 5.3 响应设置
在HTTP请求发出后服务器将返回对应的报文传输至客户端response就是对应内容在其中可以设置相应属性帮助浏览器与客户端识别相应内容
· 设置响应状态码
//1. 设置响应状态码
response.statusCode 203;
response.statusCode 404;
· 设置响应描述
//2. 响应状态的描述
response.statusMessage iloveu
· 设置响应头
//3. 响应头的设置
response.setHeader(Content-type,text/html;charsetutf-8);
response.setHeader(Server,Node.js);
response.setHeader(test,[a,b,c]); //设置多个同名响应头· 设置响应体
//4. 响应体的设置
response.write(Hello);
response.end(end); //有且只有一个end响应 示例返回HTML页面
htmlheadstyletable{width: 500px;height:500px;background-color: beige;}table td{background-color: aqua;}/style/headbodytable border1trtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/tr/tablescriptlet tds document.querySelectorAll(td);tds.forEach(item{item.onclick function(){this.style.background #222;}})/script/body
/html
const http require(http);
const fs require(fs);const server http.createServer((request,response){//读取文件内容let html fs.readFileSync(./example.html);response.end(html);
})server.listen(9000,(){console.log(This server is been started)
}) const http require(http)
const fs require(fs);const server http.createServer((request,response){let {pathname} new URL(request.url,http://127.0.0.1)if (pathname /){let html fs.readFileSync(./example.html)response.end(html);}else if(pathname /index.css){let css fs.readFileSync(./index.css)response.end(css);}else if (pathname /index.js){let js fs.readFileSync(./index.js)response.end(js);}else{response.statusCode 404;response.end(h1404 NOT FOUNDh1)}
