在web开发领域,自从有了ajax技术,使得数据的异步提交变得非常方便快捷;那么在没有ajax技术之前,我们该怎样实现ajax的无刷新效果呢。
本文主要以"人物投票"的功能为例,来讲述如何轻松的模拟出无刷新效果。
首先我们需要创建这么几个文件:
- index.html,负责前台的展示(包括人物的照片和一个投票的按钮);
- tp.PHP,负责接收数据,处理数据;
- count.txt,负责存放数据(票数)的空文本,在实际开发中大家可以将数据存放在数据库中,前台需要的时候可以从数据库中提取。
实现的方法:
- 第一种:使用204状态码的特性,实现只提交但"不做任何反应的效果"。此方法只需要在后台文件中这样设置http头部:"http/1.1 204 No Content",而前台文件几乎不需要做任何特殊处理。
index.html:<p><img src="./1.jpg" style="width: 200px;height: 300px;"></p> <p><a href="tp.PHP"><button>投票</button></a></p>
tp.PHP:$count=file_get_contents("./count.txt"); $count+=1; file_put_contents("./count.txt",$count); header('http/1.1 204 No Content');
当我们点击一次投票按钮时count.txt文件内显示"1",而页面并没有刷新:
count.text:
- 第二种:在前台页面中嵌入一个隐藏的iframe,后台文件只需要处理数据就行了,这种比较简单相信大家都懂。
index.html:<p><img src="./1.jpg" style="width: 200px;height: 300px;"></p> <p><a href="tp.PHP" target="count_data"><button>投票</button></a></p> <iframe name="count_data" style="display: none;"></iframe>
tp.PHP:$count=file_get_contents("./count.txt"); $count+=1; file_put_contents("./count.txt",$count);
当我们再一次点击一次投票按钮时count.txt文件内显示"2",而页面并没有刷新:
count.txt:
- 第三种:利用img的src来向后台发送请求。相信大家都知道,当我们向后台请求一张图片的时候(<img src="imgURL"/>),页面并不需要刷新,但是我们需要的图片却顺利的得到了。此处将利用这一特性,将img的src属性值设置为一个PHP文件来实现请求发送成功但不刷新页面的效果。
index.html:<p><img src="./1.jpg" style="width: 200px;height: 300px;"></p> <p><button id="sub" onclick="tj()">投票</button></p> <script> function tj(){ var img=document.createElement('img'); img.setAttribute('src','tp.PHP');//向tp.PHP发送请求 } </script>
tp.PHP:$count=file_get_contents("./count.txt"); $count+=1; file_put_contents("./count.txt",$count);
当我们再一次点击一次投票按钮时count.txt文件内显示"3",而页面并没有刷新:
- 第四种:利用css(link),javascript等元素的src属性,所利用的原理和第三种方法大致相同,此处就不再多加赘述,大家自行测试。