笔记--HTTP协议与服务器端基础

最新推荐文章于 2024-05-06 10:06:58 发布
最新推荐文章于 2024-05-06 10:06:58 发布
阅读量121 收藏
点赞数
文章标签： http node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43488583/article/details/120291986
版权

-# 1. 服务端基础概念

1.1 网站的组成

- 网站应用程序主要分为两大部分：客户端和服务器端。
- 客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、javascript构建。
- 服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。

在这里插入图片描述

1.2 Node网站服务器

能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的请求，能够对请求做出响应。

在这里插入图片描述

1.3 IP地址

- 互联网设备的唯一标识。
- IP是Internet Protocol Address的简写，代表互联网协议地址。

在这里插入图片描述

1.4 域名

- 由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址。
- http://www.itheima.com  => http://124.165.219.100/
- 虽然在地址栏中输出的是网址，但是最终还是会将域名转换为ip才能访问到指定的网站服务器。

1.5 端口

- 端口是计算机与外界通讯交流的出口，用来区分服务器电脑中提供的不同的服务。

在这里插入图片描述

1.6 URL

统一资源定位符，又叫URL( Uniform Resource Locator )，是专为标识Internet网上资源位置而设的一种编址方式，
我们平时所说的网页地址指的即是URL。

URL的组成：
传输协议://服务器IP或域名;端口/资源所在位置标识
http://www.itcast.cn/news/20181018/09152238514.html
http：超文本传输协议，提供了一种发布和接收HTML页面的方法。

1.7 开发过程中客户端和服务器端说明

在开发过程中，客户端和服务器端使用同一台电脑，即开发人员电脑。

在这里插入图片描述

2. 创建web服务器

// 引用系统模块
const http = require('http');
// 创建web服务器
const app = http.createServer();
// 当客户端发送请求的时候
app.on('request',  (req, res) => {
    // 响应
    res.writeHead(200,{
        'content-type': 'text/html;charset=utf8'
    });
    res.end('<h1>hi，user</h1>');
});
// 监听3000端口
app.listen(3000);
console.log('服务器以启动，监听3000端口，请访问localhost:3000');

3. HTTP协议

3.1 HTTP协议的概念

超文本协议(英文：HyperText Transfer Protocol. 缩写：HTTP)规定了如何从网站服务器传输超文本到本地浏览器，
它基于客户端服务架构工作，是客户端(用户)和服务器端(网站)请求和应答的标准。

在这里插入图片描述

3.2 报文

在HTTP请求和响应的过程中传递的数据就叫报文，包括传送的数据和一些附加信息，并且要遵守规定好的格式。

在这里插入图片描述

3.3 请求报文

1. 请求方式（Request Method）
		- GET     请求数据
		- POST   发送数据

// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 当客户端有请求来的时候
app.on('request', (req, res) => {
    // 获取请求方式
    // req.method
    console.log(req.method);
    if (req.method == 'POST') {
        res.end('post');
    } else if (req.method == 'GET') {
        res.end('get');
    }
    // res.end('<h2>hello user</h2>')
});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

<!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>
</head>
<body>
    <!-- 
        method：指定当前表单提交的方式
        action：指定当前表单提交的地址
     -->
     <form method="post" action="http://localhost:3000">
        <input type="submit" name="">
    </form>
</body>
</html>

2. 请求地址（Request URL）
app.on('request', (req, res) => {
    req.headers       // 获取请求报文
    req.url                // 获取请求地址
    req.method        // 获取请求方法
});

// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 当客户端有请求来的时候
app.on('request', (req, res) => {
    // 获取请求方式
    // req.method
    // console.log(req.method);

    // 获取请求报文信息
    // req.headers
    console.log(req.headers['accept']);

    // 获取请求地址
    // req.url
    console.log(req.url);


    if (req.url == '/index' || req.url == '/') {
        res.end('welcome to homepage');
    } else if (req.url == '/list') {
        res.end('welcome to listpage');
    } else {
        res.end('not found');
    }
});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

在这里插入图片描述

3.4 响应报文

1. HTTP状态码
- 200 请求成功
- 404 请求的资源没有被找到
- 500 服务器发生错误
- 400 客户端请求有语法错误

2. 内容类型
- text/html
- text/css
- application/javascript
- image/jpeg
- application/json

在这里插入图片描述
没设置编码，会乱码：
在这里插入图片描述
设置编码格式：
在这里插入图片描述

4. HTTP请求与响应处理

4.1 请求参数

客户端向服务器发送请求时，有时需要带一些客户信息，客户信息需要通过请求参数的形式传递到服务器端，比如登陆操作。

在这里插入图片描述

4.2 GET请求参数

- 参数被放置在浏览器地址栏中，例如：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 用于处理url地址
const url = require('url');

// 当客户端有请求来的时候
app.on('request', (req, res) => {
    // 获取请求方式
    // req.method
    // console.log(req.method);

    // 获取请求报文信息
    // req.headers
    console.log(req.headers['accept']);

    // 获取请求地址
    // req.url
    console.log(req.url);
    // 1) 要解析的URL地址
    // 2) 将要查询参数解析成对象形式
    console.log(url.parse(req.url, true));
    let params = url.parse(req.url, true).query;
    console.log(params.name);
    console.log(params.age);

    // 设置状态码
    res.writeHead(400);


    if (req.url == '/index' || req.url == '/') {
        res.end('welcome to homepage');
    } else if (req.url == '/list') {
        res.end('welcome to listpage');
    } else {
        res.end('not found');
    }
});
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

4.3 POST请求参数

- 参数被放置在请求体中进行运输
- 获取POST参数需要使用data事件和end事件
- 使用querystring系统模块将参数转换为对象格式

// 导入系统模块querystring用于将HTTP参数转换为对象格式
const querystring = require('querystring');

app.on('request', (req, res) => {
    let postData = '';
    // 监听参数传输事件
    req.on('data', (chunk) => postData += chunk);
    // 监听参数传输完毕事件
    req.on('end', () => {
        console.log(querystring.parse(postData));
    });
});
// 监听端口
app.listen(3000);
console.log('网站启动成功');

HTML代码：

<!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>
</head>
<body>
    <!-- 
        method：指定当前表单提交的方式
        action：指定当前表单提交的地址
     -->
     <form method="post" action="http://localhost:3000">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>
</html>

JS代码：

// 用于创建网站服务器的模块
const http = require('http');
// app对象就是网站服务器对象
const app = http.createServer();
// 处理请求参数模块
const querystring = require('querystring');

// 当客户有请求来的时候
app.on('request', (req, res) => {
    // post参数是通过事件的方式接受的
    // data 当请求参数传递的时候触发data事件
    // end 当参数传递完成的时候触发end事件

    let postParams = '';

    req.on('data', params => {
        postParams += params;
    });

    req.on('end', () => {
        console.log(querystring.parse(postParams));
    });

    res.end('OK');
});
// 监听3000端口
app.listen(3000);
console.log('服务器启动成功');

运行结果：
在这里插入图片描述

4.4 路由

http://localhost:3000/index
http://localhost:3000/login
路由是指客户端请求地址与服务器端程序代码的对应关系。简单的说，就是请求什么响应什么。

在这里插入图片描述

app.on('request', (req, res) => {
    // 获取客户端的请求路径
    let { pathname } = url.parse(req.url);
    if (pathname == '/' || pathname == '/index') {
        res.end('欢迎来到首页');
    } else if (pathname == '/list') {
        res.end('欢迎来到列表页');
    } else {
        res.end('抱歉，您访问的页面出游了');
    }
});

// 1. 引入系统模块http
// 2. 创建网站服务器
// 3. 为网站服务器对象添加请求事件
// 4. 实现路由功能
//     1. 获取客户端的请求方式
//     2. 获取客户端的请求地址
const http = require('http');
const url = require('url');
const app = http.createServer();

app.on('request', (req, res) => {
    // 获取请求方式
    const method = req.method.toLowerCase();
    // 获取请求地址
    const pathname = url.parse(req.url).pathname;

    // 设置HTTP状态码、内容类型，编码
    res.writeHead(200, {
        'content-type': 'text/html;charset=utf8'
    })

    if (method == 'get') {
        
        if (pathname == '/' || pathname == '/index') {
            res.end('欢迎来到首页')
        } else if ((pathname == '/list')) {
            res.end('欢迎来到列表页')
        } else {
            res.end('您访问的页面不存在')
        }
    } else if (method == 'post') {

    }
});

app.listen(3000);
console.log('服务器启动成功');

4.5 静态资源

服务端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、javascript、image文件。
http://www.itcast.cn/images/logo.png

4.6 动态资源

相同的请求地址不同的响应资源，这种资源就是动态资源。
http://www.itcast.cn/article?id=1
http://www.itcast.cn/article?id=2

// 1. 引入系统模块http
// 2. 创建网站服务器
const http = require('http');
const url = require('url');
const path = require('path');
const fs = require('fs');
const mime = require('mime');

const app = http.createServer();

app.on('request', (req, res) => {
    // 获取用户的请求路径
    let pathname = url.parse(req.url).pathname;
    console.log(pathname);
    // 将用户的请求路径转换为实际的服务器硬盘路径
    let realPath = path.join(__dirname, 'public' + pathname);
    console.log(realPath);

    // 列出所有内容类型，记得要安装mime模块 npm install mime
    let type = mime.getType(realPath);
    console.log(type);

    // 读取文件
    fs.readFile(realPath, (error, result) => {
        // 如果文件读取失败
        if (error != null) {
            res.writeHead(404, {
                'content-type': 'text/html;charset=utf-8'
            });
            res.end('文件读取失败');
            return;
        } else {
            console.log('文件读取成功');
            res.writeHead(200, {
                'content-type': 'text/html;charset=utf-8'
            });
            res.end(result);
        }
    });
});

app.listen(3000);
console.log('服务器启动成功');
若梦丶忆流年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTTP协议理解及服务端与客户端的设计实现
严振杰
06-20 2万+
本文主要帮助读者理解 HTTP 的协作原理、HTTP 相关的各层协议，在服务端和客户端的架构设计和一些优化的技巧，本文中主要讲述逻辑思想和协议远离，会使用部分 Java 代码，但会有详细的讲解，非开发应该也读的明白。 个人实现过一款WebServe...
客户端 服务器通信协议,HTTP协议-客户端和服务端的通信
weixin_35082950的博客
08-04 1852
你是否知道我们在网页浏览器地址栏输入要访问的url就能访问到对应的web页面？实际上，当我们输入想要访问的url后，浏览器先分析url上的域名信息，通过DNS服务器解析查询到对应的IP地址和web进行通信，这个通信过程使用的就是HTTP协议。我们通过一个简单的图来阐述这个过程：HTTP(Hyper Text Transfer Protocol)，超文本传输协议，是通过请求和响应的交换满足客户端和服...
HTTP协议 有这篇文章足够了
Unknowncheats的博客
02-01 461
HTTP 协议详解 HTTP（HyperText Transfer Protocol）超文本传输协议。其最初的设计目的是为了提供一种发布和接收HTML页面的方法。 HTTP是一个客户端（用户）和服务端之间请求和应答的标准。 用户通过Web浏览器或其它软件工具，向指定服务器的指定端口（默认端口为80）发起一个HTTP请求。 请求获取该服务器上存储的一些资源，比如：HTML文件、图片、文档 等； HTTP服务器则在指定端口（默认端口为80）监听客户端的请求。 一旦收到客户端请求，服务器会向客户端返回一...
网络编程——实现HTTP服务器端
beilizhang的博客
05-06 2473
参考 《TCP/IP网络编程》 尹圣雨 Web服务器端 概述 Web服务器端是，基于HTTP（Hypertext Transfer Protocol）协议，将网页对应文件传输给客户端的服务器端。 Hypertext（超文本）是可以根据客户端请求而跳转的结构化信息。 HTTP协议是以超文本传输为目的而设计的应用层协议，同样基于TCP/IP实现。 浏览器属于基于套接字的客户端，因为连接到任意Web服务器端时，浏览器内部也会创建套接字。只是浏览器将服务器端传输的HTML格式的超文本解析为可读性较强的视图。 H
HTTP详解，以及简易HTTP web服务器的实现
孤傲小二~阿沐的博客
10-23 2466
HTTP详解，以及简易HTTP web服务器的实现
USB学习笔记-USB概述与协议基础.pdf
10-26
USB学习笔记_USB概述与协议基础.pdf
Python-基础学习笔记.docx
11-15
Python-基础学习笔记.docx
大学计算机基础-重点笔记.doc
11-18
大学计算机基础-重点笔记.doc
C语言学习笔记-详细而全面的基础教程.pdf
11-16
C语言学习笔记-详细而全面的基础教程.pdf
HTTP协议
zhurigeng的博客
08-03 308
学习http协议
基于Http协议的Web服务端程序
09-26
基于HTTP协议的WEB服务器,简易版的Tomcat.服务端读取配置文件完成对服务 器的初始化,并通过Socket网络编程架构服务器端.浏览器作为客户端,向服务器发送请求.服务端接受请求并将其封装为一个HTTPRequest对象,并对其解析请求数据包 ,根据解析的消息头生成对应的HTTPResponse对象,并将此对象通过Socket流再写到客户端,形成静态页面
HTTP服务端和客户端
01-20
JAVA实现http服务端和客户端 服务器功能 提供HTML,JPG 等MIME 类型的资源 客户端功能 访问服务器，获取HTML 和JPG 资源，保存到本地 磁盘 访问服务器，获取WMV 等其他资源类型，保存到 本地磁盘
Http服务器与客户端实例（Java版）
10-12
通过该实例可以清楚了解整个 http包头及 工作原理
实现http服务器端
lpj2055的博客
05-26 736
1. HTTP：Hypertext Transfer Protocol超文本传输协议。超文本是可以根据客户端请求而跳转的结构化信息。 HTTP协议是以超文本传输为目的而设计的应用层协议，是基于TCP/IP实现的协议，实现该协议就相当于实现了Web服务器端。 2. Http协议又称为无状态的stateless协议 从下图中可以看出服务器端响应客户端请求后立即断开，不会维持连接状态。即使同一个客户端再次发送请求，服务器端也无法辨认，而是以同等方式对待。 为了弥补HTTP无法保持连接的缺点，Web编程中通
HTTP协议、http服务器的实现-1
apollo_miracle的博客
08-02 1864
1 HTTP协议简介 在Web应用中，服务器把网页传给浏览器，实际上就是把网页的HTML代码发送给浏览器，让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP，所以： HTML（超文本标记语言，HyperText Markup Language 的简称）是一种用来定义网页的文本； HTTP（超文本传输协议，HyperText Transfer Protocol 的简称）是在网络上传输H...
服务端与客户端、http协议
爱敲代码的狼仔
09-22 1629
一、服务端与客户端 1.1. 什么是上网 通过因特网（internet）进行获取各种各样的资源（文字、图片、音频、视频,....css/js） 获取资源的过程就也就是享受服务的过程 。 1.2 享受服务的流程 1、现实生活中的服务 请求： 处理： 响应： 2、互联网上的服务(客户端与服务器端的一次请求流程) 应用程序从架构上分为：C/S架构、B/S架构。 应用程序：除了安装的操作系统之后的软件统称为应用程序。 C/S: C:client客户端 S:server服务器 C
静态代理IP是否支持HTTP和HTTPS？
最新发布
smart_proxy_bo的博客
05-06 110
然而，需要注意的是，速度的快慢还与具体的网络环境和服务器性能有关，有时候HTTPS协议的速度可能会很接近或甚至超过HTTP协议。HTTP代理：静态HTTP代理是基于HTTP协议的代理方式。无论是使用HTTP还是HTTPS，静态代理IP都可以通过配置服务器的代理设置来实现对网络请求的转发和代理。总的来说，静态代理IP使用的协议的区别在于其适用的应用场景和支持的协议类型。HTTP代理适用于使用HTTP协议的应用，而SOCKS5代理则支持更多的协议类型。静态代理IP使用的协议有HTTP和SOCKS5两种。
http实现post请求时本地没问题，线上报413错误、nginx配置免费https、nginx反向代理
“代码农”微信公众号
04-30 1213
http实现post请求时本地没问题，线上报413错误、nginx配置免费https、nginx反向代理
【Jenkins】持续集成与交付 （八）：Jenkins凭证管理（实现使用 SSH 、HTTP克隆Gitlab代码）
✨ 欢迎来到【Seal ^_^ 的CSDN博客】！这里是我记录技术心得、分享经验的地方。✨
04-29 2616
🟣【Jenkins】持续集成与交付 （八）：Jenkins凭证管理（实现使用 SSH 、HTTP克隆Gitlab代码）
群体遗传学习笔记-基础篇
06-12
下面是关于群体遗传学的基础知识： 1. 群体遗传学的研究对象是整个种群，而非个体。 2. 群体遗传学的主要研究内容包括基因频率、基因型频率、遗传平衡和遗传漂变等。 3. 基因频率指的是在群体中某个基因的所有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值