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

原生js写ajax-demo

上一篇:第七章 使用jQuery操作DOM


下一篇:js写一个简单的日历