ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryのaxiosとajaxの違いは何ですか

jqueryのaxiosとajaxの違いは何ですか

WBOY
WBOYオリジナル
2022-06-14 19:09:032600ブラウズ

jquery における axios と ajax の違い: 1. axios は、promise による ajax テクノロジーのカプセル化ですが、jquery はリクエスト テクノロジーを ajax にカプセル化します; 2. axios は Promise ベースの HTTP ライブラリで、ajax はネイティブ XHR のカプセル化。

jqueryのaxiosとajaxの違いは何ですか

このチュートリアルの動作環境: Windows10 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。

jquery における axios と ajax の違いは何ですか?

axios と ajax の違い:

axios は Promise ベースの HTTP ライブラリです、ajax はネイティブ XHR のカプセル化ですが、

ajax テクノロジーはローカル データの更新を実現し、axios は ajax のカプセル化を実現します。

axios は、JQuery が Ajax カプセル化を実装するのと同じように、Promise による Ajax テクノロジーのカプセル化です。

簡単に言うと、ajax テクノロジーは Web ページの部分的なデータ更新を実現し、axios は ajax のカプセル化を実現します。言い換えれば、jQuery はリクエスト テクノロジーを ajax にカプセル化し、promise を通じて ajax は axios にカプセル化されます。 Axios は ajax であり、ajax は単なる axios ではありません。

ajax ではなぜ axios を使用する必要があるのでしょうか?

現在のフロントエンド mvvm モードでは、axios はデータ要求により適しています。

拡張知識:

ajax 定義

つまり、AJAX は Web ページ全体を再読み込みしません。

#jQuery はネイティブ Ajax をカプセル化するので、AJAX 関数を実装するために必要なコードは 1 行だけです。

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 ビデオ チュートリアル

以上がjqueryのaxiosとajaxの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。