ホームページ > 記事 > ウェブフロントエンド > アヤックスはどのように機能するのでしょうか? ajax の動作原理の紹介とその長所と短所の分析

アヤックスはどのように機能するのでしょうか? ajax の動作原理の紹介とその長所と短所の分析

寻∝梦オリジナル: 2018-09-10 11:14:531779ブラウズ

この記事では主にajaxの定義とajaxの動作原理を紹介します。最後に、ajax の長所と短所を紹介します。一緒にこの記事を見ていきましょう

1. 概念: AJAX とは
AJAX は、「Asynchronous JavaScript and XML」(非同期 JavaScript および XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジです。
2. なぜ彼を使うのですか?
最大の利点: ページ全体を更新せずに元のページの状態を維持するためにサーバーと通信します。簡単に言うと、Web を閲覧するときは、クリック、1、白い画面、別のページにジャンプするのを待つという 2 つの状況があります。 2. ページは更新されず、ユーザーエクスペリエンスを向上させるために新しいコンテンツがローカルに表示されます。
3. 基本原則
最初に画像を見てください
アヤックスはどのように機能するのでしょうか? ajax の動作原理の紹介とその長所と短所の分析 XHR は、クライアントとサーバー間の通信伝送を担当する通信兵に相当します。戦争が起こった場合、前線の陣地は通信兵がメッセージを送信するのを待っているだけで何もすることはできません。そのため、前線の陣地は依然として独自の行動をとり、後方の司令部（サーバー）の命令を要求するために通信兵を送ります。指揮官が命令を発し、兵士が指示を出します。コマンドは前線の位置 (クライアント) に渡され、クライアントはデータをページにレンダリングします。
3. XHR とは何ですか? (AJAX の仕組み)
彼の正式名は XMLHttpRequest です。AJAX はブラウザーの組み込みオブジェクト XHMHttpResquest を通じて非同期リクエストを送信します。非同期リクエストはフロントライン (クライアント) の操作を妨げません。
4. 非同期と同期を理解する
先ほど非同期について説明しましたが、同期とは、前線と通信兵士が協力してサーバーにデータを要求することを意味します。通信兵士がデータを要求する間、白い画面があなたを待っています。
5.XMLHttpResquest オブジェクトの属性は何ですか?
AJAX はブラウザーの組み込みオブジェクト XMLHttpRequest を通じて非同期リクエストを処理するため、まずその属性を理解しましょう
プロパティの説明は、状態が変更されるたびにトリガーされます。
2>. リクエストが受信されました
3>. リクエストが処理されています
4>. リクエストが完了し、応答の準備ができています
3.responseText リクエストデータテキストを返します
4.responseXML を返します
5.status 404 200 などのステータスコードを返します

6. XMLHttpRequest オブジェクトを作成し、AJAX リクエストを送信します

最新のすべてのブラウザに対応するために、XMLHttpRequest オブジェクトがサポートされているかどうかを検出します (さらに詳しく知りたい場合は、PHP 中国語 Web サイトの

AJAX 開発マニュアル 列にアクセスして学習してください)

 window.onload = function(){
    //1.创建XMLHttpRequest对象考虑兼容性
    var xhr = null
    if(window.XMLHttpRequest){         //现代浏览器
        xhr = new XMLHttpRequest()
    }else{
       xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;)//IE5/6
    }
 }
 console.log(&#39;状态A&#39;+xhr.readyState)  //2.设置请求方式。第一种方式get请求（2）post请求
  var url = &#39;数据&#39;
  //get请求，true异步请求，false，同步
  xhr.open(&#39;get&#39;, url, true)
  console.log(&#39;状态B&#39;+xhr.readyState)  /*（2）post请求 必须添加请求头
     var url = &#39;数据&#39;
     xhr.open(&#39;post&#39;, url, true)
     xhr.setRequestHander(&#39;Content-type&#39;,&#39;application/x-www-form-urlencoded&#39;)
   *///3.发送请求
  xhr.send()
  console.log(&#39;状态C&#39;+xhr.readyState)//4.回调函数
   xhr.onreadyStatechange = function() {
       if(xhr.readyState == 4 && xhr.status == 200) {
       console.log(xhr.resposeText)  //字符串
       //console.log(xhr.resposeXML) }
}

AJAX の利点:

1. 最大の利点は、ページを更新する必要がなく、ページ内でサーバーと通信するため、ユーザーエクスペリエンスが非常に優れていることです。

2. 非同期方式を使用して、操作を中断せずにサーバーと通信します。 3. これまでサーバーに負担がかかっていた作業をクライアントに転送できるため、サーバーと帯域幅が削減され、冗長なリクエストが最小限に抑えられます。
AJAX の欠点:

1. AJAX は戻る機能と履歴機能を無効にし、ブラウザのメカニズムを破壊します。
動的に更新されるページの場合、ブラウザーは静的なページしか履歴に記憶できないため、ユーザーは前のページの状態に戻ることはできません。完全に読み取られたページと動的に変更されたページの違いは非常に微妙です。ユーザーは多くの場合、「戻る」ボタンをクリックすると前の操作がキャンセルされると期待しますが、Ajax アプリケーションではこれは不可能です。 2. セキュリティの問題 Ajax テクノロジーは、企業データの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバーロジックを誤って公開してしまう可能性があります。 Ajax ロジックはクライアント側のセキュリティスキャンテクノロジから隠蔽できるため、ハッカーがリモートサーバーから新たな攻撃を作成できるようになります。 Ajax は、クロスサイトスクリプティング攻撃、SQL インジェクション攻撃、資格情報ベースのセキュリティの脆弱性など、いくつかの既知のセキュリティの弱点を回避することも困難です。 3. 検索エンジンのサポートは比較的弱いです。 AJAX を不適切に使用すると、ネットワークデータトラフィックが増加し、システム全体のパフォーマンスが低下します。
4. 一部のハンドヘルドデバイス (携帯電話、PDA など) は現在、ajax を十分にサポートしていません。たとえば、モバイルブラウザーで ajax テクノロジを使用して Web サイトを開いた場合、現在はサポートされていません。、この問題は私たちとはほとんど関係がありません。 (現時点では、代わりに他のプラグインを使用できます)

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX ユーザーマニュアルの列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がアヤックスはどのように機能するのでしょうか? ajax の動作原理の紹介とその長所と短所の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：アヤックスとは何ですか? ajaxのいくつかの実装方法を詳しく解説（使用例付き）次の記事：アヤックスとは何ですか? ajaxのいくつかの実装方法を詳しく解説（使用例付き）

続きを見る