AJAX的原理是什么？
實際上就是發起HTTP請求，既然就是發起HTTP請求，那只要我們能夠實現發起HTTP請求就可以在不使用AJAX的情況下實現相同的效果。
在前端有好多方式可以發起HTTP請求，比如script標簽的src以及圖片的src，css背景圖片，等等。
案例1：通過HTTP狀態碼204實現頁面無刷新
下面來一個小案例，實現一個頁面無刷新的投票功能。
html：
<div id="box">
<h1>周傑倫</h1>
<p>0</p>
<a href="http://127.0.0.1:3000">投票</a>
</div>
nodejs
var http = require('http');
http.createServer(function(req, res){
res.writeHead(204);
}).listen(3000);
當我們點擊投票的時候發出了一條HTTP請求，但是頁面並沒有跳轉，主要是利用HTTP204狀態碼實現的。
204:意思是我已經接收到了，但是我沒有數據要返回給你，請你不用刷新頁面.也不要跳轉到新的頁面。
案例2：利用圖片src實現
html：
<div id="box">
<h1>周傑倫</h1>
<p>0</p>
<a href="javascript:getHttp();">投票</a>
</div>
<script>
function getHttp(){
var img = new Image();
img.src = 'http://127.0.0.1:3000';
}
</script>
nodejs：
var http = require('http');
http.createServer(function(req, res){
res.writeHead(200,{'Content-type':'text/html'});
res.end('ok');
}).listen(3000);
如果需要發送數據我們可以在src的后面加上參數，和AJAX的GET方式一模一樣。
通過script標簽和css來實現，和這里的圖片實現方式大同小異這里就不再演示了。
但是以上的幾種方式都有一個特點就是，只能發送數據給服務器，但是客戶端不能接收服務器返回的數據，並且不能使用POST方式，因此以前方式雖然可以實現，但使用的場景比較小。
下面介紹另外一種方式，它可以解決上面的問題。
利用iframe標簽實現頁面無刷新。
html：
<div id="box">
<h1>周傑倫</h1>
<p>0</p>
<a href="http://127.0.0.1:3000" target="tou">投票</a>
</div>
<iframe name="tou" frameborder="0"></iframe>
nodejs：
var http = require('http');
http.createServer(function(req, res){
res.writeHead(200,{'Content-type':'text/html'});
res.end('ok');
}).listen(3000);
實際上這種方式是有刷新的，不過刷新的是iframe這個框架里面的內容，所有我們就有了利用它的機會，我們只需要把iframe的寬高邊框設置成0就好了。
可能你會問雖然現在可以返回數據了，但是怎么操作它呢，其實可以通過返回一段js代碼來操作dom。
html：
<div id="box">
<h1>周傑倫</h1>
<p id="content">0</p>
<a href="http://127.0.0.1:3000/1" target="tou">投票</a>
</div>
<iframe name="tou" frameborder="0"></iframe>
nodejs：
var http = require('http');
var fs = require("fs");var count = 0;
http.createServer(function(req, res){
if(req.url==="/favicon.ico")return;
if(req.url==='/index.html'){
res.writeHead(200,{'Content-type':'text/html'});
res.end((fs.readFileSync('index.html')).toString());
}else{
count++;
res.writeHead(200,{'Content-type':'text/html'});
var jsCode = '<script>';
jsCode += 'parent.document.getElementById("content").innerHTML =' + count;
jsCode += '</script>';
res.end(jsCode);
}
}).listen(3000);
核心代碼是加粗的那一段，也就是返回一段js代碼，通過parent來操作iframe的上一程。
接着我們再通過iframe + form 來實現POST提交。
html：
<form id="form" action="/1" target="reg">
姓名：<input type="text">
年齡：<input type="text">
<input type="submit" value="提交">
</form>
<iframe name="reg" frameborder="0"></iframe>
nodejs：
var http = require('http');
var fs = require("fs");http.createServer(function(req, res){
if(req.url==="/favicon.ico")return;
if(req.url==='/index.html'){
res.writeHead(200,{'Content-type':'text/html'});
res.end((fs.readFileSync('index.html')).toString());
}else{res.writeHead(200,{'Content-type':'text/html'});
var jsCode = '<script>';
jsCode += 'parent.document.body.removeChild(parent.document.getElementById("form"));parent.document.body.innerHTML="注冊成功！";';
jsCode += '</script>';
res.end(jsCode);
}
}).listen(3000);
ok，案例就到這了。
從這些案例上可以看出，所謂的ajax就是發起一個http請求，當然以上方式和ajax多少還是有差別的，ajax內部還是做了一些其他的事情，比如我們接收數據，客戶端是沒有刷新的，而我們模擬的ajax實際上都是有刷新的（除了利用src以外），不過是使用了一些小伎倆而已。所以在實際開發過程中，還是用ajax比較好，因為客戶端和服務器在內部還是做了很多事的，而這些我們是無法模擬出來的。