Ajaxの動作原理と解析例のメリット・デメリット

1. Ajaxとは何ですか？

正式名称はasynchronous javascript and xmlで、クライアントとサーバー間の非同期通信の効果（ページ全体を再読み込みしない）と、ページの部分更新を実現するために使われる既存技術の組み合わせである。

AJAXは、バックグラウンドでサーバーと少量のデータをやり取りすることにより、ウェブページの非同期更新を可能にし、高速で動的なウェブページを作成するために使用されます。

初期のブラウザはajaxをネイティブにサポートしておらず、非同期効果を隠すフレーム（iframe）を使って偽装していたが、後のブラウザはajaxをネイティブにサポートするようになった。

2. Ajaxの仕組み

Ajaxをネイティブに使ったリクエスト送信は、主にXMLHttpRequest（IE7+, Firefox, Chrome, Safari, Opera）、非同期通信用のActiveXObject（IE5とIE6）オブジェクトで行われます。

XMLHttpRequestオブジェクトを作成する。

var xhr;
if (window.XMLHttpRequest)
{
  // IE7+, Firefox, Chrome, Opera, Safari browsers execute the code
  xhr=new XMLHttpRequest();
}
else
{
  // IE6, IE5 browsers execute the code
  xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

サーバへのリクエストの送信: XMLHttpRequest オブジェクトの open() および send() メソッドを使用します。

// To send a message via the GET method, add a message to the URL
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();

// POST data like an HTML form, using setRequestHeader() to add HTTP headers
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

//When using async=true, specify the function to be executed when the response is in the ready state in the onreadystatechange event
xhr.onreadystatechange=function()
{
  if (xhr.readyState==4 && xhr.status==200)
  {
    document.getElementById("myDiv").innerHTML=xhr.responseText;
  }
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();

//when you use async=false, just put the code after send() statement, not recommended
xhr.open("GET","/try/ajax/ajax_info.txt",false);
xhr.send();
document.getElementById("myDiv").innerHTML=xhr.responseText;

GETを使うかPOSTを使うか？

POSTと比較すると、GETはよりシンプルで高速であり、ほとんどのケースで機能します。

GET は POST よりもシンプルで高速であり、ほとんどの場合において動作します。

ただし、以下のような場合はPOSTリクエストを使用してください。

キャッシュされたファイルを使用できない（サーバー上のファイルやデータベースを更新するため）
大量のデータをサーバーに送信する（POSTはデータ量に制限がない）。
未知の文字を含むユーザー入力を送信する場合、GETよりもPOSTの方が安定性と信頼性が高い

// The response from the server is not XML, and uses the responseText property to return a response as a string
document.getElementById("myDiv").innerHTML=xhr.responseText;

// The response from the server is XML and needs to be parsed as an XML object, use the responseXML property, request the cd_catalog.xml file and parse the response
xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
  txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

onreadystatechangeイベントです。リクエストがサーバーに送信されると、いくつかのレスポンスベースのタスクを実行する必要があります。readyStateが変更されると、onreadystatechangeイベントが発生する。

// When readyState is equal to 4 and the status is 200, the response is ready
xhr.onreadystatechange=function()
{
  if (xhr.readyState == 4 && xhr.status == 200)
  {
    document.getElementById("myDiv").innerHTML=xhr.responseText;
  }
}
// If there are multiple AJAX tasks, then a standard function should be written for creating an XMLHttpRequest object and called for each AJAX task. The function call should contain the URL and the task to be performed when the onreadystatechange event occurs (which may not be the same for each call)
function myFunction()
{
  loadXMLDoc("/try/ajax/ajax_info.txt",function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

xhr.readyStateの値と説明です。

0: リクエストが初期化されていない（open()がまだ呼ばれていない）。

1: リクエストは作成されたが、送信されていない (send() がまだ呼び出されていない)。

2: リクエストが送信され、処理中である (通常、コンテンツヘッダーはレスポンスから取得できる)。

3: リクエストは処理中です。通常、いくつかのデータはすでにレスポンスで利用可能ですが、サーバーはまだレスポンスの生成を終えてはいません。

4: 応答が完了した。これでサーバーの応答を取得して使用できる。

xhr.statusの値と説明です。

100 - クライアントはリクエストをし続けなければならない

101 - クライアントがリクエストに応答して、HTTPプロトコルのバージョンを変換するようにサーバーに要求します。

200 - トランザクションが正常に終了しました。

201 - 新しいファイルの URL を知るプロンプトが表示されます。

202 - 受け入れて処理するが、処理が完了しない

203 - 返送情報が不明または不完全である。

204 - リクエストを受け取りましたが、リターンメッセージは空です。

205 - サーバーは要求を完了し、ユーザーエージェントは現在表示されているファイルをリセットする必要があります。

206 - サーバーは、一部のユーザーに対して GET リクエストを完了しました。

300 - 要求されたリソースは、複数の場所で利用可能です。

301 - 要求されたデータを削除します。

302 - 別のアドレスで見つかったデータを要求する

303 - お客様へ代替URLまたはアクセス方法のご提案

304 - クライアントが GET を実行しましたが、ファイルは変更されていません。

305 - 要求されたリソースは、サーバーによって指定されたアドレスから取得する必要があります。

306 - HTTP の以前のバージョンで使用されていたコードで、現在のバージョンでは使用されていません。

307 - 要求されたリソースの一時的な削除を確認します。

400 - 構文エラーなどのエラーリクエスト

401 - 認証のリクエストに失敗しました

402 - 有効な ChargeTo ヘッダー レスポンスを保持します。

403 - リクエストは許可されていません

404 - ファイル、クエリ、または URl が見つかりませんでした。

405 - Request-Line フィールドでユーザーが定義したメソッドは許可されていません。

406 - ユーザーが送信した Accept drag によると、要求リソースにアクセスできません。

407 - 401 と同様、ユーザーは最初にプロキシ サーバーで認証される必要があります。

408 - ユーザーが指定した飢餓時間内に、クライアントがリクエストを完了しませんでした。

409 - 現在のリソースの状態では、リクエストは完了できませんでした。

410 - このリソースはサーバー上で利用できなくなり、それ以上の参照アドレスはありません。

411 - サーバーは、ユーザー定義の Content-Length 属性に対する要求を拒否しました。

412 - 現在の要求で、1 つ以上の要求ヘッダー フィールドが正しくありません。

413 - 要求されたリソースは、サーバーで許可されたサイズより大きいです。

414 - 要求されたリソースの URL が、サーバーが許可する長さより長いです。

415 - 要求されたリソースは、要求項目の形式をサポートしていません。

416 - リクエストはRangeリクエストヘッダーフィールドを含み、現在のリクエストリソース内にレンジインジケータ値がなく、リクエストはIf-Rangeリクエストヘッダーフィールドを含んでいません。

417 - サーバーは、リクエスト Expect ヘッダーフィールドで指定された期待に応えられず、プロキシサーバーの場合は、次のレベルのサーバーがリクエストに応えられない可能性があります。

500 - サーバーが内部エラーを発生させました

501 - サーバーが要求された機能をサポートしていません。

502 - サーバーが一時的に利用できない。システムの過負荷の発生を防ぐためであることがある。

503 - サーバーに負荷がかかっている、またはメンテナンスのために停止しています。

504 - ゲートウェイが過負荷のため、サーバーはユーザーへの応答に別のゲートウェイまたはサービスを使用し、待機時間の設定値が長くなっています。

505 - サーバーが、リクエスト ヘッダーで指定された HTTP バージョンをサポートしないか、拒否しました。

1xx:メッセージを受信し、処理を継続したことを示すレスポンスクラス

2xx:処理成功応答クラス、アクションが正常に受信、理解、受け入れられたことを示す

3xx:リダイレクト応答クラス。指定されたアクションを完了するために、さらなる処理を受け入れる必要があります。

4xx:クライアントエラー、クライアントのリクエストに構文エラーが含まれているか、正しく実行されていない。

5xx:サーバーサイドエラー、サーバーが正しいリクエストを正しく実行できませんでした。

3. Ajaxのメリット・デメリット

長所 1. リフレッシュレスデータ更新：ページ全体をリフレッシュすることなくサーバーとの通信を維持

2. サーバーとの非同期通信：ユーザーの操作を中断することなく、サーバーとの非同期通信を利用することができる

　　 3. フロントエンドとバックエンドの負荷分散：バックエンドの作業の一部をフロントエンドに移動させ、サーバーの負担と帯域を軽減する

4. 仕様に基づき広くサポート：ブラウザのプラグインやアプレットをダウンロードする必要はないが、クライアントがブラウザ上でJavaScriptを実行できるようにする必要がある。

　　 5. インターフェースとアプリケーションの分離 Ajaxはインターフェースとアプリケーションを分離させる、つまり、データとプレゼンテーションを分離させる。

デメリット 1. AjaxはBackとHistoryの機能をサポートしていない、つまりブラウザの仕組みの破たん：動的に更新されるページの場合、ブラウザは履歴に静的なページしか記憶できないため、ユーザーは前のページのページに戻ることができない

2. セキュリティの問題 AJAX技術はユーザーに素晴らしいユーザー体験を与える一方で、IT企業に新たなセキュリティ脅威をもたらします。Ajax技術は、企業データへの直接のチャネルのようなものです。これにより、開発者は不注意にも以前より多くのデータやサーバーロジックを公開することになります。Ajaxロジックはクライアント側のセキュリティスキャン技術から隠れることができ、ハッカーがリモートサーバーから新しい攻撃を構築することを可能にします。また、クロスサイトフットワーク攻撃、SQLインジェクション攻撃、クレデンシャルベースのセキュリティ脆弱性など、ajaxが回避するのに苦労する既知のセキュリティ上の弱点があります。

　　　　　　　 3. 検索エンジンへの対応が弱い。AJAXは不適切に使用されると、ネットワークデータのトラフィック量を増加させるため、システム全体のパフォーマンスを低下させる可能性があります。解決策 サーバーレンダリングから始めるとよいでしょう。

4. プログラムの例外処理機構が壊れる

　　　　　　　 5. URLとリソースロケーションの本来の目的を破る。

　　　　　　　 6. モバイルデバイスにうまく対応できない

　　　　　　　 7. クライアントサイドが太い、クライアントセグメントコードが多すぎて開発コストがかかる

4. . アプリケーションシナリオ

1. データを動的にロードし、オンデマンドでデータを取得する。[ツリーメニュー、リンクメニュー.../プロビジョナルリンク]。

2. ユーザーエクスペリエンスを向上させる。[コンテンツ入力前のプロンプト、プログレスバー付きファイルアップロード...]。

3. Eコマース用途。[ショッピングカート、メール購読...]。

4.サードパーティーのサービスへのアクセス [検索サービス、RSSリーダーへのアクセス]。

5. データのレイアウトリフレッシュ

検索、基本的なナビゲーション、大量のテキストの置き換え、一部の簡単なフォームには適していません。

以上が今回の記事の内容ですが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。