Node之簡單的前后端交互(實例講解)

來源：九壹網(wǎng)

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

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

先貼代碼：（有興趣的可以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>

接下來是服務(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ù)類型
 '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); // 監(jiān)聽客戶端的數(shù)據(jù)，一旦有數(shù)據(jù)發(fā)送過來就執(zhí)行回調(diào)函數(shù)

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

res // 響應(yīng)

客戶端的js（功能就是負(fù)責(zé)一些DOM操作以及發(fā)送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) { // 方法，路徑，傳送數(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);
}

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

run方法：

先將server.js運(yùn)行起來，然后打開html來請求響應(yīng)。

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

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

Node之簡單的前后端交互(實例講解)