原生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)
            }
        }
    }
}

 

這樣我們就封裝好了,以後使用也就變得方便了

Tags: