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