zoukankan      html  css  js  c++  java
  • axios、jquery及原生ajax对比

    Ajax、fetch、axios的区别与优缺点

    axios的github地址

    原生ajax

        //创建异步对象  
        var xhr = new XMLHttpRequest();
        //设置请求基本信息,并加上请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.open('post', 'test.php' );
        //发送请求
        xhr.send('name=Lan&age=18');
        xhr.onreadystatechange = function () {
            // 这步为判断服务器是否正确响应
          if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
          } 
        };

    jqueryAjax

    var loginBtn =  document.getElementsByTagName("button")[0];
    loginBtn.onclick = function(){
        ajax({
            type:"post",
            url:"test.php",
            data:"name=lan&pwd=123456",
            success:function(data){
               console.log(data);
            }
        });
    }

    fetch

    fetch('http://www.mozotech.cn/bangbang/index/user/login', {
        method: 'post',
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams([
            ["username", "Lan"],["password", "123456"]
        ]).toString()
    })
    .then(res => {
        console.log(res);
        return res.text();
    })
    .then(data => {
        console.log(data);
    })

    axios

    axios({
        method: 'post',
        url: '/abc/login',
        data: {
            userName: 'Lan',
            password: '123'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

    同时发起多个请求:

     

    对比

    1. 几种方式的对比
      ajax:
      优点:局部更新;原生支持】
      缺点:可能破坏浏览器后退功能;嵌套回调】
      jqueryAjax:
      【在原生的ajax的基础上进行了封装;支持jsonp】
      fetch:
      优点:解决回调地狱】
      缺点:API 偏底层,需要封装;默认不带Cookie,需要手动添加; 浏览器支持情况不是很友好,需要第三方的ployfill】
      axios:
      【几乎完美】

    2. axios的特点
      支持浏览器和node.js
      支持promise
      拦截请求和响应
      能转换请求和响应数据
      取消请求
      自动转换JSON数据
      浏览器端支持防止CSRF(跨站请求伪造)


    作者:豆浆牛奶宝宝
    链接:https://www.jianshu.com/p/d771bbc61dab
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
     
     
  • 相关阅读:
    完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片
    Input的size,width,maxlength属性
    Linux,VI命令详解
    Javascript 第十章
    Javascript 第七章
    IE css hack
    Javascript 第九章
    js中document.documentElement 和document.body 以及其属性
    关于xmlhttp.status == 0的问题
    Javascript 第八章
  • 原文地址:https://www.cnblogs.com/ryelqy/p/12201827.html
Copyright © 2011-2022 走看看