天天看點

原生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();
				}
			}
		}
	}
}
           

如有寶貴意見,請各位大神不吝賜教

以上

繼續閱讀