Node之簡單的先後端交互

時間 2019-11-09

標籤 node 簡單後端交互简体版

原文原文鏈接

node是前端必學的一門技能，咱們都知道node是用的js作後端，在學習node以前咱們有必要明白node是如何實現先後端交互的。javascript

這裏寫了一個簡單的經過原生ajax與node實現的一個交互，剛剛學node的朋友能夠看一看。一方面理解服務端與客戶端是如何交互的，一方面更熟悉node開發。html

先貼代碼：（有興趣的能夠copy到本地本身run一下）前端

主頁面的htmljava

index.html:node

 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 ajax

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); // 監聽客戶端的數據，一旦有數據發送過來就執行回調函數app

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 }