Ajax+Node.js前後端交互最佳入門實踐(05)
阿新 • • 發佈：2018-04-12
處理 如果 js引擎 list scrip javascrip 發送 內容 htm
5.ajax簡介
5.1.什麽是ajax
Asynchronous JavaScript and XML ,異步的javascript和XML
5.2.使用ajax有什麽用
數據交互，可以從服務器獲取到數據，也可以從前臺把數據發送到後臺服務器
5.3.如何使用ajax
5.3.1 ajax程序流程
ajax技術就相當於使用js引擎去模擬瀏覽器提交的行為，試想一下，如果要去訪問一個網頁要經歷幾個步驟？
1、打開瀏覽器
2、輸入網址
3、回車提交 發送請求
4、等待服務器響應 返回內容
ajax技術使用js引擎去發送數據實際上也有以上幾個步驟。
舉個栗子： index.html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">獲取數據</button>
<div id="box"></div>
<script>
var oBtn = document.getElementById(‘btn‘);
var oBox = document.getElementById(‘box‘);
oBtn.onclick = function () {
var xhr = new XMLHttpRequest();
xhr.open(‘get‘, ‘/getdata‘, true);
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
oBox.innerText = xhr.responseText;
}
}
}
</script>
</body>
</html>
下面是服務器端index.js代碼：
var http = require(‘http‘);
var url = require(‘url‘);
var fs = require(‘fs‘);
var app = http.createServer(function (req, res) {
res.setHeader(‘content-type‘, ‘text/html;charset=utf-8‘);
var url_obj = url.parse(req.url);
if(url_obj.pathname === ‘/‘){
fs.readFile(‘./index.html‘,‘utf-8‘, function (err, data) {
if(!err){
res.write(data);
res.end();
}
})
}
// 處理ajax請求
if(url_obj.pathname === ‘/getdata‘){
res.write(‘hello world‘);
res.end();
}
});
app.listen(3000);
Ajax+Node.js前後端交互最佳入門實踐(05)