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

简介: 实战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();
相关文章
|
8月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
8月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
8月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
8月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
11月前
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
198 2
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
762 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
12月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
773 4