【nodeJs】用nodeJs實現一個簡單的前後端互動的例子

【nodeJs】用nodeJs實現一個簡單的前後端互動的例子

實現效果圖:

這裡寫圖片描述

Ajax知識補充:

1,建立XMLHttpRequest物件:

var xmlHttp = new XMLHttpRequest();

2, 向伺服器傳送請求:

xmlHttp.setRequestHeader(header,value)  //向請求新增http頭
xmlHttp.open(method, url, async)  //async:true(非同步) false(同步)
xmlHttp.end(string)   //string僅用於POST請求

3, 伺服器響應

獲得來自伺服器的響應,可以使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
responseText 獲得字串形式的響應資料。
responseXML 獲得 XML 形式的響應資料。
4, onreadystatechange 事件。
每當 readyState 改變時,就會觸發onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒

HTML程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="username" placeholder="請輸入使用者名稱">
<button id="bt">提交</button>
<h1 id="test"></h1>
<script src="index.js"></script>
</body>
</html>

index.js

var test = document.getElementById('test');
var bt = document.getElementById('bt');
bt.onclick = function () {
var value = document.getElementById('username').value;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
test.innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open('POST', 'http://127.0.0.1:3000/', true); 
xmlHttp.send(value);      //吧input框中的value傳送過去
};

app.js

var http = require('http');
var server = http.createServer(function (req, res) {
var body = '';
req.on('data', function(data) {      // 接收客戶端傳送過來的資料, 也就是 xmlHttp.send(value);
body  = data;
});
req.on('end', function() {
res.writeHeader(200, {
'Content-Type': 'text/plain',
'Access-Control-Allow-Origin': '*'    //解決跨域問題
});
res.write("hello:"   body);
res.end();
})
});
server.listen(3000, function () {
console.log('server start at localhost:3000');
});
執行node app.js   然後在html頁面中輸入使用者名稱,點選之後就可以看到後端返回的值了