请求响应原理及HTTP协议

ppzhang
382 阅读6分钟

目标

  • 能够知道B/S软件体系结构
  • 能够搭建Web服务器
  • 能够使用获取GET、POST参数的方式获取参数
  • 能够掌握如何制作路由
  • 能够知道同步异步的概念
  • 能够知道回调函数的概念

目录

  • C/S、B/S软件体系结构分析
  • 服务器端基础概念
  • 创建web服务器
  • HTTP协议
  • HTTP请求与响应处理
  • Node.js的工作原理

1. 服务器端基础概念

1.1 网站的组成

网站应用程序主要分为两大部分：客户端和服务器端。

客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。

服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑

1.2 Node网站服务器

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

1.6 URL

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

URL的组成

传输协议://服务器IP或域名:端口/资源所在位置标识

www.itcast.cn/news/201810…

http：超文本传输协议，提供了一种发布和接收HTML页面的方法。

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

在开发阶段，客户端(浏览器）和服务器端（远端的电脑）使用同一台电脑，即开发人员电脑。

本机域名：locallhost

本地IP：127.0.0.1

2. 创建web服务器

创建web服务器

// 引用系统模块
const http = require('http');
// 创建web服务器
const app = http.createServer(); // 返回值就是网站服务器对象
// 当客户端发送请求的时候
app.on('request', (req, res) => { // 添加请求事件， req代表请求对象（请求地址、请求对象），res代表响应对象
    // 响应
    res.end('<h1>hi,user</h1>');
});
// 监听3000端口
app.listen(3000);
console.log('服务器已启动，监听3000端口，请访问localhost:3000')

3. HTTP协议

3.1 HTTP协议的概念

超文本传输协议（HTTP），规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端（用户）和服务器端（网站）请求和应答的标准。

3.2 报文

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

image.png

3.3 请求报文

1. 请求方式(Request Method)

- GET 请求数据
- POST 发送请求

POST相对GET更安全

2. 请求地址(Request URL)

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

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请求参数

4.3 PST请求参数

  • 参数被放置在请求体中进行传输
  • 获取POST参数需要使用data事件和end事件
  • 使用queystring系统模块将参数转换为对象格式
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', () => {
        // querystring.parse(postParams)
        console.log( querystring.parse(postParams));
    });

    res.end('ok');
});

4.4 路由

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

image.png

// 当客户端发来请求
app.on('request', (req, res) => {
const { host } = req.headers;
if (req.url !== "/favicon.ico") {
const myURL = new URL(req.url, `http://${host}`);
    // 获取客户端的请求路径
        const { pathname } = myURL;
        if (pathname == ('/index' || '/')) {
            // console.log(pathname);
            res.write('<h2>欢迎来到首页</h2>');
            // return;
        } else if (pathname == ('/list')) {
            res.write('Welcome to listpage');
        } else {
            res.write('no found');
        }
 }
}

4.5 静态资源

服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、JavaScript、image文件。

www.itcast.cn/images/logo…

请求了一张图片

4.6 动态资源

相同的请求地址不同的响应资源，这种资源就是动态资源。

www.itcast.cn/article?id=…

www.itcast.cn/article?id=…

得到的是两个页面

指定返回资源的类型

在低版本浏览器下，如果不指定资源类型，是无法正常输出资源的，不管有没有读取到文件，都需要指定资源类型。

const mime = require('mime');
  • 使用npm mime模块判断文件类型，输出对应的格式
 fs.readFile(realPath, (error, result) => {
            if (error != null) {
                res.writeHead(200, {"Content-type": "text/html;charset=utf-8",});
                res.end('文件读取失败');
                return;
            } else {
                res.writeHead(200, {"Content-type": mime.getType(realPath)});
            } 
           res.end(result);
        });

5. Node.js异步编程

// 路径拼接
const public = path.join(__dirname,'public');
// 请求地址解析
const { host } = req.headers;
const myURL = new URL(req.url, `http://${host}`);
// 读取文件
fs.readFlie('./demo.txt','utf8',(err, result) => {
    console.log(result);
});

5.1 同步API，异步API

同步API：只有当前API执行完成后，才能继续执行下一个API

console.log('before');
console.log('after');

异步API：当前API的执行不会阻塞后续代码的执行

console.log('before');
setTimeout(
    () => { console.log('last');
}, 2000);
    
console.log('after');

5.2 同步API，异步API的区别（获取返回值）

同步API可以从返回值中拿到API执行的结果，但是异步API是不可以的

// 同步
function sum (n1, n2) {
    return n1 + n2;
}
const result = sum (10 ,20);

// 异步
function getMsg() {
 setTimeout(function() {
     return { msg: 'Hello Node.js'}
     }, 2000);
 }
 
 const msg = getMsg ();

5.3 回调函数

自己定义函数让别人去调用

// getDate函数定义
function getData (callback) {}
// getData函数调用
getData (() => {});

5.5 同步API，异步API的区别（代码执行顺序）

同步API从上到下依次执行，前面代码会阻塞后面代码的执行

for (var i = 0; i < 100000; i++) {
    console.log(i);
}
console.log('for循环后面的代码');

异步API不会等待API执行完成后再向下执行代码

console.log('代码开始执行');
setTimeout(() => {console.log('2秒后执行的代码')}, 2000);
setTimeout(() => {console.log('0秒后执行的代码')}, 0);
console.log('代码执行结束');

5.6 代码执行顺序分析

consolee.log('代码开始执行');
setTimeout(() => {
    console.log('2秒后执行的代码');
    },2000);
setTimeouy(() => {
    console.log('0秒后执行的代码');
    },0);
    console.log('代码结束执行'）;

image.png

5.7 Node.js中的异步API

fs.readFlie('./demo.txt', (err, result) => {});

var server = http.createServer();
server.on('request', (req, res) => {});

如果异步API后面代码的执行依赖当前异步API的执行结果。

fs.readFile('./demo.txt',(err, result) => {});
console.log('文件读取结果');

需求：依次读取A文件、B文件、C文件

5.8 Promise

Promise出现的目的是解决Node.js异步编程中回调地狱的问题。

  • Promise本身是一个构造函数
let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (true) {
            resolve({ name:'张三'})
        }else {
            reject('失败了')
        } 
    },2000);
});

promise.then(result => console.log(result); // {name: '张三'}
        .catch(error => conosole.log(error); // 失败了

5.9 异步函数

异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。

const fn = async () => {};

async function fn () {}

async关键字

  1. 普通函数定义前加async关键字 普通函数变成异步函数
  2. 异步函数默认返回promise对象
  3. 在异步函数内部使用return关键字进行结果返回 结果会被包裹在promise对象中 return关键字替代了resolve方法
  4. 在异步函数内部使用throw关键字抛出程序异常
  5. 调用异步函数再链式调用then方法获取异步函数执行结果
  6. 调用异步函数再链式调用catch方法获取异步函数执行的错误信息

await 关键字

  1. await关键字只能出现在异步函数中
  2. await promise await后面只能写promise对象 写其他类型的API是不可以的
  3. await关键字可暂停异步函数向下执行 直到promise返回结果
avatar
文章
阅读
粉丝