nodejs如何实现ajax,nodejs使用静态服务器处理ajax
如需轉(zhuǎn)載請注明來源與作者
上一次，手寫了一個靜態(tài)服務(wù)器。這次我們想更進(jìn)一步：返回給前端ajax數(shù)據(jù)。注意：這里只是一個演示，所以所有ajax傳入服務(wù)器的數(shù)據(jù)，我不會經(jīng)過處理直接返回
文件夾
Tips :
fs.readFile(url,'utf8',(error,data)=>{
response.end(data);
})
上次使用的是utf-8編碼格式來讀取文件，但是這樣設(shè)置遇到返回圖片就會報(bào)錯。所以，我們可以刪除utf8這個字段，這樣才能成功返回圖片。
預(yù)處理：
首先文件夾的服務(wù)器文件處理也就是APP文件夾。應(yīng)該進(jìn)行進(jìn)一步的抽離。
使用Promise作連接。
3.png
這樣做能讓模塊之間相互獨(dú)立又相互連接，使代碼更好維護(hù)
接著我們把APP(APP/index.js)的樞紐進(jìn)行整合：
let path = require('path')
let fs = require('fs')
let staticServer = require('./static-server');
class APP {
initSever() {
return (request, response) => {
let {url} = request;
staticServer(url).then((data)=>{
//這里staticServer返回的是一個promise
response.writeHead(200,'resolve ok',{'X-powered-by': 'Node.js'})
//標(biāo)記一下返回頭
response.end(data);
})
}
}
}
module.exports = APP
靜態(tài)服務(wù)器(APP/static-server/index.js)的處理：
let fs = require('fs');
let path = require('path');
//對url進(jìn)行處理讓它能夠定位到public下面的資源
let getPath = (url) => {
let urlHeader = './public'
return path.resolve(process.cwd(), urlHeader + url)
}
module.exports = (url) => {
return new Promise((resolve, reject) => {
if (url === '/') url = '/index.html';
url = getPath(url)
fs.readFile(url, (error, data) => {
//如果你不使用Promise的話，你可以使用fs,readFileSync進(jìn)行同步的處理
resolve(data)
})
})
}
在前端代碼引入jq與js，寫點(diǎn)ajax
$.get({
url : 'user.action', //給每個ajax的請求后綴添加'.action'以作標(biāo)識
dataType : 'json'
}).done(function(data){
console.log(data) //在這里我們直接打出數(shù)據(jù)
})
get方法的處理
api-server
let msgMap = {
'/user.action' : {
pet : 'dog',
color : 'white'
}
}
let data ='';
module.exports= (req)=>{
let {url} = req; // 這里先傳req，接下來處理post會用到
data = msgMap[url]; //判斷該url在映射表里面是否有對應(yīng)的信息
return Promise.resolve(JSON.stringify(data))
//必須轉(zhuǎn)換成字符串，否則response.end的第一個參數(shù)必須是字符串或者buffer
}
//上述代碼運(yùn)行成功后console打出的應(yīng)該是一個對象。
APP/index.js的修改：
class APP {
initSever() {
return (request, response) => {
let {url} = request;
apiServer(request).then((val) => {
//一個url進(jìn)入服務(wù)器先在apiServer里面進(jìn)行一個判斷，
//返回出來的值如果是一個undefined就走靜態(tài)資源路線
//否則就是ajax請求，直接返回給前端。
if (val) {
return val;
} else {
return staticServer(url)
}
})
.then((data) => {
//這里是用來把數(shù)據(jù)返回給前端的地方，在這一塊主要是處理返回頭。
response.writeHead(200, 'resolve ok', {
'X-powered-by': 'Node.js'
})
response.end(data);
})
}
}
}
結(jié)果：
post方法的處理
由于post比較復(fù)雜在這里先講一下思路
post的處理比get的處理要煩瑣得多。
post請求，我們往往是要傳遞數(shù)據(jù)給服務(wù)器。前端返回給后端服務(wù)器的形式是用stream的形式，所以我們可以在request對象上獲取前端返回的數(shù)據(jù)。
返回?cái)?shù)據(jù)的處理：由于中文在stream傳輸?shù)倪^程是以buffer形式，所以會造成字符串丟失，所以我們需要使用Buffer.concat進(jìn)行字符的拼接。
4.png
public/js/index.js添加：
$.ajax({
method: 'POST',
url : '/getMsg.action',
data : JSON.stringify({ //注意這里應(yīng)該轉(zhuǎn)成字符串否則傳到服務(wù)器會變成car=BMW&msg=hello world
car : 'BMW',
msg : 'hello world'
}),
dataType:'json'
}).done(function(data){
console.log(JSON.parse(data)) //在這里我們直接打出數(shù)據(jù)
})
·api-server/index.js·
let msgMap = {
'/user.action': {
pet: 'dog',
color: 'white'
}
}
let data = '';
let info = [];
module.exports = (req) => {
let {url} = req;
if (req.method.toLowerCase() === 'get') { //這一塊不多說，處理get請求
data = msgMap[url];
return Promise.resolve(JSON.stringify(data))
} else {
return new Promise((resolve, reject) => {
req.on('data', (chunk) => {
//on類似于jquery添加事件，監(jiān)聽data是否傳入數(shù)據(jù)，該方法在stream對象上
info.push(chunk)//為什么用數(shù)組，為了防止中文數(shù)據(jù)丟失所以我們把每一個buffer用數(shù)組存起來
//你也可以直接使用字符串拼接,如：info+=chunk;這樣寫相當(dāng)于:info=info.toString() + chunk.toString()
}).on('end', () => {
info = Buffer.concat(info).toString(); // Buffer.concat用來拼接所有的buffer
//在這里你可以處理你想要的數(shù)據(jù) doSomething(info)
resolve(JSON.stringify(info));//這里我只是把前端的數(shù)據(jù)拿過來沒有做任何的改動直接返回
})
})
}
}
APP/index.js不用特殊處理跟之前保持一致就好。
最后：
最后
總結(jié)
以上是生活随笔為你收集整理的nodejs如何实现ajax,nodejs使用静态服务器处理ajax的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三年级计算机画图,三年级面积作图题_小学
- 下一篇： jsch 移动服务器上文件,jsch上传