面試的時候有人問到我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>
我認爲封裝的核心其實就是把重複的代碼封存起來，把要變化的代碼移上去，這樣就達到簡化操作的目的，使得每次不用一直重複使用代碼，造成代碼的冗餘
在剛開始看來，運用函數裏的參數進行傳值，這是一個挺新穎的用法，我覺得是挺有趣的！！！
以後還是要多看看源碼，主要是學會這種思維，便於自己去學習技術！！