ホームページ > 記事 > ウェブフロントエンド > axios と ajax の違いは何ですか
axios と ajax の違い: 1. axios は Promise ベースの HTTP ライブラリであるのに対し、ajax はネイティブ XHR のカプセル化です; 2. 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 のサポート
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 サイトの他の関連記事を参照してください。