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相关内容我会在后续进行整理。如果你已等不及，可以看看我推荐的几个网站：

jade学习
Jade —— 源于 Node.js 的 HTML 模板引擎
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 += "服务器返回信息: " + res[1] + "";
                }
                else
                {
                    document.getElementById("status").innerHTML += "获取服务器信息失败！ " + res[1] + "";
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                document.getElementById("status").innerHTML += "连接不到服务器，请检查网络！";
            }
        });
}

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.测试

运行服务，在浏览器里输入：

http://127.0.0.1:3000/ajax

浏览器中会出现：

Node.js（Express4.x）的Ajax处理1——POST和GET_第1张图片

浏览器结果

服务端打印：

服务端打印

参考书籍：《Node与Express开发》，人民邮电出版社

原创文章，未经许可，请勿转载
作者：Mike的读书季
日期：2016.09.19
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny

Node.js（Express4.x）的Ajax处理1——POST和GET