Ajax ——无刷新页面加载页面

Ajax 是一种无需重新加载网页就能更新部分页面数据的技术
Ajax的全称是AsynchronousJavaScript and XML,即异步JavaScript+XML。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求
Ajax的优势
(一)    无刷新更新数据
1. Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
(二) 异步与服务器通信
1. AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
(三) 前端和后端负载平衡
1. AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
  下面是我对通过客服端向服务器端请求数据的步骤进行的函数封装

         function ajax(url,fnWin,fnFaild){
    	//创建Ajax对象
    	//兼容
    	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    	//建立连接
    	xhr.open("GET",url,true);
    	//发送请求
    	xhr.send();
    	//接收数据
    	xhr.onreadystatechange = function(){
    		if(xhr.readyState == 4){
    			if(xhr.status == 200){
    				if(typeof fnWin == "function"){
         	fnWin(encodeURIComponent(xhr.responseText));
    				}
    			}
    				else{
    					if(typeof fnFaild == "function"){
    						fnFaild();
    				}
    			}
    		}
    	}	
     }

解决缓存的问题
我从服务器获取abc.txt,修改其中的内容，IE不会更新数据(有缓存)，谷歌和火狐可以更新数据（我测试的版本可以），为了解决这个问题，我们只要每次获取的地址不同就可以实现刷新数据，这里我用了一个时间戳（时间戳每时每刻在改变）

 oBtn.onclick = function(){
        	ajax("abc.txt？t="+new Date().getTime(),function(str){//调用上面封装的函数
        		oDiv.innerHTML = str;//将获取的数据显示在div中
        	},function(){
        		oDiv.innerHTML = "数据没有找到";
        	});
        	}