ajax的封装使用

最新推荐文章于 2024-06-22 12:23:42 发布

我yi癫狂

最新推荐文章于 2024-06-22 12:23:42 发布

阅读量1.1k

点赞数 1

分类专栏： Ajax

本文链接：https://blog.csdn.net/weixin_43560272/article/details/106931918

版权

Ajax 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

面试的时候有人问到我ajax的使用，当时回答的不算好，这里想重新总结下：

1、如何将配置等信息传到ajax函数里面去

这个采用的是在参数里加一个对象，对象里面放入字段，然后在ajax里设置一个option，通过option调取配置信息，如url、请求方式等。

这样就可以在参数对象中配置信息，而不需要在ajax里面去配置（专务）

2、如何将请求的东西返回给调用的ajax里

这里采用的是将参数对象里再加入一个函数，函数中的参数数据是和封装里面调用的函数参数数据是共享的，就相当于以移花接木的方式，又将封装函数里的数据转移到参数对象的函数中去了。

代码：
点击之后就可以发送请求了

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
	#button1{
	background:skyblue;
	border-radius:20px;
	width:100px;
	}
    #input1{
        height: 200px;
        width: 200px;
    }
	</style>
</head>
<body>
<button id="button1">按钮</button>
<input id="input1" type="textarea">
</body>
<script type="text/javascript">
document.getElementById("button1").onclick = getIt;
function getIt() {
    ajax({
     type: 'post',
     url: 'http://k1998.xyz/php/public/index.php/index/music/lists',
     data: {
         'name': 'username',
         'password': '123456'
     },
     success:function(data){
            console.log(data);
            
     },
     error:function(e){ console.log(e); }
         });
}




function ajax(option){
    console.log(option);
/*1、创建对象
  2、设置请求方式和请求地址
  3、发送请求
  4、注册回调函数
  5、判断是否完成是否正确返回数据
*/
	var xhr=new XMLHttpRequest();
	xhr.open(option.type,option.url,true);//true代表的是否发布异步请求

    //配置请求
    let data = {
        ...option.data
    }
    xhr.setRequestHeader("Content-type","application/json");
	xhr.send({name:'jjj'});
	xhr.onreadystatechange = callback;

    function callback(){
			if(xhr.readyState == 4){
            option.success&&option.success(xhr.responseText,xhr.responseXML);

			}
	}
}

</script>
</html>

我认为封装的核心其实就是把重复的代码封存起来，把要变化的代码移上去，这样就达到简化操作的目的，使得每次不用一直重复使用代码，造成代码的冗余
在刚开始看来，运用函数里的参数进行传值，这是一个挺新颖的用法，我觉得是挺有趣的！！！
以后还是要多看看源码，主要是学会这种思维，便于自己去学习技术！！

我yi癫狂

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax的封装使用

面试的时候有人问到我ajax的使用，当时回答的不算好，这里想重新总结下：1、如何将配置等信息传到ajax函数里面去这个采用的是在参数里加一个对象，对象里面放入字段，然后在ajax里设置一个option，通过option调取配置信息，如url、请求方式等。这样就可以在参数对象中配置信息，而不需要在ajax里面去配置（专务）2、如何将请求的东西返回给调用的ajax里这里采用的是将参数对象里再加入一个函数，函数中的参数数据是和封装里面调用的函数参数数据是共享的，就相当于以移花接木的方式，又将封装函.
复制链接

扫一扫