AJAX-クイックガイド

AJAXは A同期 JavaScriptと XML。AJAXは、XML、HTML、CSS、およびJavaスクリプトを使用して、より優れた、より高速で、よりインタラクティブなWebアプリケーションを作成するための新しい手法です。

Ajaxは、コンテンツにXHTML、プレゼンテーションにCSSを使用し、動的コンテンツ表示にドキュメントオブジェクトモデルとJavaScriptを使用します。
従来のWebアプリケーションは、同期要求を使用してサーバーとの間で情報を送信します。これは、フォームに入力して[送信]をクリックすると、サーバーからの新しい情報が記載された新しいページに移動することを意味します。
AJAXでは、送信を押すと、JavaScriptがサーバーにリクエストを送信し、結果を解釈して、現在の画面を更新します。純粋な意味では、ユーザーはサーバーに何かが送信されたことさえ知らないでしょう。
サーバーデータを受信するための形式としてXMLが一般的に使用されますが、プレーンテキストを含む任意の形式を使用できます。
AJAXは、Webサーバーソフトウェアに依存しないWebブラウザテクノロジです。
クライアントプログラムがバックグラウンドでサーバーに情報を要求している間、ユーザーはアプリケーションを引き続き使用できます。
直感的で自然なユーザーインタラクション。クリックする必要はありません。マウスを動かすだけで十分なイベントトリガーになります。
ページ駆動型ではなくデータ駆動型。

リッチインターネットアプリケーションテクノロジー

AJAXは、これまでで最も実行可能なリッチインターネットアプリケーション（RIA）テクノロジーです。それは途方もない業界の勢いを得ており、いくつかのツールキットとフレームワークが出現しています。しかし同時に、AJAXにはブラウザの非互換性があり、JavaScriptでサポートされているため、保守とデバッグが困難です。

AJAXはオープンスタンダードに基づいています

AJAXは次のオープンスタンダードに基づいています-

HTMLおよびカスケードスタイルシート（CSS）を使用したブラウザベースのプレゼンテーション。
データはXML形式で保存され、サーバーからフェッチされます。
舞台裏のデータは、ブラウザーでXMLHttpRequestオブジェクトを使用してフェッチします。
すべてを実現するJavaScript。

AJAXは独立して機能することはできません。他のテクノロジーと組み合わせて使用して、インタラクティブなWebページを作成します。

JavaScript

緩く型付けされたスクリプト言語。
JavaScript関数は、ページでイベントが発生したときに呼び出されます。
AJAX操作全体の接着剤。

DOM

構造化ドキュメントにアクセスして操作するためのAPI。
XMLおよびHTMLドキュメントの構造を表します。

CSS

プレゼンテーションスタイルをコンテンツから明確に分離でき、JavaScriptによってプログラムで変更できます

XMLHttpRequest

サーバーとの非同期相互作用を実行するJavaScriptオブジェクト。

これは、AJAXを利用するいくつかの有名なWebアプリケーションのリストです。

グーグルマップ

ユーザーは、ボタンをクリックするのではなく、マウスを使用してマップ全体をドラッグできます。

https://maps.google.com/

グーグルサジェスト

入力すると、Googleが提案を提供します。矢印キーを使用して結果をナビゲートします。

https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmailは、メールをより直感的、効率的、かつ便利にするという考えに基づいて構築されたウェブメールです。

https://gmail.com/

Yahoo Maps（新規）

今、あなたが行くところに行くのはさらに簡単でもっと楽しいです！

https://maps.yahoo.com/

AJAXと従来のCGIプログラムの違い

これらの2つの例を1つずつ試してみると、違いを実感できます。AJAXの例を試している間、不連続性はなく、応答は非常に迅速に得られますが、標準のGCIの例を試すと、応答を待つ必要があり、ページも更新されます。

AJAXの例

標準例

NOTE−AJAXデータベースでより複雑な例を示しました。

利用可能なすべてのブラウザがAJAXをサポートできるわけではありません。AJAXをサポートする主要なブラウザのリストは次のとおりです。

Mozilla Firefox1.0以降。
Netscapeバージョン7.1以降。
Apple Safari1.2以降。
Microsoft Internet Explorer5以降。
Konqueror.
Opera7.6以降。

次のアプリケーションを作成するときは、AJAXをサポートしていないブラウザーを検討してください。

NOTE −ブラウザがAJAXをサポートしていないと言う場合、それは単にブラウザがJavascriptオブジェクト（XMLHttpRequestオブジェクト）の作成をサポートしていないことを意味します。

ブラウザ固有のコードの記述

ソースコードをブラウザと互換性のあるものにする最も簡単な方法は、JavaScriptでtry ... catchブロックを使用することです。

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

上記のJavaScriptコードでは、XMLHttpRequestオブジェクトの作成を3回試みています。私たちの最初の試み-

ajaxRequest = new XMLHttpRequest（）;

これは、Opera 8.0以降、Firefox、およびSafariブラウザ用です。失敗した場合は、さらに2回試行して、InternetExplorerブラウザー用の正しいオブジェクトを-で作成します。

ajaxRequest = new ActiveXObject（ "Msxml2.XMLHTTP"）;
ajaxRequest = new ActiveXObject（ "Microsoft.XMLHTTP"）;

それが機能しない場合は、XMLHttpRequestをサポートしていない非常に古いブラウザーを使用できます。これは、AJAXをサポートしていないことも意味します。

ただし、ほとんどの場合、変数ajaxRequestは、ブラウザーが使用するXMLHttpRequest標準に設定され、サーバーへのデータの送信を開始できます。段階的なAJAXワークフローについては、次の章で説明します。

この章では、AJAX操作の正確な手順を明確に説明します。

AJAX操作のステップ

クライアントイベントが発生します。
XMLHttpRequestオブジェクトが作成されます。
XMLHttpRequestオブジェクトが構成されます。
XMLHttpRequestオブジェクトは、Webサーバーに対して非同期リクエストを行います。
Webサーバーは、XMLドキュメントを含む結果を返します。
XMLHttpRequestオブジェクトはcallback（）関数を呼び出し、結果を処理します。
HTMLDOMが更新されます。

これらのステップを1つずつ実行していきましょう。

クライアントイベントが発生します

イベントの結果としてJavaScript関数が呼び出されます。
例-validateUserId （） JavaScript関数は、IDが「userid」に設定されている入力フォームフィールドのonkeyupイベントにイベントハンドラーとしてマップされます
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId（）;">。

XMLHttpRequestオブジェクトが作成されます

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

XMLHttpRequestオブジェクトが構成されています

このステップでは、クライアントイベントによってトリガーされる関数を記述し、コールバック関数processRequest（）を登録します。

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Webサーバーへの非同期リクエストの作成

ソースコードは上記のコードで入手できます。太字で書かれたコードは、ウェブサーバーにリクエストを送信する責任があります。これはすべて、XMLHttpRequestオブジェクトajaxRequestを使用して実行されます。

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid"); var url = "validate?id = " + escape(target.value); ajaxRequest.open("GET", url, true); ajaxRequest.send(null);
}

ユーザーIDボックスにZaraと入力すると、上記のリクエストでURLが「validate？id = Zara」に設定されます。

WebサーバーはXMLドキュメントを含む結果を返します

サーバーサイドスクリプトは任意の言語で実装できますが、そのロジックは次のようになります。

クライアントからリクエストを取得します。
クライアントからの入力を解析します。
必要な処理を行います。
出力をクライアントに送信します。

サーブレットを作成することを想定している場合、ここにコードがあります。

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

コールバック関数processRequest（）が呼び出されます

XMLHttpRequestオブジェクトは、XMLHttpRequestオブジェクトのreadyStateに状態が変化したときにprocessRequest（）関数を呼び出すように構成されました。これで、この関数はサーバーから結果を受け取り、必要な処理を実行します。次の例のように、Webサーバーからの戻り値に基づいてtrueまたはfalseに変数メッセージを設定します。

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTMLDOMが更新されました

これが最後のステップであり、このステップでHTMLページが更新されます。それは次のように起こります-

JavaScriptは、DOMAPIを使用してページ内の任意の要素への参照を取得します。
要素への参照を取得するための推奨される方法は、を呼び出すことです。

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

JavaScriptを使用して要素の属性を変更できるようになりました。要素のスタイルプロパティを変更します。または、子要素を追加、削除、または変更します。ここに例があります-

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

上記の7つのステップを理解していれば、AJAXはほぼ完了です。次の章では、XMLHttpRequestオブジェクトについて詳しく説明します。

XMLHttpRequestオブジェクトはAJAXの鍵です。Internet Explorer 5.5が2000年7月にリリースされて以来利用可能でしたが、2005年のAJAXとWeb2.0が普及するまで完全には発見されませんでした。

XMLHttpRequest（XHR）は、JavaScript、JScript、VBScript、およびその他のWebブラウザースクリプト言語で使用できるAPIであり、HTTPを使用してWebサーバーとの間でXMLデータを転送および操作し、Webページのクライアント側とサーバ側。

XMLHttpRequest呼び出しから返されるデータは、多くの場合、バックエンドデータベースによって提供されます。XMLに加えて、XMLHttpRequestを使用して、JSONやプレーンテキストなどの他の形式でデータをフェッチできます。

XMLHttpRequestオブジェクトを作成する方法に関するいくつかの例をすでに見てきました。

以下にリストされているのは、あなたが精通しなければならないいくつかのメソッドとプロパティです。

XMLHttpRequestメソッド

abort()

現在のリクエストをキャンセルします。
getAllResponseHeaders()

HTTPヘッダーの完全なセットを文字列として返します。
getResponseHeader( headerName )

指定されたHTTPヘッダーの値を返します。
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

リクエストのメソッド、URL、およびその他のオプションの属性を指定します。

メソッドパラメータの値は、「GET」、「POST」、または「HEAD」にすることができます。「PUT」や「DELETE」（主にRESTアプリケーションで使用される）などの他のHTTPメソッドが可能な場合があります。

「async」パラメーターは、要求を非同期で処理するかどうかを指定します。「true」は、スクリプト処理がsend（）メソッドの後で応答を待たずに続行されることを意味し、「false」は、スクリプトがスクリプト処理を続行する前に応答を待機することを意味します。
send( content )

リクエストを送信します。
setRequestHeader( label, value )

送信するHTTPヘッダーにラベルと値のペアを追加します。

XMLHttpRequestプロパティ

onreadystatechange

状態が変化するたびに発生するイベントのイベントハンドラー。
readyState

readyStateプロパティは、XMLHttpRequestオブジェクトの現在の状態を定義します。

次の表に、readyStateプロパティの可能な値のリストを示します-

状態	説明
0	リクエストは初期化されていません。
1	リクエストが設定されました。
2	リクエストが送信されました。
3	リクエストは処理中です。
4	リクエストが完了しました。

readyState = 0 XMLHttpRequestオブジェクトを作成した後、open（）メソッドを呼び出す前。

readyState = 1 open（）メソッドを呼び出した後、send（）を呼び出す前。

readyState = 2 send（）を呼び出した後。

readyState = 3 ブラウザがサーバーとの通信を確立した後、サーバーが応答を完了する前。

readyState = 4 要求が完了し、応答データがサーバーから完全に受信された後。

responseText

応答を文字列として返します。
responseXML

応答をXMLとして返します。このプロパティはXMLドキュメントオブジェクトを返します。このオブジェクトは、W3CDOMノードツリーのメソッドとプロパティを使用して調べたり解析したりできます。
status

ステータスを数値として返します（たとえば、「見つかりません」の場合は404、「OK」の場合は200）。
statusText

ステータスを文字列として返します（例：「見つかりません」または「OK」）。

AJAXを使用してデータベースから情報にアクセスすることがいかに簡単であるかを明確に示すために、MySQLクエリをその場で構築し、結果を「ajax.html」に表示します。しかし、先に進む前に、基本的な作業を行いましょう。次のコマンドを使用してテーブルを作成します。

NOTE −次のMySQL操作を実行するのに十分な権限があることを前提としています。

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

次に、次のSQLステートメントを使用して次のデータをこのテーブルにダンプします-

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

クライアント側のHTMLファイル

ここで、クライアント側のHTMLファイルであるajax.htmlを作成します。これには、次のコードが含まれます。

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE −クエリで変数を渡す方法は、HTTP標準に準拠しており、formAを使用します。

URL?variable1 = value1;&variable2 = value2;

上記のコードは、以下のような画面を表示します-

入力が完了すると、このセクションに結果が表示されます。

NOTE −これはダミー画面です。

サーバー側のPHPファイル

クライアント側のスクリプトの準備ができました。次に、サーバー側のスクリプトを作成する必要があります。このスクリプトは、データベースから年齢、wpm、性別を取得して、クライアントに送り返します。次のコードをファイル「ajax-example.php」に入れます。

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

次に、Max Ageまたはその他のボックスに有効な値（120など）を入力して、[MySQLのクエリ]ボタンをクリックしてみてください。

入力が完了すると、このセクションに結果が表示されます。

このレッスンを無事に修了すると、MySQL、PHP、HTML、およびJavascriptを組み合わせて使用してAJAXアプリケーションを作成する方法を理解できます。

AJAXセキュリティ：サーバー側

AJAXベースのWebアプリケーションは、通常のWebアプリケーションと同じサーバー側のセキュリティスキームを使用します。
認証、承認、およびデータ保護の要件は、web.xmlファイル（宣言型）またはプログラム（プログラム型）で指定します。
AJAXベースのWebアプリケーションは、通常のWebアプリケーションと同じセキュリティの脅威にさらされています。

AJAXセキュリティ：クライアント側

JavaScriptコードは、ユーザー/ハッカーに表示されます。ハッカーはJavaScriptコードを使用して、サーバー側の弱点を推測できます。
JavaScriptコードはサーバーからダウンロードされ、クライアントで実行（ "eval"）され、意図しないコードによってクライアントを危険にさらす可能性があります。
ダウンロードされたJavaScriptコードは、サンドボックスセキュリティモデルによって制約され、署名されたJavaScriptに対して緩和できます。

AJAXは非常に急速に成長しており、それがAJAXに多くの問題が含まれている理由です。時間の経過とともに、それらが解決され、AJAXがWebアプリケーションに理想的になることを願っています。AJAXが現在苦しんでいるいくつかの問題をリストアップしています。

Complexity is increased