Node之簡單的前後端交互
阿新 • • 發佈：2017-11-13
pre 環境 document style cal ava bsp pos thead
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 <
接下來是服務器端的代碼，運行方式是在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
引入的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來請求響應。
Node之簡單的前後端交互