ajax--怎么用ajax做到无刷新

点击按钮触发下面js

<!-- ajax
核心-xmlhtprequest，一个专门http请求工具
xhr对象 request 服务器经过一些列response  浏览器没动xhr代替

如何创建xhr对象
new XMLHttpRequest()即可
考虑低版本ie678  new window.ActiveXObject('Microsoft.XMLHTTP')
 -->

 <img src="http://img3.imgtn.bdimg.com/it/u=4093643737,3232071282&fm=206&gp=0.jpg">
<input type="button" value="投票ajax" onclick="vote()" />

<div id="zt"></div>

再看js里

open里 get是不需要发送内容给服务器

post需要发送信息给服务器接收

<script type="text/javascript">
	function createXHR(){
		var xhr = null;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xhr=new	ActiveXObject('Microsoft.XMLHTTP');
		}
		return xhr;
	}

	function vote(){
		// 创造xhr
		var xhr=createXHR();
		// 打开连接
		xhr.open('GET','./2xhr.php',true);
		// 发送请求，到这一步就可以无刷新后台请求了
		xhr.send(null);

		/*但是，不知道是不是成功与否 所以服务器怎么获得返回信息呢 使投票可能失败
		xhr本身有一个属性，responseText 服务器返回信息的body主体内容，就是open里写的php得出的结果*/


		// alert(xhr.responseText);


		// 如果弹出的是空白的话，那就是开了异步
		/*true异步   不等到收到返回值就往下执行
		false同步   send完成并得到返回值*/

		/*使用异步，下面的继续执行，等请求完成怎么知道这个变化呢
		在异步的时候xhr请求响应的过程中，状态会不断变化，0-4逐步变化
		我们可以绑定一个函数，监听状态的变化，只要状态变化就触发某函数*/


		
		xhr.onreadystatechange = function(){
			var pg = document.getElementById('zt');
			pg.innerHTML=pg.innerHTML + '状态现在变成' + this.readyState + '<br/>';
		}
}		
/*
状态最终变成4就是ok
*/

</script>

主要这几点

1创造xhr

2 open打开连接 send 发送请求

3监听的函数

xhr.onreadystatechange = function(){}