模拟ajax无刷新提交的4种方法

在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属性，所利用的原理和第三种方法大致相同，此处就不再多加赘述，大家自行测试。

模拟ajax无刷新提交的4种方法

猜你喜欢