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比较好,因为客户端和服务器在内部还是做了很多事的,而这些我们是无法模拟出来的。