ajax的封装

Posted 2020-11-08 jiejie_li

在我们很多网页中为了更好的用户体验都会采用局部刷新和提交数据,今天我们就来讲讲这个"功法"是怎么修炼的,"功法"的名称叫做"ajax",其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

　　还是原来的配方我们先说一说ajax的请求流程(数据的请求方式有两种"get"和"post",流程大致相同但也有点不同)

　　1、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)
	}
}

　　2、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))
	}
}

　　3、了解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);
		}
	}

}