最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • ajax与axios的使用和对比

    正文概述 掘金(廊坊吴彦祖)   2020-12-10   476

    ajax

    Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术 Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集) Ajax 是一种用于创建快速动态网页的技术 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面 参考百度百科

    优点:

    1. 在页面无刷新的情况下与服务器通讯维护数据,用户体验好
    2. 异步通讯方式,不打断用户操作,响应能力迅速
    3. 把一些请求转到客户端,“按需取数据”,最大程度的减少冗余请求和对服务器造成的负担
    4. 基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序

    使用:

    1. 原生 ajax

    ajax 的核心是 JavaScript 对象 XmlHttpRequest

    GET 请求方式
    //创建 XMLHttpRequest对象
    var xhr = new XMLHttpRequest()
    
    //打开要发送请求的地址,get发送请求时参数要放在url中
    xhr.open("get","https://me.csdn.net/weixin_45426836?a=1&b=2",true)
    
    //发送请求
    xhr.send()
    
    //监听请求状态,接收响应数据,onload 等于 xhr.readyState == 4
    xhr.onload = function(){
        if(xhr.status == 200) {
            console.log(xhr.response)  //通过xhr的response获取到响应的响应体
        }else {
        	console.log(error)
        }
    }
    
    POST 请求方式
    //创建 XMLHttpRequest对象
    var xhr = new XMLHttpRequest()
    
    //打开要发送请求的地址
    xhr.open("post","https://me.csdn.net/weixin_45426836",true)
    
    //设置请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    
    //发送请求,post发送请求时参数要放在send中
    xhr.send("a=1&b=2")
    
    //监听请求状态,接收响应数据,xhr.readyState == 4 等于 onload
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.response)  //通过xhr的response获取到响应的响应体
        }else {
        	console.log(error)
        }
    }
    
    XMLHttpRequest API 属性

    readyState: xhr的状态,请求响应过程的当前活动阶段 status: 响应的http状态 statusText: 响应的http状态的字符串信息说明 responseText: 响应的数据文本 responseXML: 响应的DOM兼容的文档数据对象 onreadystatechange: 事件,当 xhr.readyState 属性发生改变触发 onload: 事件,响应接收完毕触发

    XMLHttpRequest API 方法

    open(method, url, async): 打开要发送请求的地址,参数:请求方式、请求的url地址、请求是否异步的布尔值(默认true) send(requsetBody): 发送请求(体) setRequestHeader(key, value): 设置请求头 getResponseHeader(key): 获取响应头

    XMLHttpRequest 对象的 readyState 属性,表示请求响应过程的当前活动阶段:

    0: 未初始化,创建了XMLHttpRequest对象,但未调用open()方法 1: 启动,已经调用open()方法,但未调用send()方法 2: 发送,已经调用send()方法,但未接收到响应 3: 接收,已经接收到部分响应数据 4: 完成,已经接收到全部响应数据,并且可以在客户端使用

    2. jquery将ajax封装成了一个函数 $.ajax(),我们可以直接用这个函数来执行ajax请求

    常用参数:

    url : 请求的 URL 地址 type : 请求方式,默认是 GET,常用的还有 POST async : 请求是否异步,默认值是 true,表示异步,false 表示同步 dataType : 返回的数据类型,常用的是 json 格式 contentType: 请求的数据类型,默认为"application/x-www-form-urlencoded" data : 请求的数据参数 success : 请求成功后的回调函数 error : 请求失败后的回调函数

    $.ajax({
         url: 'https://me.csdn.net/weixin_45426836',
         type: 'get',
         dataType: 'json',
         data: {
              //'a': 1,
              //'b': 2 
         },
         success: function (data) {
             console.log(data)
         },
         error: function (err) {
         	 console.log(err)
         }
    })
    
    GET 请求方式 $.get()
    $.get("https://me.csdn.net/weixin_45426836", {
    	//'a': 1,
        //'b': 2
    },function (data) {
        console.log(data)
    })
    
    POST 请求方式 $.post()
    $.post("https://me.csdn.net/weixin_45426836", {
    	//'a': 1,
        //'b': 2
    },function (data) {
        console.log(data)
    })
    

    axios

    axios 是一个基于promise 的 http 库,可以用于浏览器和 nodejs 中

    优点:

    1. 从浏览器中创建 XMLHttpRequests
    2. 从 node.js 创建 http 请求
    3. 支持 Promise API
    4. 拦截请求和响应
    5. 转换请求数据和响应数据
    6. 取消请求
    7. 自动转换 JSON 数据
    8. 客户端支持防御 XSRF

    使用:

    通过向 axios 传递相关配置来创建请求
    常用参数:

    url : 请求的 URL 地址 method : 请求方式,默认是 GET,常用的还有 POST baseURL: baseURL 将自动加在 url 前面,除非 url 是一个绝对 URL responseType : 返回的数据类型,常用的是 json 格式 headers: 请求的自定义请求头 params : 与请求一起发送的 URL 参数 data : 请求的数据参数,只适用于 PUT, POST, 和 PATCH

    axios({
         url: 'https://me.csdn.net/weixin_45426836',
         method: 'get',
         responseType: 'json',
         params: {
             //'a': 1,
             //'b': 2,
         }
    }).then(function (data) {
         console.log(data)
    }).catch(function (err) {
         console.log(err)
    })
    
    执行 GET 请求
    axios.get('https://me.csdn.net/weixin_45426836', {
        params: {
          //'a': 1,
          //'b': 2,
        }
    }).then(function (data) {
         console.log(data)
    }).catch(function (err) {
         console.log(err)
    })
    
    执行 POST 请求
    axios.post('https://me.csdn.net/weixin_45426836', {
          //'a': 1,
          //'b': 2,
    }).then(function (data) {
         console.log(data)
    }).catch(function (err) {
         console.log(err)
    })
    
    使用 axios.all 处理并发请求
    function getOne() {
      return axios.get('https://me.csdn.net/weixin_45426836', {
          params: {
            //'a': 1
          }
      });
    }
    function getTwo() {
      return axios.get('https://me.csdn.net/weixin_45426836', {
          params: {
            //'b': 2
          }
      });
    }
    axios.all([getOne(), getTwo()])
      .then(axios.spread(function (one, two) {
        console.log(one)
        cosnoel.log(two)
    }))
    
    全局 axios 默认值

    axios.defaults

    // 全局默认的baseURL
    axios.defaults.baseURL = 'https://me.csdn.net/weixin_45426836'
    
    axios 拦截器

    在请求或响应被 thencatch 处理前拦截它们,进行一些操作

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    

    ajax 与 axios 的根本区别

    axios 是基于promise实现的对 ajax 技术的一种封装,两者用法基本一样,个别参数不同,axios 封装了一些更简便的 ajax 操作 axios 是 ajax,但是 ajax 不限于 axios


    起源地下载网 » ajax与axios的使用和对比

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元