0.目標

AJAX即“Asynchronous Javascript And XML*”（異步JavaScript和XML），是指一種創(chuàng)建交互式應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
客戶端通過Ajax方式與后臺進行數(shù)據(jù)交互是一種很常見的方式，對客戶端來說，不需要刷新網(wǎng)頁即可從服務(wù)器獲取所需要的數(shù)據(jù)。這一節(jié)，我將寫一個小例子來演示Express是如何響應(yīng)客戶端的Ajax請求（POST和GET）的。

【參考代碼】

1.部署Express

如果不知道如何部署，可參照： 部署Express

2.服務(wù)器端

這里要用到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請求參數(shù)。
       這樣命名是因為POST請求參數(shù)在REQUEST正文中傳遞，而不是像查詢字符串在URL中傳遞。
       要使req.body可用，可使用中間件body-parser
    */
    var type = req.body.type;
    var info = req.body.info;
    console.log("服務(wù)器收到一個Ajax ["+type+"] 請求，信息為："+info);
    res.json(['success', "服務(wù)器收到一個Ajax ["+type+"] 請求，信息為："+info]);
});

router.get('/req_ajax', function(req, res, next){
    /* req.query對象
       通常稱為GET請求參數(shù)。
       包含以鍵值對存放的查詢字符串參數(shù)
       req.query不需要任何中間件即可使用
    */
    var type = req.query.type;
    var info = req.query.info;
    console.log("服務(wù)器收到一個Ajax ["+type+"] 請求，信息為："+info);
    res.json(['success', "服務(wù)器收到一個Ajax ["+type+"] 請求，信息為："+info]);
});

3.客戶端頁面

由于最新的Express默認使用jade頁面引擎，如果對此不太熟悉的話，可以在app.js中更換引擎：
app.set('view engine', 'jade');

jade相關(guān)內(nèi)容我會在后續(xù)進行整理。如果你已等不及，可以看看我推薦的幾個網(wǎng)站：

1. jade學習
2. Jade —— 源于 Node.js 的 HTML 模板引擎
3. 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;'>服務(wù)器返回信息: " + res[1] + "</p>";
                }
                else
                {
                    document.getElementById("status").innerHTML += "<p style='color:#2289DB; font-weight:bold;'>獲取服務(wù)器信息失敗！ " + res[1] + "</p>";
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                document.getElementById("status").innerHTML += "<p style='color:#C00000; font-weight:bold;'>連接不到服務(wù)器，請檢查網(wǎng)絡(luò)！</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的程序員已經(jīng)寫完一行了。當然，如果你用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.測試

運行服務(wù)，在瀏覽器里輸入：

http://127.0.0.1:3000/ajax

瀏覽器中會出現(xiàn)：

瀏覽器結(jié)果

服務(wù)端打?。?/p>

服務(wù)端打印

參考書籍： 《Node與Express開發(fā)》，人民郵電出版社

原創(chuàng)文章，未經(jīng)許可，請勿轉(zhuǎn)載
作者：Mike的讀書季
日期：2016.09.19
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny