Node實作簡單的前後端交互-js教程-PHP中文網

Node實作簡單的前後端交互

小云云

發布： 2017-12-21 11:13:56

原創

1474 人瀏覽過

node是前端必學的一門技能，我們都知道node是用的js做後端，在學習node之前我們有必要明白node是如何實現前後端互動的。本文就為大家帶來一篇Node之簡單的前後端互動(實例講解)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

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

先貼程式碼：（有興趣的可以copy到本機自己run一下）

主頁的html

index.html：

<!doctype>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <button id="btn1">food</button>
  <button id="btn2">other</button>
  <h1 id="content"></h1>

  <script type="text/javascript" src="./client.js"></script>
 </body>
</html>

登入後複製

接下來是伺服器端的程式碼，運作方式是在node環境下輸入指令：node server.js

server.js：

let http = require('http'); 
let qs = require('querystring'); 

let server = http.createServer(function(req, res) {
 let body = ''; // 一定要初始化为"" 不然是undefined
 req.on('data', function(data) {
  body += data; // 所接受的Json数据
 });
 req.on('end', function() { 
  res.writeHead(200, { // 响应状态
   "Content-Type": "text/plain", // 响应数据类型
   'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问
  });
  if(qs.parse(body).name == 'food') {
   res.write('apple');
  } else {
   res.write('other');
  } 
  res.end();
 }); 
});

server.listen(3000);

登入後複製

引入的qs模組用來解析JSON

req.on('data', callback); // 監聽客戶端的數據，一旦有資料傳送過來就執行回呼函數

req.on('end', callback); //資料接收完畢

res // 回應

客戶端的js（功能就是負責一些DOM操作以及發送ajax請求）

client.js：

let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');

btn1.addEventListener('click', function() {
 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});

btn2.addEventListener('click', function() {
 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});

// 封装的ajax方法
function ajax(method, url, val) { // 方法，路径，传送数据
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
   if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
    content.innerHTML = xhr.responseText;
   } else {
    alert('Request was unsuccessful: ' + xhr.status);
   }
  }
 };

 xhr.open(method, url, true); 
 if(val)
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
 xhr.send(val);
}

登入後複製

這個簡單的互動就是這樣的，其實我們在第一次學習後端語言的時候第一件事就是寫一個前後端互動程序，這樣會幫助我們更好的理解前後端的分工。

run方法：

先將server.js運行起來，然後開啟html來請求回應。