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オブジェクトについて詳しく説明します。