快捷導(dǎo)航

Node之簡(jiǎn)單的前后端交互(實(shí)例講解)

更新時(shí)間：2017年11月14日 08:53:34 作者：_wind

下面小編就為大家?guī)?lái)一篇Node之簡(jiǎn)單的前后端交互(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

node是前端必學(xué)的一門(mén)技能，我們都知道node是用的js做后端，在學(xué)習(xí)node之前我們有必要明白node是如何實(shí)現(xiàn)前后端交互的。

這里寫(xiě)了一個(gè)簡(jiǎn)單的通過(guò)原生ajax與node實(shí)現(xiàn)的一個(gè)交互，剛剛學(xué)node的朋友可以看一看。一方面理解服務(wù)端與客戶(hù)端是如何交互的，一方面更熟悉node開(kāi)發(fā)。

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

主頁(yè)面的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>

接下來(lái)是服務(wù)器端的代碼，運(yùn)行方式是在node環(huán)境下輸入命令：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數(shù)據(jù)
 });
 req.on('end', function() { 
  res.writeHead(200, { // 響應(yīng)狀態(tài)
   "Content-Type": "text/plain", // 響應(yīng)數(shù)據(jù)類(lèi)型
   'Access-Control-Allow-Origin': '*' // 允許任何一個(gè)域名訪(fǎng)問(wèn)
  });
  if(qs.parse(body).name == 'food') {
   res.write('apple');
  } else {
   res.write('other');
  } 
  res.end();
 }); 
});

server.listen(3000);

引入的qs模塊用于解析JSON

req.on('data', callback); // 監(jiān)聽(tīng)客戶(hù)端的數(shù)據(jù)，一旦有數(shù)據(jù)發(fā)送過(guò)來(lái)就執(zhí)行回調(diào)函數(shù)

req.on('end', callback); // 數(shù)據(jù)接收完畢

res // 響應(yīng)

客戶(hù)端的js（功能就是負(fù)責(zé)一些DOM操作以及發(fā)送ajax請(qǐng)求）

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) { // 方法，路徑，傳送數(shù)據(jù)
 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);
}

這個(gè)簡(jiǎn)單的交互就是這樣的，其實(shí)我們?cè)诘谝淮螌W(xué)習(xí)后端語(yǔ)言的時(shí)候第一件事就是寫(xiě)一個(gè)前后端交互程序，這樣會(huì)幫助我們更好的理解前后端的分工。

run方法：

先將server.js運(yùn)行起來(lái)，然后打開(kāi)html來(lái)請(qǐng)求響應(yīng)。

以上這篇Node之簡(jiǎn)單的前后端交互(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: