zoukankan      html  css  js  c++  java
  • 请求响应原理及HTTP协议


    请求响应原理及HTTP协议

    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的组成

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

    2. http://www.itcast.cn/news/20181018/09152238514.html

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

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

    在开发阶段,客户端和服务器端使用同一台电脑,即开发人员电脑。

    本机域名:localhost
    本地IP   :127.0.0.1

    2.创建web服务器

    创建web服务器

     // 引用系统模块
     const http = require('http');
      // 创建web服务器
     const app = http.createServer();
      // 当客户端发送请求的时候
     app.on('request', (req, res) => {
            //  响应
           res.end('<h1>欢迎来到首页</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   发送数据

    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

    
    
    app.on('request', (req, res) => {
         // 设置响应报文
         res.writeHead(200, {•         'Content-Type': 'text/html;charset=utf8‘
         });
     });

    4. HTTP请求与响应处理

    4.1 请求参数

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

    4.2 GET请求参数

    1. 参数被放置在浏览器地址栏中,例如:http://localhost:3000/?name=zhangsan&age=20

    2. 参数获取需要借助系统模块url,url模块用来处理url地址

      const http = require('http');
       // 导入url系统模块 用于处理url地址
       const url = require('url');
       const app = http.createServer();
       app.on('request', (req, res) => {
           // 将url路径的各个部分解析出来并返回对象
               // true 代表将参数解析为对象格式
           let {query} = url.parse(req.url, true);
           console.log(query);
       });
       app.listen(3000);

    4.3 POST请求参数

    1. 参数被放置在请求体中进行传输

    2. 获取POST参数需要使用data事件和end事件

    3. 使用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)); 
         }); 
     });
    ​

    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('抱歉, 您访问的页面出游了');
         }
     });

    4.5 静态资源

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

    http://www.itcast.cn/images/logo.png

    // 引入系统模块http
    const http = require('http');
    // 创建数据库
    const app = http.createServer();
    // 引入系统模块url
    const url = require('url');
    const path = require('path');
    const fs = require('fs');
    ​
    app.on('request', (req, res) => {
        // res.writeHead(200, {
        //     'content-type': 'text/plain;charset=utf-8'
        // });
        // 获取用户的请求路径
        let pathname = url.parse(req.url).pathname;
        // 获取当前文件的绝对路径  将用户的请求路径转换为实际的服务器硬盘路径
        let realPath = path.join(__dirname, 'public' + pathname);
    ​
        // 读取文件
        fs.readFile(realPath, (error, result) => {
            // 如果文件读取失败
            if (error != null) {
                res.writeHead(404, {
                    'content-type': 'text/html;charset=utf-8'
                });
                res.end('文件读取失败');
                return;
            }
            res.end(result)
        })
    });
    ​
    app.listen(3000); //"192.168.43.226"
    console.log('服务器启动成功');

    4.6 动态资源

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

    http://www.itcast.cn/article?id=1
    http://www.itcast.cn/article?id=2

    4.7 客户端请求途径

    1. GET方式

    • 浏览器地址栏

    • link标签的href属性

    • script标签的src属性

    • img标签的src属性

    • Form表单提交

    2. POST方式

    • Form表单提交

    5. Node.js异步编程

    5.1 同步API, 异步API

    // 路径拼接
     const public = path.join(__dirname, 'public');
     // 请求地址解析
     const urlObj = url.parse(req.url);
     // 读取文件
     fs.readFile('./demo.txt', 'utf8', (err, result) => {
         console.log(result);
     });

    同步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 回调函数

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

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

    5.4 使用回调函数获取异步API执行结果

    function getMsg (callback) {
        setTimeout(function () {
            callback ({ msg: 'Hello Node.js' })
        }, 2000);
    }
    getMsg (function (msg) { 
        console.log(msg);
    });

    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 代码执行顺序分析

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

     

    5.7 Node.js中的异步API

     fs.readFile('./demo.txt', (err, result) => {});
    var server = http.createServer();
     server.on('request', (req, res) => {});

    如果异步API后面代码的执行依赖当前异步API的执行结果,但实际上后续代码在执行的时候异步API还没有返回结果,这个问题要怎么解决呢?

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

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

    5.8 Promise

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

    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) {
                resolve({name: '张三'})
            }else {
                reject('失败了') 
            } 
        }, 2000);
    });
    promise.then(result => console.log(result); // {name: '张三'})
           .catch(error => console.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方法获取异步函数执行的错误信息

      async function fn() {
          throw '发生了错误';
          return 123;
      }
      console.log(fn());
      fn().then(function (data) {
          console.log(data);
      }).catch(function (err) {
          console.log(err);
      })

     

    await关键字

    1. await关键字只能出现在异步函数中

    2. await promise await后面只能写promise对象 写其他类型的API是不不可以的

    3. await关键字可是暂停异步函数向下执行 直到promise返回结果

    // await关键字
    // 1.它只能出现在异步函数中
    // 2.await promise 它可以暂停异步函数的执行等待promise对象返回结果后再向下

    async function p1() { return 'p1'; } async function p2() { return 'p2'; } async function p3() { return 'p3'; } // 让文件顺序执行 async function run() { let r1 = await p1(); let r2 = await p2(); let r3 = await p3(); console.log(r1); console.log(r2); console.log(r3); } run();

     

    promisify方法改造现有异步API

    // 引入系统模块 fs
    const fs = require('fs');
    // 引入系统模块util里面的promisefy方法 改造现有异步函数api 让其返回promise对象从而支持异步函数语法
    const promisify = require('util').promisify;
    //调用promisify方法改造现有异步API 让其返回promise对象
    const readFile = promisify(fs.readFile);
    async function run() {
        let r1 = await readFile('./1.js', 'utf-8');
        let r2 = await readFile('./2.js', 'utf-8');
        let r3 = await readFile('./3.js', 'utf-8');
        console.log(r1);
        console.log(r2);
        console.log(r3);
    }
    run();
  • 相关阅读:
    1060. Are They Equal (25)
    1063. Set Similarity (25)
    Java基础学习总结(20)——基础语法
    Java基础学习总结(19)——Java环境变量配置
    Java基础学习总结(19)——Java环境变量配置
    Java基础学习总结(18)——网络编程
    Java基础学习总结(18)——网络编程
    Java基础学习总结(17)——线程
    Java基础学习总结(17)——线程
    Java基础学习总结(16)——Java制作证书的工具keytool用法总结
  • 原文地址:https://www.cnblogs.com/bky-/p/13861142.html
Copyright © 2011-2022 走看看