Node之簡單的前后端交互(實例講解)
node是前端必學的一門技能，我們都知道node是用的js做后端，在學習node之前我們有必要明白node是如何實現(xiàn)前后端交互的。
這里寫了一個簡單的通過原生ajax與node實現(xiàn)的一個交互，剛剛學node的朋友可以看一看。一方面理解服務端與客戶端是如何交互的，一方面更熟悉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>
接下來是服務器端的代碼，運行方式是在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, { // 響應狀態(tài)
"Content-Type": "text/plain", // 響應數(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 // 響應
客戶端的js（功能就是負責一些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);
}
這個簡單的交互就是這樣的，其實我們在第一次學習后端語言的時候第一件事就是寫一個前后端交互程序，這樣會幫助我們更好的理解前后端的分工。
run方法：
先將server.js運行起來，然后打開html來請求響應。
以上這篇Node之簡單的前后端交互(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
最近在用Node寫一個實時聊天小應用,其中就用到了單元測試，所以死下面這篇文章主要給大家介紹了關于Node.js利用斷言模塊assert進行單元測試的方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
當我們使用腳手架去創(chuàng)建一個項目的時候，通常會通過命令行交互來獲取一些信息，比如填項目名稱，選擇項目模板，選擇版本，我們雖然經(jīng)常用到，但是想必對于其中的原理還是不太了解，本文將待大家詳細介紹一下node命令行的交互原理,需要的朋友可以參考下2023-05-05
Node.js中的process模塊用來與當前進程互動，可以通過全局變量process訪問，不必使用require命令加載。它是一個EventEmitter對象的實例。下面這篇文章給大家介紹了Node.js中process模塊常用的屬性和方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了Nodejs極簡入門教程（三）：進程,本文講解了Node 進程間通信、cluster 模塊等內(nèi)容,需要的朋友可以參考下2014-10-10
nodejs16.15.0版本如何解決node-sass和sass-loader版本沖突問題
這篇文章主要介紹了nodejs16.15.0版本如何解決node-sass和sass-loader版本沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Node.js項目中調(diào)用JavaScript的EJS模板庫的方法
這篇文章主要介紹了Node.js項目中調(diào)用JavaScript的EJS模板庫的方法,通過EJS模板引擎可以制作出維護性良好的HTML代碼結(jié)構(gòu),需要的朋友可以參考下2016-03-03
關于Node.js的events.EventEmitter用法介紹
本篇文章主要介紹了關于Node.js的events.EventEmitter用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
Node.js是一個可以快速構(gòu)建網(wǎng)絡服務及應用的平臺。該平臺的構(gòu)建是基于Chrome's JavaScript runtime，也就是說，實際上它是對Google V8引擎（應用于Google Chrome瀏覽器)進行了封裝。 今天介紹Node.js調(diào)式目前有幾種技術，需要的朋友可以參考下。2017-03-03
使用NodeJs 開發(fā)微信公眾號（三)微信事件交互實例
這篇文章主要介紹了使用NodeJs 開發(fā)微信公眾號（三)微信事件交互實例的相關資料,需要的朋友可以參考下2016-03-03
本篇文章主要介紹了詳解如何在NodeJS項目中優(yōu)雅的使用ES6，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04