jqueryaxios和ajax有什麼差別

WBOY
發布: 2022-06-14 19:09:03
原創
2617 人瀏覽過

jquery中axios和ajax的區別:1、axios是透過promise實現對ajax技術的一種封裝,而jquery將請求技術進行了封裝變成了ajax;2、axios是一個基於Promise的HTTP庫,而ajax是對原生XHR的封裝。

jqueryaxios和ajax有什麼差別

本教學操作環境:windows10系統、jquery3.6.0版本、Dell G3電腦。

jquery中axios和ajax有什麼區別

axios和ajax的區別:

axios是基於Promise的HTTP庫,而ajax是對原生XHR的封裝;

ajax技術實現了局部資料的刷新,而axios實現了對ajax的封裝。

axios是透過promise實現ajax技術的一種封裝,就像JQuery實作ajax封裝一樣。

簡單來說就是:ajax技術實現了網頁的局部資料刷新,axios實現了對ajax的封裝。也就是說,jQuery 將請求技術進行了封裝 變成了 ajax , 而透過 promise 又把 ajax 進行封裝就成了 axios。 axios是ajax,ajax不只axios。

有了ajax,為什麼還要使用axios?

在現在的前端 mvvm 模式下 axios 比較適合資料請求。

擴充知識:

ajax定義

簡短地說,在不重載整個網頁的情況下,AJAX透過後台載入數據,並在網頁上進行顯示

jQuery為我們將原生ajax進行了封裝,現在我們只需要一行簡單的程式碼,就可以實作AJAX 功能。

1.底層介面

    $.ajax({
      url:'',    //请求地址
      method:'',  //请求方式
      data:{},     //传参  无参可不写
      success:function(res){
        //请求成功的回调函数
      },
      error:function(err){
        //请求失败的回调函数
      },
    })
登入後複製

2.捷徑

    $.get(url,data,function(res){})
    $.post(url,data,function(res){})
登入後複製

axios請求的使用

Axios 是基於promise ( Promise 是非同步程式設計的一種解決方案)的HTTP 函式庫,可以用在瀏覽器和node.js 中

jQuery ajax:

本身是針對MVC的程式設計,不符合現在前端MVVM

基於原生的XHR開發,XHR本身的架構不清晰,已經有了fetch的替代方案

JQuery整個專案太大,單純使用ajax卻要引入整個JQuery非常的不合理(採取個人化打包的方案又不能享受CDN服務)

axios的原生使用:

axios({
      url:'http://47.93.206.13:8002/user/login',
      // baseURL:'http://47.93.206.13:8002',
      method:'post',
      // params:    用于get请求
      data:{    //用于post请求
        username:'admin1',
        password:'123321'   
      }
    }).then((res) => {
      console.log(res);
    })
登入後複製

 axios快捷方法:

/ 引入
let axios=require('axios')//到当前node_modules找,找不到再往上找
// 封装写法
axios.get('http://47.107.65.238:8888/index/article/pageQuery?page=1&pageSize=10')
  .then(function (response) {
    console.log(response);
  })
登入後複製

影片教學推薦: jQuery影片教學

以上是jqueryaxios和ajax有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板