<pre id="z8nfa"></pre>

<acronym id="z8nfa"><strong id="z8nfa"></strong></acronym><pre id="z8nfa"></pre>
<track id="z8nfa"></track>
  • <acronym id="z8nfa"><strong id="z8nfa"><listing id="z8nfa"></listing></strong></acronym>
  • 
    
    <p id="z8nfa"></p>
      鍍金池/ 教程/ HTML/ Ajax 實戰
      Ajax 技術
      Ajax 安全
      Ajax 示例
      Ajax 瀏覽器支持
      Ajax 實戰
      Ajax XMLHttpRequest
      什么是 Ajax?
      Ajax 數據庫操作
      Ajax 相關問題

      Ajax 實戰

      本章為你提供了一個清晰的 Ajax 操作的具體步驟。

      Ajax 操作步驟

      • 觸發一個客戶端事件。
      • 創建一個 XMLHttpRequest 對象。
      • 配置 XMLHttpRequest 對象。
      • 使用 XMLHttpRequest 對象創建一個到 Web 服務器的異步請求。
      • Web 服務器返回包含 XML 文檔的結果。
      • XMLHttpRequest 對象調用 callback() 函數處理結果。
      • 更新 HTML DOM。

      讓我們一個接一個理解這些步驟。

      觸發客戶端事件

      • JavaScript 函數作為事件結果被調用。
      • 比如:JavaScript 函數 validateUserId() 被映射為 id 為 "userid" 的表單輸入字段的 onkeyup 事件的事件處理程序。
      • <input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">。

      創建 XMLHttpRequest 對象

      var AjaxRequest;  // 緩存 XMLHttpRequest 對象
      function AjaxFunction(){
          try{
              // Opera 8.0+, Firefox, Safari
              AjaxRequest = new XMLHttpRequest();
          }catch (e){
      
              // IE 瀏覽器
              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 服務器的請求。這是使用 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);__
      }

      假設我們在 userid 輸入框中輸入 Zara,那么在上面的請求中,URL 會被設置為 "validate?id=Zara"。

      Web 服務器返回包含 XML 文檔的結果

      我們可以使用任意語言實現服務端腳本,但是它應該包含如下邏輯。

      • 從客戶端獲取請求。
      • 解析來自客戶端的輸入信息。
      • 做必要的處理。
      • 將輸出信息發送到客戶端。

      我們假設你要編寫一個 servlet 程序,下面是這段程序代碼。

      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("true");
          } else {
              response.setContentType("text/xml");
              response.setHeader("Cache-Control", "no-cache");
              response.getWriter().write("false");
          }
      }

      被調用的回調函數 processRequest()

      XMLHttpRequest 對象被配置為當 XMLHttpRequest 對象的 readyState 狀態發生變化時調用 processRequest() 函數。這個函數接受從服務端返回的結果然后做必要的處理。正如下面的示例所示,它基于從 Web 服務器返回的值將消息變量設置為 true 或 false。

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

      更新 HTML DOM

      這是最后一步,在這一步中我們的 HTML 頁面會被更新。它發生在以下方式中:

      • JavaScript 使用 DOM API 獲取頁面任意元素的引用。
      • 獲取一個元素引用推薦的方式就是調用
      document.getElementById("userIdMessage"), 
      // 這里 "userIdMessage" 就是 HTML 文檔中某個元素的 ID 屬性
      • 然后 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);
      
          // 如果 messageBody 元素已經創建了,則簡單的替換它,否則插入一個新的元素。 
          if (userMessageElement.childNodes[0]) {
              userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
          } 
          else
          {
              userMessageElement.appendChild(messageBody);
          }
      }
      -->
      </script>
      <body>
      <div id="userIdMessage"><div>
      </body>

      如果理解了上述 7 步,差不多就完成 Ajax 了。下一章中,我們會看到更詳細的 XMLHttpRequest 對象。

      上一篇:Ajax 安全下一篇:Ajax 技術
      无码丰满熟妇一区二区蜜臀Av
      <pre id="z8nfa"></pre>

      <acronym id="z8nfa"><strong id="z8nfa"></strong></acronym><pre id="z8nfa"></pre>
      <track id="z8nfa"></track>
    1. <acronym id="z8nfa"><strong id="z8nfa"><listing id="z8nfa"></listing></strong></acronym>
    2. 
      
      <p id="z8nfa"></p>