アヤックスの使い方は？ Ajaxの操作手順

Ajax の使用方法?この記事では、Ajax 操作を紹介し、Ajax 操作の手順を理解できるようにします。困っている友人は参考にしていただければ幸いです。

まず、Ajax の操作手順をまとめてから、各手順がどのように実行されるかを詳しく紹介します。

1. クライアント イベントを呼び出します

2. XMLHttpRequest オブジェクトを作成します

#3. XMLHttpRequest オブジェクトを構成します。

4. XMLHttpRequest オブジェクトは、Web サーバーに非同期リクエストを発行します。

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

6. XMLHttpRequest オブジェクトは callback() 関数を呼び出し、結果を処理します。

7. HTML DOM を更新します。

これらの手順を段階的に実行して、Ajax 操作を実装してみましょう。

クライアント イベントの呼び出し

JavaScript 関数は、イベントの結果として呼び出されます。

例:

<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId（）;”>

説明:

JavaScript 関数 validateUserId() は、イベント ハンドラーとして入力フォーム フィールドの onkeyup イベントにマップされ、その ID は次のように設定されます。 "ユーザーID"。

#XMLHttpRequest オブジェクトの作成#

var ajaxRequest;  // 使Ajax成为可能的变量！
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer浏览器
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            alert("Your browser broke!");
            return false;
         }
      }
   }}

#XMLHttpRequest オブジェクトの構成

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

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   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 サーバーへの非同期リクエストの実行

ソース コードは上記のコードにあります。太字で書かれたコードは、Web サーバーにリクエストを送信する役割を果たします。これはすべて XMLHttpRequest オブジェクト ajaxRequest を使用して行われます。

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest（）是回调函数。
   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 ドキュメントを含む結果を返します

サーバー側のスクリプトは任意の言語で実装できますが、そのロジックは次のようになります。 1. クライアントからリクエストを受け取ります。

2. クライアントからの入力を解析します。

3. 処理が必要です。

4. 出力をクライアントに送信します。

サーブレットを作成すると仮定すると、これはコードの一部です。

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 サーバーの戻り値に基づいて変数 message を true または false に設定します。

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

Update HTML DOM

これは最後のステップです。このステップでは、HTML ページが更新されます。これは次の方法で行われます: 1. JavaScript は DOM API を使用して、ページ内の要素への参照を取得します。

2. 参照する要素を取得するには、呼び出しを行うことをお勧めします。

document.getElementById("userIdMessage"),

3. JavaScript を使用して要素の属性を変更したり、要素のスタイル属性を変更したり、子要素を追加、削除、変更したりできるようになりました。

例を示します:

js コード:

   <!--
   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 (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

html コード:

<div id = "userIdMessage"><div>

上記の 7 つの手順を理解している場合は、 Ajax 操作はほぼ完了しました。ご自身で試してみて理解を深めてください。おすすめの関連ビデオ チュートリアル:

Ajax チュートリアル

、
JavaScript チュートリアル

!

以上がアヤックスの使い方は？ Ajaxの操作手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。