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

axios と ajax の違いは何ですか

藏色散人
藏色散人オリジナル
2021-12-17 15:38:0052648ブラウズ

axios と ajax の違い: 1. axios は Promise ベースの HTTP ライブラリであるのに対し、ajax はネイティブ XHR のカプセル化です; 2. ajax テクノロジーはローカル データのリフレッシュを実現し、axios は ajax カプセル化を実現します。

axios と ajax の違いは何ですか

この記事の動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

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

axios と ajax の違い、利点、欠点:

ajax:

1. ajax とは

##Ajax はネイティブ XHR をカプセル化したものです。これを達成するために、JSONP のサポートを追加しました。

非同期 JavaScript と XML、ajax は新しいテクノロジーではありませんが、複数のテクノロジーを組み合わせたもので、動的ページを迅速に作成するために使用され、更新せずにデータを更新してユーザー エクスペリエンスを向上させることができます。経験。

2. ajax の原理?

クライアントが ajax エンジンをリクエストし、次に ajax エンジンがサーバーをリクエストします。サーバーは一連の応答を行って、ajax エンジンに戻ります。ajax エンジンは、結果をどこに書き込むかを決定します。クライアント。ページを更新せずにデータ更新を実現します。

3. コアオブジェクト?

XMLHttpReques

4. ajax の長所と短所は何ですか?

利点

1. 更新せずにデータを更新します

2. サーバーとの非同期通信

3. フロントエンドとバックエンド負荷分散

4. 標準に基づいて広くサポートされています

5. インターフェイスとアプリケーションの分離

欠点:

1. Ajax は Back および履歴機能、つまり臓器メカニズムの損傷を閲覧するための機能です。

2. セキュリティの問題 Ajax によりサーバーとの対話の詳細が公開される

# 3. 検索エンジンのサポートが比較的弱い

# 4. 例外処理メカニズムを破壊するプログラム

5. URLとリソースの位置決めの本来の意図に違反する

# 6. Ajaxはモバイルデバイスを十分にサポートしていない

# 7. クライアントコードが多すぎると開発コストが発生する

5. Ajax に適用できるシナリオ

<1>. フォーム主導の対話 <2>. 深いレベルのツリー ナビゲーション <3>. 高速ユーザー間のコミュニケーションと応答
. 投票、はい/いいえなどの重要ではないシナリオ
. データのフィルタリングと関連データの操作のシナリオ
; . 通常のテキスト入力プロンプトとオートコンプリートのシナリオ

6. Ajax はシナリオには適していません

<1>.いくつかの単純なフォーム <2>.検索 <3>.基本的なナビゲーション
<4>.大量のテキストの置換
<5>.プレゼンテーションの操作


7、コード

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
});
8. ajax リクエストの 5 つのステップ

1. XMLHttpRequest 非同期オブジェクトを作成します

2. コールバック関数を設定します

3. を使用しますopen メソッドはサーバーとの接続を確立します。

4. サーバーにデータを送信します。

5. コールバック関数でさまざまな応答ステータスを処理します。

axios :

1. axios とは

Axios は

Promise# に基づいたプラットフォームです## HTTPライブラリはブラウザとnode.jsで利用できます。 2. axios にはどのような機能がありますか?

1. ブラウザで XMLHttpRequest を作成します

## 2. node.js で http リクエストを作成します
3. Promise API のサポート

# 4. リクエストとレスポンスのインターセプトのサポート

# 5. リクエストとレスポンス データの変換

# 6. リクエストのキャンセル

7 . JSON データ形式に自動的に変換します

8. クライアントは XSRF に対する防御をサポートします

3. get request を実行するには 2 つの方法があります

// 第一种方式  将参数直接写在url中axios.get('/getMainInfo?id=123')
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})// 第二种方式  将参数直接写在params中axios.get('/getMainInfo', {  params: {
    id: 123
  }
})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

4. postリクエストを実行する際は、postリクエストの入力パラメータに注意してください(paramsフィールドに記述する必要はありません)。getリクエストの2番目のメソッドとは区別されます。

axios.post('/getMainInfo', {
  id: 123})
.then((res) => {
  console.log(res)
})
.catch((err) => {
  console.log(err)
})

axios と ajax の違い:

axios は、jquery と同様に、Promise による ajax テクノロジーのカプセル化です。 ajax の機能は同じです。簡単に言うと、ajax テクノロジーはローカル データの更新を実現し、axios は ajax のカプセル化を実現します。一部の axios には ajax が含まれていますが、一部の axios には ajax が含まれていない場合があります。まとめると、axios は ajax です。Ajax は以上ですアクシオス。 注: 従来の Ajax は XMLHttpRequest (XHR) を指します。 Axios と jQuer ajax は両方とも Ajax のカプセル化です

推奨される学習: 「ajax ビデオ チュートリアル

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

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