天天看点

原生ajax封装(自学简单版)

/*原生ajax封装*/
function ajax(data){
	/*data={
		data:"",
		dataType:"xml/json",
		type:"get/post",
		url:"",
		asyn:"true/false",
		success:function(){},
		failure:function(){}
	}*/
	//data:{username:123,password:456}
	//data = 'username=123&password=456';

	//第一步:创建xhr对象
	var xhr = null;
	if(window.XMLHttpRequest){//标准的浏览器
		xhr = new XMLHttpRequest();
	}else{
		/*兼容万恶的IE*/
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

	//第二步:准备发送前的一些配置参数
	var type = data.type == 'get'?'get':'post';/*根据data设置发送参数*/
	var url = '';
	if(data.url){
		/*设置url*/
		url = data.url;
		if(type == 'get'){
			url += "?" + data.data + "&_t="+new Date().getTime();
		}
	}
	var flag = data.asyn == 'true'?'true':'false';/*标志位表示是否异步*/
	xhr.open(type,url,flag);

	//第三步:执行发送的动作
	if(type == 'get'){
	   xhr.send(null);
	}else if(type == 'post'){
	   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	   xhr.send(data.data);
	}

	//第四步:指定回调函数
	xhr.onreadystatechange = function(){
		if(this.readyState == 4){
			if(this.status == 200){
				if(typeof data.success == 'function'){
					var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
					data.success(d);
				}
			}else{
				if(typeof data.failure == 'function'){
					data.failure();
				}
			}
		}
	}
}
           

如有宝贵意见,请各位大神不吝赐教

以上

继续阅读