[英]Moving Javascript function to backend with node.js and AJAX requests
如果您想在服务器端运行某些javascript函数(无论是性能还是隐藏专有代码),那么当HTML文件访问外部CSS和Javascript文件时,如何通过AJAX请求发送和接收数据?
例如,将函数“ secret_calculation ”移动到index.js(node.js文件)的正确方法是什么?
index.js
var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
fs.readFile('app.html', function (err, data) {
if (err)
{
console.log(err);
}
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
fs.readFile('app.css', function (err, data) {
if (err)
{
console.log(err);
}
res.writeHead(200, {'Content-Type': 'text/css'});
res.write(data);
res.end();
});
fs.readFile('app.js', function (err, data){
if (err)
{
console.log(err);
}
res.writeHead(200, {'Content-Type': 'text/javascript'});
res.write(data);
res.end();
});
}).listen(8000);
app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
</head>
<body>
<input id="in_put" type="text" maxlength="3" size="5" oninput="this.value = this.value.replace(/[^0-9]/g, '');" >
<span> x 5 = </span><span id="answer"></span>
<br><br>
<input type="button" id="button1" value="Calculate">
<script src="app.js"></script>
</body>
</html>
app.css
span
{
color: red;
}
app.js
document.getElementById("button1").addEventListener("click", get_input);
function get_input()
{
user_input = parseInt(document.getElementById("in_put").value);
user_input = user_input || 0;
ans = document.getElementById("answer");
ans.innerHTML = secret_calculation(user_input);
}
function secret_calculation(num)
{
var result = num * 5;
return result;
}
我发现与node.js的AJAX请求一个很好的例子, 在这里 ,但文章并没有使用外部CSS和JavaScript文件
使用express,可以将路由与GET
动词绑定,并在客户端获得响应。 例如:
index.js
const express = require('express');
const app = express();
app.get('/your-route-here', (req, res) => {
res.send({response: req.query.num * 5});
});
app.js
let calculatedSecret;
fetch('/your-route-here')
.then(({data}) => {
calculatedSecret = data.response;
});
一种方法是运行第二个http服务器,将这些功能用作服务(类似于rest API)。
为了简单起见,我将使用express(将其简单地包装为http服务器的包装器):
var http = require('http');
var fs = require('fs');
var express = require('express');
var bodyParser from 'body-parser';
// this is server code and won't get to the client if not required
function secret_calculation(num) {
var result = num * 5;
return result;
}
http.createServer(function (req, res) {
fs.readFile('app.html', function (err, data) {
if (err) {
console.log(err);
}
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
fs.readFile('app.css', function (err, data) {
if (err) {
console.log(err);
}
res.writeHead(200, {'Content-Type': 'text/css'});
res.write(data);
res.end();
});
fs.readFile('app.js', function (err, data){
if (err) {
console.log(err);
}
res.writeHead(200, {'Content-Type': 'text/javascript'});
res.write(data);
res.end();
});
}).listen(8000);
var apiApp = express();
// to be able to use request.body for complex parameters
apiApp.use(bodyParser.json());
apiApp.use(function (req, res, next) {
// to restrict api calls to the ones coming from your website
res.append('Access-Control-Allow-Origin', <url of your domain, with port>);
res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.append('Access-Control-Allow-Headers', 'Content-Type');
next();
});
//the list of routes your API will respond to, it is better to move this code in another file as it can be huge
apiApp.get('/secret_calculation/:number', function(req, res) {
var num = parseInt(req.params.number, 10);
var result = secret_calculation(num);
res.send(JSON.stringify(result));
});
// define as much routes as you want like the model above, using apiApp.post if you want to post data and retrieve it with req.body...etc
// run the API server like your http server above
apiApp.listen(8001, function (err) {
if (err) {
return console.error(err);
}
console.info(`apiApp listening at ${<url to your domain, without port>}:${8001}`);
});
然后在您的应用程序中,您将能够通过调用(使用fetch,但任何其他ajax lib都可以)从secret_calculation检索值:
function get_input() {
const init = {
'GET', // or POST if you want to POST data
headers: { 'Content-Type': 'application/json', 'Accept-Encoding': 'identity' },
cache: 'default',
// body: data && JSON.stringify(data), if you want to POST data through request body
};
var user_input = parseInt(document.getElementById("in_put").value);
user_input = user_input || 0;
fetch('/secret_calculation/' + user_input, init)
.then( function(response) {
var ans = document.getElementById("answer");
ans.innerHTML = response;
})
.catch ( function(error) {
console.log('something bad happened:', error);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.