1. 程式人生 > 實用技巧 >原生js寫ajax-demo

原生js寫ajax-demo

現在多數的請求基本上都是使用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"
      }