Node之簡單的前後端互動

小花貓Jane發表於2017-11-20
後端


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來請求響應。

想要學習前端開發的同學，可以加群：
543627393
學習哦！


相關文章