环境搭建
安装Node.js + 任意浏览器
前端 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function handleClick() {
// 声明用于发送ajax请求的对象
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 成功返回后执行的代码
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
}
// 填写http请求的方式和地址
xmlhttp.open("GET", "http://localhost:8080/user", true);
// 正式发送
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="handleClick()">发送请求</button>
<div id="result">
<h2></h2>
</div>
</body>
</html>
后端 server.js
var http = require('http');
var url = require('url');
http.createServer((req, res) => {
// 获取请求路径
var pathname = url.parse(req.url).pathname;
// 设置请求头
res.writeHead(200, {
// 设置返回格式为json
'Content-Type': 'text/json',
// 处理跨域问题
'access-control-allow-origin': '*'
});
// 用switch实现路由
switch (pathname) {
case '/user':
res.write('{"name":"Anna","age":"17"}');
break;
default:
res.write('404');
}
// 返回response
res.end();
}).listen(8080);
console.log('Server is running at http://127.0.0.1:8080');
运行
- 后端：命令行用node执行server.js
- 前端：浏览器打开index.js
说明
- 最近在尝试 electron + vue + elementui + node 搭建桌面应用，遇到很多数据传递方面的问题，查来查去结果返璞归真了
- 建议自己把这里面的代码全文背诵