ajax的封裝

在咱們不少網頁中爲了更好的用戶體驗都會採用局部刷新和提交數據,今天咱們就來說講這個"功法"是怎麼修煉的,"功法"的名稱叫作"ajax",其最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。

　　仍是原來的配方咱們先說一說ajax的請求流程(數據的請求方式有兩種"get"和"post",流程大體相同但也有點不一樣)

　　一、get方式請求流程

//建立一個對象
var xml = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");

/*

參數1：請求的方式
參數2：請求的地址
參數3：是否異步 默認true 異步  
 */


xml.open("get","http://localhost/ajax/login.php?",true);//第三個參數  true異步   false同步


//發送
xml.send();

//監聽ajax狀態：xml.readyState：0  1  2  3  4
//和服務器的狀態:xml.status  200成功
xml.onreadystatechange = function(){

	if(xml.readyState == 4 && xml.status == 200){
		document.write(xml.responseText)
	}
}

　　二、post方式請求流程

　　

var xml = new XMLHttpRequest();

/*

參數1：請求的方式
參數2：請求的地址
參數3：是否異步 默認true 異步  
 */
xml.open("post","http://datainfo.duapp.com/shopdata/userinfo.php?city=北京",true);//第三個參數  true異步   false同步



//post請求的時候必須設置請求頭
xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
//發送  若是向服務傳遞數據的時候須要傳遞多個參數的時候用&符號分割
xml.send("status=login&userID=zhao&password=123");

//監聽ajax狀態：xml.readyState：0  1  2  3  4
//和服務器的狀態:xml.status  200成功
xml.onreadystatechange = function(){

	if(xml.readyState == 4 && xml.status == 200){
		console.log(JSON.parse(xml.responseText))
	}
}

　　三、瞭解get和post請求流程後咱們開始對ajax封裝

　　

function ajax(method,url,json,success,error){
	//建立ajax實例
	var xml = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
	//存儲傳遞的參數
	var str = '';
	for(var key in json){
		str+="&"+key+"="+ json[key];
	}
	str = str.substr(1);
	//若是請求方式是get
	if(method == "get"){
		//由於get方式的請求方式是在url？後面傳遞參數
		url = url+"?"+str;
		//打開地址
		xml.open("get",url,true);
		//發送
		xml.send();
	}else{
		xml.open("post",url,true);
		//post的時候必須設置請求頭
		xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//必須把請求的參數放在send裏面
		xml.send(str);
	}

	//監聽ajax和服務器的狀態
	xml.onreadystatechange = function(){
		//若是成功的話
		if(xml.readyState == 4 && xml.status == 200){
			//拿到服務端返回給客戶端的數據
			var d = xml.responseText;
			//考慮1 d是空的   d不是一個對象
			if(typeof d !="object" && d !=""){
				d = JSON.parse(d);
			}

			success&&success(d);

		}else{
			error&&error(xml.status);
		}
	}

}