封装Ajax与解决缓存问题-优快云博客

本文链接：https://blog.youkuaiyun.com/Carlos__z/article/details/40047883

//封装Ajax
(function(){
	//这里是自调用匿名函数的代码区
	
	//通过ID得到对象
	var $ =function (id){
		return document.getElementById(id);
	};
	//实例化Ajax,用$的init
	$.init = function(){
		//尝试生成
		try{
			return new XMLHttpRequest();
		}catch(e){
			
		}
		try{
			
		}catch(e){
			return new ActiveXObject('Microsoft.XMLHTTP');
		}
		//如果两种方法都创建Ajax对象失败则提示
		alert("创建Ajax对象失败");
	};
	
	/* Ajax用get传输数据
	 * @param1 url ,数据传到的处理文件，一般PHP
	 * @param2 data,要传送的数据
	 * @param3 callback,回调函数,数据接收完成并且返回200时候处理的代码
	 * @param4 tyep,Ajax想要接收回来的数据的类型,决定着用哪个接收方式传给callback
	 */
	$.get=function (url,data,callback,type){
		var xhr =$.init();
		//url增加时间戳防止缓存demo.php?_=
		var url = url+"?_="+ new Date().getTime();
		//如果不用传递数据
		if(data!=null){
			url = url +"&"+data
		}
		//初始化Ajax
		xhr.open("get",url);
		//Ajax的状态码变更的处理
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				//数据接收完整是readyState==4，相应头正确返回的状态码是200，xhr.status==200
				if(type==null){
					//type的默认值，用文本接收
					type="text";
				}
				//用TEXT接收的处理方式
				if(type=="text"){
					callback(xhr.responseText);
				}
				//用XMl接收的处理方式
				if(type=="xml"){
					callback(xhr.responseXML);
				}
				//用TEXT接收的处理方式
				if(type=="json"){
					callback(eval("("+xhr.responseText+")"));
				}
				
				
			}
		};
		//Ajax发送数据
		xhr.send(null);
	};
	
	/* Ajax用post传输数据
	 * @param1 url ,数据传到的处理文件，一般PHP
	 * @param2 data,要传送的数据
	 * @param3 callback,回调函数,数据接收完成并且返回200时候处理的代码
	 * @param4 tyep,Ajax想要接收回来的数据的类型,决定着用哪个接收方式传给callback
	 */
	$.post=function (url,data,callback,type){
		var xhr =$.init();
		//初始化Ajax
		xhr.open("post",url); 
		//设置请求头						
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//Ajax的状态码变更的处理
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				//数据接收完整是readyState==4，相应头正确返回的状态码是200，xhr.status==200
				if(type==null){
					//type的默认值，用文本接收
					type="text";
				}
				//用TEXT接收的处理方式
				if(type=="text"){
					callback(xhr.responseText);
				}
				//用XMl接收的处理方式
				if(type=="xml"){
					callback(xhr.responseXML);
				}
				//用TEXT接收的处理方式
				if(type=="json"){
					callback(eval("("+xhr.responseText+")"));
				}
				
				
			}
		};
		//Ajax发送数据
		xhr.send(data);
	};
	//windon引用，闭包
	window.$=$;
})();

一、 Ajax对象

编写Ajax程序，必须首先创建一个Ajax对象，这个对象名：XMLHttpRequest

1、创建Ajax对象

在不同的浏览器下创建Ajax对象的方式不同

IE：

varxhr=new ActiveXObject(‘Microsoft.XMLHTTP’);

w3c：

varxhr=new XMLHttpRequest();

第一种创建方式适用于IE浏览器

第二种创建方式适用于W3C浏览器，同时也适应用于IE的高版本浏览器（8.0）

1、 Ajax对象的相关属性和方法

Ajax封装