六、http模块

news2024/11/19 12:31:38

         HTTP —— 超文本传输协议,用于规范客户端浏览器和服务端以何种格式进行通信和数据交互;HTTP由请求和响应构成的,是一个标准的客服端服务器模型。 

HTTP请求响应过程

        先简单的来了解以下HTTP的请求响应过程:1.地址解析:解析URL得到协议名,主机名,端口和对象路径,如果主机名不是IP地址而是域名的话,需要通过DNS(域名系统)进行解析为IP地址;2.封装HTTP请求报文:将URL地址按照HTTP格式封装成HTTP请求报文(请求行,请求消息头,空行,请求体)存放在客户都的Socket对象;3.建立TCP连接:HTTP工作开始之前先与Web服务器建立TCP连接;4.浏览器向Web服务发送请求报文(建立TCP之后存在客户都的Socket对象通过TCP发送给Web服务器);5.Web服务器接收请求并向浏览器发送响应报文(状态行,响应消息头,空行,响应体);6.Web服务器关闭TCP连接。

http模块引入

        http模块是Node.js内置的核心模块,通过使用这个核心模块可以轻松地创建一个HTTP服务器,实现浏览器与Web服务器间的请求响应。

const http = require('http');

http.createServer() —— 创建Web服务器

        通过使用http.createServer()来创建Web服务器实例:

// 创建Web服务器
const server = http.createServer();

.on() —— 监听 request 请求

       为Web服务器绑定request事件,监听客户端发过来的request请求;只要客户端发来请求,就会触发request,从而调用事件处理函数;

// .on —— 监听request请求
server.on('request',function(req,res){
    console.log('执行事件处理');
})

.listen() —— 启动Web服务器

        调用 .listen( 端口 ,callback ) 方法来启动Web服务器;

server.listen('8080',function(){
    console.log('Web Server Running ...')
})

       用node命令执行文件;

        在浏览器中去请求 http://127.0.0.1:8080 或 http://localhost ,会触发.listen() 执行事件处理;


server.on('request',function(req,res){ })

req对象 —— 请求

        当服务器接收到客户端的请求就可以调用server.on()为服务器绑定request事件处理函数,同时可以在事件处理函数中访问客户端相关的数据和属性;

server.on('request',function(req,res){
    console.log('访问客户端属性');
    console.log('req.url',req.url);
    console.log('req.method',req.method);
})

res对象 —— 响应

        在request事件处理函数中,如果要访问服务器相关的数据或者属性可以使用res响应对象;

server.on('request',function(req,res){
    const str = '准备向客户端发送数据...';    
    res.end(str);   // 向客户端发送指定内容,并结束请求处理过程
})

        用 node命令 执行文件;可以看到数据已经发到客户端,但出现数据乱码现象,如下:

解决中文乱码问题 

       为防止中文数据显示乱码,需要设置请求头 Content-Type:text/html,charset=utf-8 ;

res.setHeader('Content-Type','text/html;charset=utf-8');


动态响应 

        以上通过请求http://127.0.0.1:8080或http://localhost:8080获取的请求响应内容,现在是通过不同的url来响应不同的内容,也就是能够进行一个动态的内容响应;首先要先获取客户端请求的url地址,判断用户请求的url地址是否存在,不存在如何处理,存在又如何将数据内容响应给客户端;

const http = require('http');

const server = http.createServer();
server.on('request',function(req,res){
    const url = req.url;
    let content = '<h2>404 Not Found</h2>';
    if(url === '/' || url === '/index.html'){
        content = '<p> 当前处于/首页 </p>'
    }
    res.setHeader('Content-Type','text/html;charset=utf-8');
    res.end(content);
})

server.listen('8080',function(){
    console.log('Web Server running...');
})

        用 node命令 执行,并通过浏览器请求地址http://127.0.0.1:8080或http://localhost:8080并修改url路径 /index.html 和 /my.html 进行测试:


http.request()

        使用 http.request(options[,callback]) 来做一个 GET 请求,options 参数可以是一个对象,字符串或者URL对象,若为字符串,会自动使用url.parse()进行解析,若为URL对象,会自动使用转为options对象;options中的参数有很多,这里列举了几个:

         下面来进行http.request()方法使用,请求本地搭建的服务器(127.0.0.1:3000)数据:

// request.js文件
const options = {
    hostname:'localhost',
    port:3000,
    method:'GET',
    path:'/api/swiperList'
}

// const options = 'http://127.0.0.1:3000/api/swiperList';

const request = http.request(options,(res)=>{
    // console.log(res);
    res.setEncoding('utf-8');
    res.on('data',function(chunk){
        console.log(JSON.parse(chunk));
    })
})

request.on('error',function(err){
    console.log("错误异常:",err.message);
})

request.end();


http.get()

        使用http.get(options,[callback]),http.get()和http.request()中的options的参数接收相同,大多数的请求都是GET请求且不带请求体,所以http.get()和http.request()的区别是设置请求为GET且自动调用req.end();

// get.js文件
const http = require('http');
const options = {
    hostname:'localhost',
    port:3000,
    method:'GET',
    path:'/api/swiperList'
}
var data = '';
var request = http.request(options,(response)=>{
    // console.log(response);
    response.setEncoding('utf-8');
    response.on('data',(chunk)=>{
        // console.log(chunk);
        data += chunk;
    })
    response.on('end',()=>{
        JSON.parse(data).swiperList.map((item)=>{
            console.log(item);
        });
    })
})

request.on('error',(error)=>{
    console.log("请求异常:",error);
})

request.end();


后端解决跨域问题

        前面通过http模块创建HTTP服务器,那么现在服务器通过前端页面发来的request请求时,例如前端页面是127.0.0.1:5500发出的请求是127.0.0.1:3000的请求,这里就存在跨域问题,浏览器的同源策略!

        前端页面在讲Vue的时候讲过可以使用VScode中的一个小工具[ Live Server ]来进行模拟,那么如果不清楚的这里提供一个跳转地址:第十九篇 fetch请求

前端页面 index.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>全国行政区</title>
</head>
<body>
    <div id='app'>
        <h2>全国行政区</h2>
        <ul class="city">
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $.ajax({
            url:'http://127.0.0.1:3000'
        }).then(res=>{
            const rs = JSON.parse(res); 
            for(const i in rs.result){
                $('.city').append('<li>'+rs.result[i].name+'</li>');
            }         
        })
    </script>
</body>
</html>

后端服务:(未处理跨域)

const http = require('http');
const fs = require('fs');
const server = http.createServer();
server.on('request',(req,res)=>{
    let data = fs.readFileSync(__dirname + '/全国行政区数据.json')
    res.end(data);
})
server.listen(3000,()=>{
    console.log('Web Server Running ...')
})

测试效果

         以上测试效果就是没有处理跨域的一个问题导致的,那么处理跨域的解决方法有很多种,这里不过的描述,等遇到再说,下面是通过这个后端来解决这个跨域的问题,设置以下3个属性:

Access-Control-Allow-Origin",'*'
Access-Control-Allow-Headers","X-Requested-With"
Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"

        下面来通过http模块创建HTTP服务器和fs模块将已经准备好了的json读取之后响应回去给客户端;通过浏览器模拟客户端发起请求127.0.0.1:3000看是否能够获取到json数据的响应;

const http = require('http');
const fs = require('fs');

const server = http.createServer();

server.on('request',(req,res)=>{
    // 解决跨域
    res.setHeader("Access-Control-Allow-Origin",'*');    // *表示任何IP可以访问
    res.setHeader("Access-Control-Allow-Headers","X-Requested-With"); 
    res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 
    res.setHeader("Content-Type","text/plain;charset=utf-8");
    let data = fs.readFileSync(__dirname + '/全国行政区数据.json')
    res.end(data);
})

server.listen(3000,()=>{
    console.log('Web Server Running ...')
})

        执行 node命令 将 服务器启动...  

        浏览器请求响应数据,如下可以看到客户端发起请求可以拿到json数据内容;

        以上就是本篇的全部内容了,下面是本篇的一些补充信息,感谢大家的支持!


 响应对象res常用的方法:

方法描述
res.json()返回JSON数据
res.send()根据不同的内容,返回不同格式的HTTP响应
res.render渲染模板页面
res.redirect()重定向到指定的URL
res.status()设置响应状态码,如:200,404,500...
res.set()设置响应报头的信息
res.end()结束请求 - 响应循环

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/106866.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习实验(四)——卷积神经网络编程

深度学习实验四:卷积神经网络编程 本次实验练习使用torch.nn中的类设计一个卷积神经网络进行MNIST手写体数字图像分类。 name x#填写你的姓名 sid B02014152#填写你的学号print(姓名:%s, 学号:%s%(name, sid))姓名:x, 学号:B02014152import torch import torch.nn as nn im…

完全背包问题(超级详细地讲解优化过程)

完全背包问题一、问题描述二、思路分析1、状态转移方程2、循环设计三、代码模板1、朴素版2、优化版&#xff08;1&#xff09;时间优化&#xff08;2&#xff09;空间优化一、问题描述 二、思路分析 完全背包和01背包的区别就在于01背包中&#xff0c;每个物品只能选择一次&am…

Java架构师大厂面试致命十连问,你接得住吗?

1.什么是缓存雪崩&#xff1f;怎么解决&#xff1f; ​ 编辑切换为居中 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 通常&#xff0c;我们会使用缓存用于缓冲对 DB 的冲击&#xff0c;如果缓存宕机&#xff0c;所有请求将直接打在 DB&#xff0c;造…

故事分享|27岁的Leader:要成为别人的灯塔,自己得先会“发光”

学习编程的年龄跨度很大&#xff0c;有还在读小学的10后小朋友&#xff0c;也有子孙满堂的八十岁老太太&#xff0c;但主力军&#xff0c;当属90后。 很多年前&#xff0c;90后还是许多人口中“垮掉的一代”。 许多年过去了&#xff0c;当90后逐渐摘掉不成熟的标签&#xff0…

ssh前置代理

ssh前置代理ssh前置代理Linux和mac配置ssh前置proxyUbuntu和mac的ncCentos的ncWindows的ssh前置proxyssh前置代理 适用于服务器无法直接连接过去,需要用proxy才可以连接的场景. Linux和mac配置ssh前置proxy nc属命令属于nmap-ncat包 Centos的nmap-ncat版本太低了,需要到https:…

学习笔记 - MapStruct 映射工具

学习笔记 - MapStruct 映射工具简介Maven 依赖实体类 Entity数据传输对象 DTO映射接口测试类IDEA 插件与 Lombok 一起使用参考资料简介 MapStruct是一个代码生成器&#xff0c;它基于约定优于配置的方法&#xff0c;极大地简化了Java bean类型之间映射的实现。 生成的映射代码使…

第8章 关系数据库设计

第8章 关系数据库设计 考试范围&#xff1a; 8.1-8.5&#xff0c;8.8&#xff0c;8.9 考试题型: 模式分解 考试内容&#xff1a; INF概念 非规范化设计的问题&#xff1a;数据冗余&#xff0c;插入/删除/更新异常 函数依赖的概念 平凡函数依赖 函数依赖集 最小(正则)覆…

数据结构和算法学习笔记之 03.单向双向链表和环形链表构建

5.单向链表 把一个节点Node当做是一个对象&#xff0c;改对象里面包含了数据和指向下一个节点的引用指针 5.1 链表的添加和遍历 5.1.1 思路分析 添加 创建一个head头节点表示链表的头节点&#xff0c;里面的存放数据的data null每添加一个元素就直接添加到链表的最后(尾插法…

Practise test day9

另类加法_牛客网 解题思路&#xff1a;位运算符 1 0001 2 0010 按位与&&#xff1a;如果两个二进制位都为1&#xff0c;则返回1&#xff0c;否则返回0 按位异或&#xff1a;两个二进制位相同返回0&#xff0c;不同返回1。 1.二进制位异或的结果&#xff0c;是两个数对应相加…

https-OPenSSL证书生成及自签名证书

目录 SSL/TLS 1、搭建OPenssl服务器 1.1、下载 1.2、安装下载好的exe程序 2、服务器端证书-生成key、CSR、CRT 2.1、进入如下目录&#xff0c;执行cmd 2.2、生成一个私钥key 2.3、由生成的私钥key生成一个待签名的CSR证书文件(公钥) 2.4、查看证书内容 3、自建CA证书 3.1…

跨境电商卖家如何创建客户参与的 Facebook 广告?

关键词&#xff1a;跨境电商卖家、客户参与、Facebook广告 想要从您的 Facebook 广告中获得更多潜在客户或转化&#xff1f;正在寻找为您自己的广告建模的成功秘诀&#xff1f; 在本文中&#xff0c;您将了解创建消费者响应的 Facebook 广告的八个技巧。 将您现有的 Facebook 受…

零基础能否转行做程序员,那些半路出家的程序员大神给你做了榜样

这些年&#xff0c;随着中国互联网产业的高速发展&#xff0c;对程序员这个职业的需求越来越大。而相对较高的薪水、简单的人际关系、入行不需要靠拼爹这些优点&#xff0c;也让越来越多的年轻人选择了这个职业。甚至很多本来已经从事了其他行业的年轻人&#xff0c;也都想转行…

Promise(三) promise自定义封装25-35

1.初始结构搭建 2.resolve和reject结构搭建 3.throw抛出异常改变状态 4.promise对象状态只能修改一次 5.then方法执行回调 6.指定多个回调的实现 7.同步修改状态then方法结果返回 8.异步修改状态then方法结果返回 9.then方法完善与优化 10.catch方法——异常穿透与值管…

网络技术基础复习——计算机网络基本概念七层模型

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 前言 本章将会复习网络技术的一些知识&#xff0c;了解网络基础概念&#x…

如何学习python?python该怎么学?如何高效率学习python?分享python的学习资料和网站

如何学习python&#xff1f; 1、学好python的第一步&#xff0c;就是马上到网站上下载一个python版本。我建议初学者&#xff0c;不要下载具有IDE功能的集成开发环境&#xff0c;比如Eclipse插件等。 2、下载完毕后&#xff0c;就可以开始学习了。学习过程中&#xff0c;我建议…

商业报表工具-FineReport JS 实现动态隐藏参数以及控制参数面板高度

1. 概述 1.1 版本 报表服务器版本 功能变更 11.0 -- 1.2 预期效果 开发报表的时&#xff0c;经常会遇到使用的参数控件较多的情况&#xff0c;这时候可以对一些不常用、不需要展现出来的的控件进行隐藏&#xff0c;当需要展示的时候再使其展示出来&#xff0c;如下图所示&…

数字化信道

数字化信道 数字化信道主要包括多相滤波和DFT两个模块。 多相滤波 多相滤波&#xff0c;就是将滤波器系数按照相数进行重排。在D倍抽取后&#xff0c;整个频带的频谱将混叠在0频附近[−Fs2D,Fs2D)[-\frac{F_s}{2D} ,\frac{F_s}{2D})[−2DFs​​,2DFs​​)。因此&#xff0c;…

超标量处理器设计——第四章_分支预测

超标量处理器设计——第四章_分支预测 参考《超标量处理器》姚永斌著 4.1 简述 分支预测主要与预测两个内容, 一个是分支方向, 还有一个是跳转的目标地址首先需要识别出取出的指令是否是分支指令, 如果是需要送入方向和地址预测模块: 分支预测最好的时机就是当前周期取到指令地…

【C++】拷贝构造函数

目录 默认拷贝构造函数 拷贝构造函数的原型&#xff1a; 为什么不用值传递&#xff1f; 为什么不用指针传递&#xff1f; 调用拷贝构造函数的3种情况 (旧对象去构造新对象) 我们熟悉的类型有以下操作&#xff1a; 1.声明&#xff1a;int a; 2.声明并初始化&#xff1a;in…

圣诞节怎么能缺少圣诞树呢?Python+HTML打造专属于你的圣诞树

前言&#xff1a; 美酒一杯让人醉&#xff0c;温馨陪伴浪漫随;雪花片片惹人爱&#xff0c;烦恼忧伤全不见;字里行间藏真情&#xff0c;文短情深送心愿:圣诞佳节快来到&#xff0c;祝大家永远开心幸福! Hello大家好&#xff0c;我是Dream。 圣诞节马上到了&#xff0c;一些朋友问…