逆風騎士: node.js + jQuery 實作Ajax範例

需求：讓純行動端開發的同仁認識Ajax的原理與流程
目標：Server端接收到Post上行資料，並回應給前端網頁

以node.js快速建置HTTP回應電文範例所產生的server.js檔為基礎，來建構簡易的Ajax。
請在處理createServer的匿名函數function(req,res)的一開頭加入：


if (req.method === 'POST') {
    req.on('data', function (data) {
        console.log("Post data : " + data);
    }); 
}

說明：在request請求中判斷method為POST方法時，直接在後端印出POST的內容。

此例中後端完整程式碼(server.js)如下：


http = require('http');
url = require('url');

var host = '127.0.0.1';
var port = 12345;

var xml = 'KerKer';

var server = http.createServer(
    function(req,res) {
        if (req.method === 'POST') {
            req.on('data', function (data) {
                console.log("Post data : " + data);
            });
        }

        var pathname = url.parse(req.url).pathname;

        if(pathname === '/') {
            res.writeHead(200,{'Content-Type':'text/plain'});
            res.end('^_^ ~');
        } else if(pathname === '/aboutme/') {
            res.writeHead(200,{'Content-Type':'text/xml'});
            res.end(xml);
        }
    }
);
server.listen(port);
console.log('Server running at http://' + host + ':' + port);

前端部分，先準備一份基礎HTML：


<html>
<head>
    <title>Ajax</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        var Submit = function(){
            //待填入
        }
    </script>
</head>
<body>
    <form id="sentToServer">
        <input type="text" name="data"/>
        <input type="button"  value="Send" onClick="Submit()"/>
    </form>
</body>
</html>

說明:

使用到jQuery故須引用遠端資料，或是將jquery.js下載到電腦上再指定正確的目錄引用之。
表單中只呈現一個輸入框與按鈕，Send按鈕在被點擊時呼叫JavaScript的函數Submit()
以瀏覽器打開：

接下來在Submit填入：


var path="http://127.0.0.1:12345";
$.ajax({
    url: path,
    data: $('#sentToServer').serialize(),
    type:"POST",
    dataType:'text',
    success: function(msg){
        alert(msg);
    }
});

以node.js執行server.js程式，監聽本機的12345 Port
以開發工具瀏覽或瀏覽器打開ajax.html
瀏覽器畫面：
終端機畫面：
前端接收到訊息並彈出對話框，後端成功收到並印出上行資料。

此範例目的是感受Ajax的動作原理，大多數的狀況中html檔應該是由後端程式提供存取(放在後端)，而非獨立在前端。以Chrom瀏覽器為例，為了安全性問題避免跨站攻擊，後端會收到資料，但前端沒有正確跳出回應訊息。此情境下要成功接收回覆需要在server.js的回應改為：


res.writeHead(200,{'Content-Type':'text/plain','Access-Control-Allow-Origin': '*'});

即允許所有來源的跨域存取(因此例只是執行在本機的html檔)

逆風騎士

2016年2月4日星期四

node.js + jQuery 實作Ajax範例

沒有留言:

張貼留言

2016年2月4日 星期四

node.js + jQuery 實作Ajax範例

沒有留言:

張貼留言

2016年2月4日星期四