Ajax基础之原生js封装

最新推荐文章于 2022-08-24 15:57:18 发布

zyfacd

最新推荐文章于 2022-08-24 15:57:18 发布

阅读量1.4k

点赞数 7

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/zyfacd/article/details/104809806

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

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

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>