首页 > Web开发 > 详细

原生js写ajax-demo

时间:2020-07-02 20:01:48      阅读:63      评论:0      收藏:0      [点我收藏+]

现在多数的请求基本上都是使用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

原文:https://www.cnblogs.com/xixiaoxi/p/13226511.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!