前言
学习Ajax最好是将HTML文档放在服务器上进行,这样可以保证各浏览器执行结果的统一,许多教材使用了php(服务器用集成的wamp)作为后端代码进行讲解,这里使用nodejs自己搭一个简单的服务器,帮助开发者学习Ajax相关知识。
开始
首先我们新建工程文件夹demo,文件树结构如下
此后打开终端终端cd到demo文件夹下,输入以下命令
$ npm init -y
$ npm install --save express art-template express-art-template body-parser
待文件加载完成后,让我们先在ajax.html和ajax.js中加一些东西。
- ajax.html,一个简单的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Test</title>
<script src="ajax.js"></script>
</head>
<body>
<form action="/index" method="post">
<input type="text" name="name"><br>
<input type="submit">
</form>
</body>
</html>
- ajax.js 简单的代码
window.onload = function() {
alert(1);
};
一切搞定后,我们在app.js中开始搭建一个简单的服务器
<代码如下>
var express = require('express');
var bodyParser = require('body-parser'); //用于解析post请求体
var app = express();
app.set('views','www');
app.use(express.static('./www')); // 公开www目录,可以在这里存放我们要测试ajax的html/css/js文件
app.engine('html', require('express-art-template'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/index', function(request, response) {
response.render('ajax.html');
});
app.get('/', function(request, response) {
response.redirect('/index'); //重定向到主界面
});
app.post('/index', function(request, response) {
console.log(request.body);
if(request.body.name == 'bubblecode') {
response.status(200).json({ // 服务器响应,测试用
code: 0,
msg: 'hello' + request.body.name
});
}
else {
response.status(200).json({
code: 1,
msg: 'wrong...'
});
}
});
app.listen(8888, function() {
console.log('running...');
});
然后完善一下ajax.js文件,样例代码如下图
【注】这里我没有使用jQuery的ajax,而是自己用原生XMLHttpRequest撸了一个ajax,便于理解ajax原理。
function ajax(obj) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
obj.callback(xhr.responseText);
}
else {
alert('server error');
}
}
};
obj.url = obj.url + "?rand=" + Math.random();
var dat = JSON.stringify(obj.data)
.replace(/[{}"']/g, "")
.replace(/,/g, "&")
.replace(/:/g, "="); /*格式化参数,{"name":"wu","age":2}转化为
"name=wu&age=2"的形式。*/
// 判断请求类型(假定只有 GET 和 POST 两种)
if(obj.method.toLowerCase() === 'get') {
obj.url = obj.url + "&" + dat;
xhr.open(obj.method, obj.url, obj.async);
xhr.send(null);
}
else if(obj.method.toLowerCase() === 'post') {
xhr.open(obj.method, obj.url, obj.async);
// 发送POST请求必须设置如下响应头,否则无法发送。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(dat);
}
else {
alert('unexpected arguments');
}
}
window.onload = function() {
var f = document.forms[0]; //获取第一个表单。
f.addEventListener('submit', function(e) {
e.preventDefault();
ajax({
method:'post',
url:'/index',
data:{
name:f.name.value //获取表单数据。
},
callback: function(ret) { // 回调函数
ret = JSON.parse(ret);
alert(ret.msg);
},
async:true // 异步
});
}, false);
};
至此,一个简单的服务器就搭好了,如果要测试Ajax只需将html、js文件一同放在www目录里。启动服务器,浏览器中输入 http://127.0.0.1:8888/你要测试的html文件名.html
即可访问到了。然后在app.js中写入一些用来交互的路由即可。
PS: 如果app.js代码过多会显得冗余,因此我们可以将其中描述路由的部分单独拆分成一个模块(例如router1.js、router2.js等等)。
服务器的进一步完善,会在以后放出。