Node实现简单的前后端交互-js教程-PHP中文网

首页

web前端

js教程

Node实现简单的前后端交互

小云云

Dec 21, 2017 am 11:13 AM

node 交互后端

node是前端必学的一门技能，我们都知道node是用的js做后端，在学习node之前我们有必要明白node是如何实现前后端交互的。本文就为大家带来一篇Node之简单的前后端交互(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

这里写了一个简单的通过原生ajax与node实现的一个交互，刚刚学node的朋友可以看一看。一方面理解服务端与客户端是如何交互的，一方面更熟悉node开发。

先贴代码：（有兴趣的可以copy到本地自己run一下）

主页面的html

index.html：

<!doctype>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <button id="btn1">food</button>
  <button id="btn2">other</button>
  <h1 id="content"></h1>

  <script type="text/javascript" src="./client.js"></script>
 </body>
</html>

登录后复制

接下来是服务器端的代码，运行方式是在node环境下输入命令：node server.js

server.js：

let http = require('http'); 
let qs = require('querystring'); 

let server = http.createServer(function(req, res) {
 let body = ''; // 一定要初始化为"" 不然是undefined
 req.on('data', function(data) {
  body += data; // 所接受的Json数据
 });
 req.on('end', function() { 
  res.writeHead(200, { // 响应状态
   "Content-Type": "text/plain", // 响应数据类型
   'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问
  });
  if(qs.parse(body).name == 'food') {
   res.write('apple');
  } else {
   res.write('other');
  } 
  res.end();
 }); 
});

server.listen(3000);

登录后复制

引入的qs模块用于解析JSON

req.on('data', callback); // 监听客户端的数据，一旦有数据发送过来就执行回调函数

req.on('end', callback); // 数据接收完毕

res // 响应

客户端的js（功能就是负责一些DOM操作以及发送ajax请求）

client.js：

let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');

btn1.addEventListener('click', function() {
 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});

btn2.addEventListener('click', function() {
 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});

// 封装的ajax方法
function ajax(method, url, val) { // 方法，路径，传送数据
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
   if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
    content.innerHTML = xhr.responseText;
   } else {
    alert('Request was unsuccessful: ' + xhr.status);
   }
  }
 };

 xhr.open(method, url, true); 
 if(val)
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
 xhr.send(val);
}

登录后复制

这个简单的交互就是这样的，其实我们在第一次学习后端语言的时候第一件事就是写一个前后端交互程序，这样会帮助我们更好的理解前后端的分工。

run方法：

先将server.js运行起来，然后打开html来请求响应。

热AI工具

热工具

热门话题

Java教程

1673

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

图文详解Node V8引擎的内存和GC Mar 29, 2023 pm 06:02 PM

本篇文章带大家深入了解NodeJS V8引擎的内存和垃圾回收器（GC），希望对大家有所帮助！

一文聊聊Node中的内存控制 Apr 26, 2023 pm 05:37 PM

基于无阻塞、事件驱动建立的Node服务，具有内存消耗低的优点，非常适合处理海量的网络请求。在海量请求的前提下，就需要考虑“内存控制”的相关问题了。 1. V8的垃圾回收机制与内存限制 Js由垃圾回收机

node项目中如何使用express来处理文件的上传 Mar 28, 2023 pm 07:28 PM

怎么处理文件上传？下面本篇文章给大家介绍一下node项目中如何使用express来处理文件的上传，希望对大家有所帮助！

Pi Node教学：什么是Pi节点？如何安装和设定Pi Node？ Mar 05, 2025 pm 05:57 PM

PiNetwork节点详解及安装指南本文将详细介绍PiNetwork生态系统中的关键角色——Pi节点，并提供安装和配置的完整步骤。Pi节点在PiNetwork区块链测试网推出后，成为众多先锋积极参与测试的重要环节，为即将到来的主网发布做准备。如果您还不了解PiNetwork，请参考Pi币是什么？上市价格多少？Pi用途、挖矿及安全性分析。什么是PiNetwork？PiNetwork项目始于2019年，拥有其专属加密货币Pi币。该项目旨在创建一个人人可参与

分享接口设计文档的12个注意点 Apr 24, 2023 am 10:58 AM

最近在做接口文档评审的时候，发现一个小伙伴定义的出参是个枚举值，但是接口文档没有给出对应具体的枚举值。其实，如何写好接口文档，真的很重要。今天田螺哥，给你带来接口设计文档的12个注意点~

打开win11的分屏交互方式 Dec 25, 2023 pm 03:05 PM

在win11系统中，我们可以通过打开分屏交互来让多个显示器使用同一款系统，共同操作，但是很多朋友不知道分屏交互怎么开启，其实只要在系统设置中找到显示器就可以了，下面一起来学习一下吧。win11分屏交互怎么打开1、点击开始菜单，找到其中的“设置”2、然后在其中找到“系统”设置。3、进入系统设置后，在左侧选择“显示”4、接着在右边的多显示器中选择“扩展这些显示器”即可。

Vue3+TS+Vite开发技巧：如何与后端API进行交互 Sep 08, 2023 pm 06:01 PM

Vue3+TS+Vite开发技巧：如何与后端API进行交互引言：在网页应用开发中，前端与后端之间的数据交互是一个非常重要的环节。Vue3作为一种流行的前端框架，与后端API进行交互的方式也有很多种。本文将介绍如何使用Vue3+TypeScript+Vite开发环境来与后端API进行交互，并通过代码示例来加深理解。一、使用Axios发送请求Axios是