原生js寫ajax-demo
阿新 • • 發佈:2020-07-02
現在多數的請求基本上都是使用axios,那麼有時候面試的時候可能會遇見是否會用原生js寫ajax,其實工作中,我們並不會使用自己原生手寫的,因為存在很多問題,我門自己可能都想不到,所以這裡我簡單的寫了下原生的ajax。
function myAjax(options) { let { url, type, data, onsuccess } = options if (type.toLowerCase() === 'get' && data) { //data 傳進來的需要序列化,這裡預設已經序列化 //... url = url + '?' + data } var xhr = new XMLHttpRequest() xhr.open(type, url) //這裡只是模擬了成功以後的函式,需要的話還可以模擬錯誤等... xhr.onload = function () { onsuccess(xhr.responseText) } if (type.toLowerCase() === 'post') { xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') xhr.send(data) } else { xhr.send() } } //get呼叫 myAjax({ url: './index.json', type: 'get', data: 'name=zs', onsuccess: function (res) { console.log(res); } }) //post呼叫,這裡只是模擬一下,沒有寫介面,http報405錯 myAjax({ url: './index.json', type: 'post', data: JSON.stringify({ name: 1 }), onsuccess: function (res) { console.log(res); } }) //index.json中只是隨便寫了個json物件 { "name":"zs" }