ajax的封装使用

面试的时候有人问到我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>