• NodeJs 入门到放弃 — 网络服务器(三)


    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14484454.html

    http (协议)

    网络是信息传输、接收、共享的虚拟平台,而网络传输数据有一定的规则,称协议,而HTTP协议就是其中之一,且使用最为频繁。

    定义、约束、交互特点、工作原理

    定义:HTTP 即 超文本传输协议,是一种网络传输协议,采用的是请求 / 响应方式传递数据,该协议规定了数据在服务器与浏览器之间,传输数据的格式与过程

    约束:

    1. 约束了浏览器以何种格式两服务器发送数据

    2. 约束了服务器以何种格式接收客户端发送的数据

    3. 约束了服务器以何种格式响应数据给浏览器

    4. 约束了以何种格式接收服务器响应的数据

    交互特点:

    1. HTTP是无连接:无连接的含义是一次请求对应一次响应,限制每次连接只处理一个请求。服务器处理完客户端的请求,并收到客户端的应答后,即断开连接。采用这种方式可以节省传输时间。
    2. HTTP是媒体独立的:只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type类型。

    工作原理:

    在浏览器地址栏中输入网址,将网址发送DNS服务器进行域名解析,获取对应的IP地址,3次握手,浏览器与目标服务器建立TCP连接并发起请求,服务器处理请求发出响应,浏览器解析htm代码,对页面进行渲染呈现给用户。

    上述内容也是一道常见的面试题:浏览器输入地址后发生了什么

    状态码

    向服务器发出请求,此网页所在的服务器会返回一个HTTP状态码,用以响应浏览器的请求。

    常见的状态码:

    • 200 - 请求成功
    • 301 - 资源被永久转移到其它URL
    • 404 - 请求的资源不存在
    • 500 - 内部服务器错误

    MIME 类型

    文件类型的一种表述,用于标识文件类型。

    常见MIME类型:

    • text/html : .html
    • text/plain :纯文本
    • text/xml : xml
    • image/gif :.gif
    • image/jpeg :.jpg
    • image/png:.png

    http (模块)

    http模块是nodejs中系统模块,用于网络通讯,可以作为客户端发送请求,亦可以作为服务器端处理响应

    作为客户端发送请求

    由于大多数请求都是不带请求体的 GET 请求,因此最最最常用的方法:

    • http.get(url[, options][, callback])

      var http = require('http')
      var fs = require('fs')
      
      http.get('http://www.baidu.com/',function(res){
        // console.log(res);   
        // res 返回的即为一个可读流, 
        res.pipe(fs.createWriteStream('./a.html'))
      })
      

    作为服务器处理响应

    实现一个简易服务器步骤:

    1. 引入http通讯模块

    2. 创建服务器对象

    3. 监听 request 事件接收客户端请求

    4. 监听端口实现服务器功能

    5. 访问浏览器 127.0.0.1 或 localhost 或 局域网IP

    var http = require('http')
    
    // 创建服务器
    var server = http.createServer()
    
    // 监听request事件,请求发生返回数据,请求一次执行一次
    server.on('request',function(req,res){
      // req:请求对象,包含所有客户端请求的数据,请求头,请求体
      // res:响应对象,包含所有服务器响应的数据,响应头,响应体
    
      // 设置响应头 文件类型及字符编码
      res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); 
    
      res.write('<h1 style="color:red">欢迎访问 nodejs</h1>')
      res.end()  // 服务器结束响应
    })
    
    // 监听服务器80端口,默认就是80
    server.listen('80',function(){
      console.log('Server is running....');
    })
    
    

    客户端向服务器端传递数据

    1. GET 方式:GET请求直接被嵌入在路径中,URL是完整的请求路径,包括了?后面的部分,可以解析后面的内容作为GET请求的参数。且url 模块中的 parse 函数提供了这个功能。

      启动服务访问:http://127.0.0.1:3000/?name=Echoyya&city=BeiJing

    var http = require('http');
    var url = require('url');
     
    http.createServer(function(req, res){
        res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
     
        // 解析 url 参数
        var params = url.parse(req.url, true).query;
        res.write("姓名:" + params.name);
        res.write("城市:" + params.city);
        res.end();
    
    }).listen(3000);
    
    
    1. POST 方式:POST 请求的内容全部都在请求体中,http.ServerRequest 并没有一个属性为请求体, node.js 默认是不会解析请求体的,需要手动来做。

      启动服务访问:http://127.0.0.1:3000/

    var http = require('http');
    var querystring = require('querystring');
     
    var postHTML = 
      '<html><head><meta charset="utf-8"><title>POST</title></head>' +
      '<body>' +
      '<form method="post">' +
      '姓名: <input name="name"><br>' +
      '城市: <input name="city"><br>' +
      '<input type="submit">' +
      '</form>' +
      '</body></html>';
     
    http.createServer(function (req, res) {
      // 定义了一个post变量,用于暂存请求体的信息
      var post = "";
      req.on('data', function (chunk) {
        // 通过req的data事件监听函数,每当接受到请求体的数据,就累加到 post 变量中
        post += chunk;
      });
      // 触发end事件,通过querystring.parse将post解析为真正的POST请求格式,然后向客户端返回。
      req.on('end', function () {
        post = querystring.parse(post);   // 解析参数
        // 设置响应头部信息及编码
        res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'});
     
        if(post.name && post.city) {  // 输出提交的数据
            res.write("姓名:" + post.name);
            res.write("<br>");
            res.write("城市:" + post.city);
        } else {   // 输出表单
            res.write(postHTML);
        }
        res.end();
      });
    }).listen(3000);
    

    网页模板

    首先区分两个概念:

    静态网页:标准的HTML文件,可以包含文本,图像、声音、动画等,没有后台数据库、不可交互的网页。但可以出现各种动态的效果,如GIF动画、滚动字幕等。静态网页相对更新起来比较麻烦。

    动态网页:是指跟静态网页相对的一种网页编程技术。页面代码虽然没有变,但是显示的内容却是可以随着时间、参数、环境或者数据库操作的结果而发生改变。

    动态网页模板

    动态获取访问者客户端的IP,输出到网页:

    var http = require('http');
    
    http.createServer(function (req, res) {
      var ip = req.socket.remoteAddress;
      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
      res.write("<h1>你的IP地址是:"+ ip +"</h1>");
      res.end()
    }).listen(80);
    

    每个客户端请求的IP都不一样,可以使用数据拼接的方式,可以达到动态输出网页的效果,但输出给浏览的并非是一个完整的网页,实际上完整的网页代码要多得多。

    网页模板工作原理:把一些静态固定的内容,存储为静态文件,动态内容写成 模板语法,在使用模板引擎读取该文件,进行内容替换,最终实现一个动态页面,以下模拟操作:

    index.html:使用模板语法,动态获取访问者客户端的IP

    <!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>Home</title>
    </head>
    <body>
      <h1>你的IP地址是:<%=ip%></h1>
    </body>
    </html>
    

    template.js:启动服务访问:http://127.0.0.1 或本地局域网IP 或 本地可解析域名地址

    var http = require('http');
    var fs = require('fs');
    
    http.createServer(function (req, res) {
      
      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
      
      var ip = req.socket.remoteAddress;
      fs.readFile('./index.html',function(err,chunk){
        res.write( render(chunk.toString(),ip) )
        res.end();
      })
    
    }).listen(80);
    
    // 思想: 定义一个render 函数,用于将数据和html进行整合
    function render(htmlStr,data){
       return htmlStr.replace('<%=ip%>',data)
    }
    

    上集:NodeJs 入门到放弃 — 入门基本介绍(一)

    上集:NodeJs 入门到放弃 — 常用模块及网络爬虫(二)

    作者:Echoyya
    著作权归作者和博客园共有,商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    Web防止button按钮点击多次
    缓存
    A标签跳转链接并修改样式
    省、市、区 三级联动
    ASP.NET的OnClientClick与OnClick事件
    ASP:CheckBox获取前台的checked的属性
    c#字符串大小写转换
    C# Base64编码
    自定义滚动条样式 -webkit-scrollbar
    代码 三角
  • 原文地址:https://www.cnblogs.com/echoyya/p/14484454.html
Copyright © 2020-2023  润新知