实战Node.js之GET/POST请求在Web 应用架构在客户端的使用

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 实战Node.js之GET/POST请求在Web 应用架构在客户端的使用

@[toc]

GET/POST请求

在这里插入图片描述

在许多情况下,我们的服务器需要处理用户的浏览器,例如表单提交。
get/post请求通常用于向服务器提交表单。

var http = require('http');
var url = require('url');
var util = require('util');
 
http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'});
    res.end(util.inspect(url.parse(req.url, true)));
}).listen(3000);

在浏览器中访问http://localhost:3000/user?name=黎燃&url=并查看返回的结果:
在这里插入图片描述我们可以使用URL解析方法来解析URL中的参数。代码如下:

var http = require('http');
var url = require('url');
var util = require('util');
 
http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/plain'});

解析 url 参数

    var params = url.parse(req.url, true).query;
    res.write("网站名:" + params.name);
    res.write("\n");
    res.write("网站 URL:" + params.url);
    res.end();

获取 POST 请求内容

post请求的内容都在请求正文中,http Serverrequest没有属性content作为请求正文,因为等待发送请求正文可能是一项耗时的任务。
例如,在上传文件时,我们可能不需要注意请求主体的内容。
恶意post请求将极大地消耗服务器的资源,因此node JS默认情况下不会解析请求体。

var http = require('http');
var querystring = require('querystring');
var util = require('util');

定义了一个post变量,用于暂存请求体的信息

var post = ''; 

通过req的data事件监听函数,每当接受到请求体的数据,就累加到post变量中

req.on('data', function(chunk){    
        post += chunk;
    });

在end事件触发后,通过querystring.parse将post解析为真正的POST请求格式,然后向客户端返回。

 req.on('end', function(){    
        post = querystring.parse(post);
        res.end(util.inspect(post));
    });

Web 应用架构

Web服务器通常指的是Web服务器,它指的是驻留在Internet上的特定类型计算机的程序。
web服务器的基本功能是提供web信息浏览服务。它只需要支持HTTP协议、HTML文档格式和URL,并与客户端的web浏览器协作。
大多数web服务器支持服务器端脚本语言(PHP、python、Ruby)等,并通过脚本语言从数据库获取数据,然后将结果返回到客户端浏览器。
目前,最流行的三种web服务器是Apache、nginx和IIS。
在这里插入图片描述
节点。JS提供了一个HTTP模块。HTTP模块主要用于构建HTTP服务器和客户端。使用HTTP服务器或客户端函数时必须调用HTTP模块。代码如下:

var http = require('http');
var http = require('http');
var fs = require('fs');
var url = require('url');

创建服务器

http.createServer( function (request, response) {  

解析请求,包括文件名

var pathname = url.parse(request.url).pathname;

输出请求的文件名

console.log("Request for " + pathname + " received.");

从文件系统中读取请求的文件内容

 fs.readFile(pathname.substr(1), function (err, data) {
      if (err) {
         console.log(err);

HTTP 状态码: 404 : NOT FOUND,Content Type: text/html

response.writeHead(404, {'Content-Type': 'text/html'});
      }else{  

响应文件内容

 response.write(data.toString()); 

发送响应数据

response.end();

控制台会输出以下信息

console.log('Server running at http://127.0.0.1:8080/');

使用 Node 创建 Web 客户端

Node需要引入HTTP模块来创建web客户端和客户端JS文件

var http = require('http');

用于请求的选项

var options = {
   host: 'localhost',
   port: '8080',
   path: '/index.html'  
};

处理响应的回调函数

var callback = function(response){

不断更新数据

 var body = '';
   response.on('data', function(data) {
      body += data;
   });

数据接收完成

console.log(body);

向服务端发送请求

var req = http.request(options, callback);
req.end();
相关文章
|
15天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
1天前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
10天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
10天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
22天前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
25天前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
40 4
|
26天前
|
消息中间件 Java Kafka
实时数仓Kappa架构:从入门到实战
【11月更文挑战第24天】随着大数据技术的不断发展,企业对实时数据处理和分析的需求日益增长。实时数仓(Real-Time Data Warehouse, RTDW)应运而生,其中Kappa架构作为一种简化的数据处理架构,通过统一的流处理框架,解决了传统Lambda架构中批处理和实时处理的复杂性。本文将深入探讨Kappa架构的历史背景、业务场景、功能点、优缺点、解决的问题以及底层原理,并详细介绍如何使用Java语言快速搭建一套实时数仓。
132 4
|
26天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
26天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
29 2
|
1月前
|
运维 NoSQL Java
后端架构演进:微服务架构的优缺点与实战案例分析
【10月更文挑战第28天】本文探讨了微服务架构与单体架构的优缺点,并通过实战案例分析了微服务架构在实际应用中的表现。微服务架构具有高内聚、低耦合、独立部署等优势,但也面临分布式系统的复杂性和较高的运维成本。通过某电商平台的实际案例,展示了微服务架构在提升系统性能和团队协作效率方面的显著效果,同时也指出了其带来的挑战。
82 4
下一篇
DataWorks