Ajax基础之原生js封装

封装函数的要点就是把重复使用的部分提取取来,同时一些变化的东西作为参数,无法作为参数的进行判断处理。

1 所以我们先看看变化的东西都有哪些:1 请求方式是get/post 2 请求的地址 3 请求的数据 4 请求成功后需要做的事情
2 因为不同的请求方式,我们传数据的方式不一样,所以对于这些,需要进行条件判断。
3 还有一个问题就是关于 xhr.responseText ,变量xhr是在封装函数中声明的,所以这个东西属于ajax函数的,我们在success函数中是用不到的, 但是success这个函数里面需要用这个数据。所以办法就是在封装函数中调用success函数的时候,把xhr.responseText当作参数传出去。success(xhr.responseText)。

其实这是一种回调,回调就是一个函数作为另一个函数的参数,并在另一个函数里面被调用,这个栗子就是success作为ajax函数的参数,并在ajax里面被调用。 (其实个人感觉就是函数在用参数,函数的参数,就是拿来用的,只是现在参数是函数,所以就调用呗)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
	//封装
		 document.onclick = function(){
			var url = "http://localhost/ajax/data/get-post.php";
			ajax({
				success:function(res){
					console.log(res);
				},//成功的时候
				url:url,//属性名跟变量
				type:"get",//类型
				data:"user=admin&pass=123"//发送数据
			});
		}
		//ops是传入的对象
		function ajax(ops){
			// 先处理默认属性
			ops.type = ops.type || "get";//默认ops是get
			ops.data = ops.data || "";
			// 根据当前的请求方式,决定是否需要拼接数据,处理url
			if(ops.type=="get"){
				let t=new Date().getTime();
			    ops.url = ops.url + "?__qft=" + t + "&"  +ops.data;
			}
			// 创建xhr对象
			var xhr = new XMLHttpRequest();
			// 开启请求
			xhr.open(ops.type, ops.url);
			// 根据类型决定send的内容及内容数据格式
			if(ops.type == "get"){
				xhr.send();
			}else{
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xhr.send(ops.data);
			}
			// 开启监听
			xhr.onreadystatechange = function(){
				if(xhr.readyState === 4 && xhr.status === 200){
					// 执行回调函数,取出数据
					ops.success(xhr.responseText);
				}
			}
		}
	</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值