Node之简单的先后端交互

时间 2019-11-17

标签 node 简单后端交互繁體版

原文原文链接

node是前端必学的一门技能，咱们都知道node是用的js作后端，在学习node以前咱们有必要明白node是如何实现先后端交互的。javascript

这里写了一个简单的经过原生

ajax与node实现的一个交互，刚刚学node的朋友能够看一看。一方面理解服务端与客户端是如何交互的，一方面更熟悉node开发。

先贴代码：（有兴趣的能够

copy到本地本身run一下)

主页面

的

html

index.html:html

1 <!doctype> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn1">food</button> 9 <button id="btn2">other</button>10 <h1 id="content"></h1>11 12 <script type="text/javascript" src="./client.js"></script>13 </body>14 </html>前端

接下来是

服务器端

的代码，运行方式是在

node环境下输入命令：node server.js

server.js:java

1 let http = require('http'); 2 let qs = require('querystring'); 3 4 let server = http.createServer(function(req, res) { 5 let body = ''; // 必定要初始化为"" 否则是undefined 6 req.on('data', function(data) { 7 body += data; // 所接受的Json数据 8 }); 9 req.on('end', function() { 10 res.writeHead(200, { // 响应状态11 "Content-Type": "text/plain", // 响应数据类型12 'Access-Control-Allow-Origin': '*' // 容许任何一个域名访问13 });14 if(qs.parse(body).name == 'food') {15 res.write('apple');16 } else {17 res.write('other');18 } 19 res.end();20 }); 21 });22 23 server.listen(3000);node

引入的

qs模块用于解析JSON

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

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

res // 响应服务器

客户端

的

js（功能就是负责一些DOM操做以及发送ajax请求）

client.js:app

1 let btn1 = document.getElementById('btn1'); 2 let btn2 = document.getElementById('btn2'); 3 let content = document.getElementById('content'); 4 5 btn1.addEventListener('click', function() { 6 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML); 7 }); 8 9 btn2.addEventListener('click', function() {10 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);11 });12 13 // 封装的ajax方法14 function ajax(method, url, val) { // 方法，路径，传送数据15 let xhr = new XMLHttpRequest();16 xhr.onreadystatechange = function() {17 if(xhr.readyState == 4) {18 if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {19 content.innerHTML = xhr.responseText;20 } else {21 alert('Request was unsuccessful: ' + xhr.status);22 }23 }24 };25 26 xhr.open(method, url, true); 27 if(val)28 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 29 xhr.send(val);30 } 函数

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

run方法：

先将

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

想要学习前端开发的同窗，能够加群：

543627393

学习哦！