需求：讓純行動端開發的同仁認識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檔)
