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 }
這個簡單的交互就是這樣的，其實我們在第一次學習后端語言的時候第一件事就是寫一個前后端交互程序，這樣會幫助我們更好的理解前后端的分工。
run方法：
先將server.js運行起來，然后打開html來請求響應。