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