0.目标
AJAX即“Asynchronous Javascript And XML*”（异步JavaScript和XML），是指一种创建交互式应用的网页开发技术。
客户端通过Ajax方式与后台进行数据交互是一种很常见的方式，对客户端来说，不需要刷新网页即可从服务器获取所需要的数据。这一节，我将写一个小例子来演示Express是如何响应客户端的Ajax请求（POST和GET）的。
1.部署Express
如果不知道如何部署，可参照： 部署Express
2.服务器端
这里要用到body-parser中间件，所以要先引用：
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });
增加一个路由，用来显示页面：
/* 浏览器输入地址（如127.0.0.1:3000/ajax）后，显示views/ajax页面，此页面使用默认引擎（这里是jade）渲染 */
router.get('/ajax', function(req, res, next) {
res.render('ajax');
});
增加2个路由来处理请求：
router.post('/req_ajax', urlencodedParser, function(req, res, next){
/* req.body对象
包含POST请求参数。
这样命名是因为POST请求参数在REQUEST正文中传递，而不是像查询字符串在URL中传递。
要使req.body可用，可使用中间件body-parser
*/
var type = req.body.type;
var info = req.body.info;
console.log("服务器收到一个Ajax ["+type+"] 请求，信息为："+info);
res.json(['success', "服务器收到一个Ajax ["+type+"] 请求，信息为："+info]);
});
router.get('/req_ajax', function(req, res, next){
/* req.query对象
通常称为GET请求参数。
包含以键值对存放的查询字符串参数
req.query不需要任何中间件即可使用
*/
var type = req.query.type;
var info = req.query.info;
console.log("服务器收到一个Ajax ["+type+"] 请求，信息为："+info);
res.json(['success', "服务器收到一个Ajax ["+type+"] 请求，信息为："+info]);
});
3.客户端页面
由于最新的Express默认使用jade页面引擎，如果对此不太熟悉的话，可以在app.js中更换引擎：
app.set('view engine', 'jade');
jade相关内容我会在后续进行整理。如果你已等不及，可以看看我推荐的几个网站：
3.1 添加js文件
在public/javascripts文件夹下，放入两个文件：
- jquery.min.js // 自行下载jquery
- ajax.js // 空白文件，下面会给出代码
其中ajax.js代码如下：
var OL_Action_Root = "http://127.0.0.1:3000";
var xmlHttp = null;
function Req_ajax(info, type)
{
$.ajax({
data: {info:info, type:type},
url: OL_Action_Root+"/req_ajax",
dataType: 'json',
cache: false,
timeout: 5000,
type:type, // 如果要使用GET方式，则将此处改为'get'
success: function(data){
var res = data;
if(res[0] == 'success')
{
document.getElementById("status").innerHTML += "<p style='color:green; font-weight:bold;'>服务器返回信息: " + res[1] + "</p>";
}
else
{
document.getElementById("status").innerHTML += "<p style='color:#2289DB; font-weight:bold;'>获取服务器信息失败！ " + res[1] + "</p>";
}
},
error: function(jqXHR, textStatus, errorThrown){
document.getElementById("status").innerHTML += "<p style='color:#C00000; font-weight:bold;'>连接不到服务器，请检查网络！</p>";
}
});
}
Req_ajax("client post", "post");
Req_ajax("client get", "get");
3.2 添加页面
在views文件夹下，添加一个文件ajax.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
h1 Express的Ajax测试
p#status
script(src='/javascripts/jquery.min.js')
script(src='/javascripts/ajax.js')
没错，就是这么简洁。当我们还在写尖括号和反尖括号的时候，用jade的程序员已经写完一行了。当然，如果你用jade，那么任何缩进和空格都是有意义的，当你使用空格来缩进时，就不要再画蛇添足用tab，否则会报错，如我在第8行“p#status”前面多加一个空格，就会报这样的错误：
C:\nodejs\demo_ajax\views\ajax.jade:8 6| body 7| h1 Express的Ajax测试 > 8| p#status 9| 10| script(src='/javascripts/jquery.min.js') 11| script(src='/javascripts/ajax.js') Invalid indentation, you can use tabs or spaces but not both
Error: C:\nodejs\demo_ajax\views\ajax.jade:8
6| body
7| h1 Express的Ajax测试
> 8| p#status
9|
10| script(src='/javascripts/jquery.min.js')
11| script(src='/javascripts/ajax.js')
4.测试
运行服务，在浏览器里输入：
浏览器中会出现：
浏览器结果
服务端打印：
服务端打印
参考书籍： 《Node与Express开发》，人民邮电出版社
原创文章，未经许可，请勿转载
作者：Mike的读书季
日期：2016.09.19
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny
