<wbr id="jl7f7"></wbr>

        <i id="jl7f7"></i>
          <acronym id="jl7f7"></acronym>

          <s id="jl7f7"></s>

          <ins id="jl7f7"></ins><button id="jl7f7"><strong id="jl7f7"></strong></button>
          鍍金池/ 教程/ HTML/ Ajax 實(shí)戰
          Ajax 技術(shù)
          Ajax 安全
          Ajax 示例
          Ajax 瀏覽器支持
          Ajax 實(shí)戰
          Ajax XMLHttpRequest
          什么是 Ajax?
          Ajax 數據庫操作
          Ajax 相關(guān)問(wèn)題

          Ajax 實(shí)戰

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

          Ajax 操作步驟

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

          讓我們一個(gè)接一個(gè)理解這些步驟。

          觸發(fā)客戶(hù)端事件

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

          創(chuàng )建 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 對象

          在這個(gè)步驟中,我們將會(huì )編寫(xiě)一個(gè)將由客戶(hù)端事件觸發(fā)的函數,然后注冊一個(gè) 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);
          }

          發(fā)起到服務(wù)器的異步請求

          上面的代碼是有效的。加粗的代碼負責發(fā)起一個(gè)到 Web 服務(wù)器的請求。這是使用 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 會(huì )被設置為 "validate?id=Zara"。

          Web 服務(wù)器返回包含 XML 文檔的結果

          我們可以使用任意語(yǔ)言實(shí)現服務(wù)端腳本,但是它應該包含如下邏輯。

          • 從客戶(hù)端獲取請求。
          • 解析來(lái)自客戶(hù)端的輸入信息。
          • 做必要的處理。
          • 將輸出信息發(fā)送到客戶(hù)端。

          我們假設你要編寫(xiě)一個(gè) 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 狀態(tài)發(fā)生變化時(shí)調用 processRequest() 函數。這個(gè)函數接受從服務(wù)端返回的結果然后做必要的處理。正如下面的示例所示,它基于從 Web 服務(wù)器返回的值將消息變量設置為 true 或 false。

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

          更新 HTML DOM

          這是最后一步,在這一步中我們的 HTML 頁(yè)面會(huì )被更新。它發(fā)生在以下方式中:

          • JavaScript 使用 DOM API 獲取頁(yè)面任意元素的引用。
          • 獲取一個(gè)元素引用推薦的方式就是調用
          document.getElementById("userIdMessage"), 
          // 這里 "userIdMessage" 就是 HTML 文檔中某個(gè)元素的 ID 屬性
          • 然后 JavaScript 可以用來(lái)修改元素的屬性;修改元素的樣式屬性,或者添加,移除或修改元素的子元素。這里有一個(gè)例子:
          <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 元素已經(jīng)創(chuàng  )建了,則簡(jiǎn)單的替換它,否則插入一個(gè)新的元素。 
              if (userMessageElement.childNodes[0]) {
                  userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
              } 
              else
              {
                  userMessageElement.appendChild(messageBody);
              }
          }
          -->
          </script>
          <body>
          <div id="userIdMessage"><div>
          </body>

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

          上一篇:Ajax 安全下一篇:Ajax 技術(shù)
          日韩性做爰免费a片aa片,天天躁恨恨躁夜躁2020,精品久久综合1区2区3区激情,精产国品一二三产品麻豆

          <wbr id="jl7f7"></wbr>

                <i id="jl7f7"></i>
                  <acronym id="jl7f7"></acronym>

                  <s id="jl7f7"></s>

                  <ins id="jl7f7"></ins><button id="jl7f7"><strong id="jl7f7"></strong></button>