Node之简单的前后端交互

2018-06-24 00:47:27来源：未知阅读 ()

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

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

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

主页面的html

index.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:

 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);

引入的qs模块用于解析JSON

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

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

res // 响应

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

client.js:

 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 }