原生js ajax 封裝
首先我們先了解ajax的get和post請求分別是怎樣請求數據的
get請求
let ajx = new XMLHttpRequest() //創建ajax實例 /*打開需要請求的地址,可以有三個參數 參1:請求方式 參2:請求地址 參3:是否非同步,可選,默認非同步 */ ajx.open('get','//localhost/day02/api/gouwu.php?name=zhangsan') ajx.send()//向後端發送的數據,get方式用不到 ajx.onreadystatechange = ()=>{//監聽狀態 if(ajx.readyState==4){//判斷就緒碼,4為成功 if(ajx.status==200){//判斷狀態碼,200表示成功 console.log(ajx.responseText) //列印請求的內容 } } }
post請求
let ajx = new XMLHttpRequest() //創建ajax實例 // /*打開需要請求的地址,可以有三個參數 // 參1:請求方式 // 參2:請求地址 // 參3:是否非同步,可選,默認非同步 // */ ajx.open('post','//localhost/day02/api/gouwu.php') ajx.setRequestHeader('content-type','application/x-www-form-urlencoded')//設置請求頭 ajx.send('name=zhangsan')//向後端發送的數據,get方式用不到 ajx.onreadystatechange = ()=>{//監聽狀態 if(ajx.readyState==4){//判斷就緒碼,4為成功 if(ajx.status==200){//判斷狀態碼,200表示成功 console.log(ajx.responseText) //列印請求的內容 } } }
很麻煩吧,請求個數據我們需要寫這麼多,那麼我們把它封裝成get、post請求都可以使用的方法
首先先想好我們需要調用的方式,這裡我封裝的調用方式是這樣的
ajax({ //調用封裝的方法 type: 'get', //可以不寫,默認get url: '//localhost/day02/api/gouwu.php', //請求地址 data: { //需要傳輸的數據,可選 name: 'zhangsan', age: 18 } },a=>{//處理的到的數據 console.log(a) })
然後根據上面的調用方法進行封裝
function ajax(obj, fn) { let ajx = new XMLHttpRequest() //創建ajax實例 obj.type = obj.type ? obj.type : 'get' //判斷type存不存在,不存在默認等於get let data = null //向後端發送的數據 if (obj.data) { //判斷是否存在 for (let i in obj.data) { data += i + '=' + obj.data[i] + '&' //鍵值拼接成name=zhagnsan&age=18形式 } } if (obj.type == 'get') { //處理get請求發送數據 ajx.open(obj.type, obj.url + '?' + data) //地址上拼接數據 ajx.send() } else if (obj.type == 'post') { //處理post請求發送數據 ajx.open(obj.type, obj.url) ajx.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //設置請求頭 ajx.send(data) //發送數據 } ajx.onreadystatechange = () => { if (ajx.readyState == 4) { if (ajx.status == 200) { /* 將得到的數據傳給回調函數 短路寫法,如果不傳fn為空不會執行,有值就執行 */ fn&&fn(ajx.responseText) } } } }
這樣我們就封裝好了,以後使用也就變得方便了