久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

Ajax- 提供自動(dòng)完成

來自站長百科
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索

導(dǎo)航: 上一頁 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

我們遇到的最受歡迎的功能之一就是自動(dòng)完成。許多人都使用過Intuit的Quicken之類的工具，并對其注冊表的功能很是著迷，它的注冊表能根據(jù)以前的注冊項(xiàng)填入信息。這就使得數(shù)據(jù)輸入更快、更容易，而且不容易出錯(cuò)。對于胖客戶應(yīng)用，增加這個(gè)功能可能很容易，但是Web應(yīng)用長期以來一直都沒有這個(gè)特性[1]。不過，Google在其beta實(shí)驗(yàn)區(qū)推出Google Suggest后，證明了自動(dòng)完成對于Web應(yīng)用并非遙不可及。

Google Suggest實(shí)在讓人贊嘆不已（見圖4-16）。它不僅很好地放置了下拉區(qū)，還會在輸入框中自動(dòng)插入最有可能的答案，并將非用戶鍵入的部分置灰，在下拉區(qū)中甚至還能使用向上和向下箭頭。由于為給定項(xiàng)提供了一些結(jié)果，用戶就能更清楚地認(rèn)識到具體完成搜索時(shí)可能會得到的結(jié)果。

許多網(wǎng)站都對Google Suggest做了剖析（可以在google上查Google Suggest?。?。代碼清單4-17所示的例子比不上Google Suggest那么豐富，但你確實(shí)能從中了解到利用Ajax可以做些什么。需要注意，在這個(gè)例子中，callback()函數(shù)除了查找一般的返回碼200，還會查找返回碼204。204響應(yīng)碼指示服務(wù)器沒有發(fā)回任何信息，利用個(gè)提示可以清空名字下拉區(qū)。你還會注意到，通過點(diǎn)記法為單元格設(shè)置鼠標(biāo)事件，這一點(diǎn)在前面的“為什么不能用setAttribute方法來設(shè)置Delete按鈕的事件處理程序？”旁注中已經(jīng)解釋過。重申一次，使用calculateOffset()方法來確定應(yīng)該把數(shù)據(jù)放在哪個(gè)位置。

Image016.jpg 圖4-16 Ajax為Google Suggest增色不少

代碼清單4-17 

autoComplete.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

   <title>Ajax Auto Complete</title>

   <style type="text/css">

   .mouseOut {

   background: #708090;

   color: #FFFAFA;

   }

   .mouseOver {

   background: #FFFAFA;

   color: #000000;

   }

   </style>v
   <script type="text/javascript">

       var xmlHttp;

       var completeDiv;

       var inputField;

       var nameTable;

       var nameTableBody;

       function createXMLHttpRequest() {

           if (window.ActiveXObject) {

               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

           }

           else if (window.XMLHttpRequest) {

               xmlHttp = new XMLHttpRequest();

           }

       }

       function initVars() {

           inputField = document.getElementById("names");

           nameTable = document.getElementById("name_table");

           completeDiv = document.getElementById("popup");

           nameTableBody = document.getElementById("name_table_body");

       }

       function findNames() {

           initVars();

           if (inputField.value.length > 0) {

               createXMLHttpRequest();

               var url = "AutoCompleteServlet?names=" + escape(inputField.value);

               xmlHttp.open("GET", url, true);

               xmlHttp.onreadystatechange = callback;

               xmlHttp.send(null);

           } else {

               clearNames();

           }

       }

       function callback() {

           if (xmlHttp.readyState == 4) {

               if (xmlHttp.status == 200) {

                   var name =

                            xmlHttp.responseXML

                         .getElementsByTagName("name")[0].firstChild.data;

                   setNames(xmlHttp.responseXML.getElementsByTagName("name"));

               } else if (xmlHttp.status == 204){

                   clearNames();

               }

           }

       }

       function setNames(the_names) {

           clearNames();

           var size = the_names.length;

           setOffsets();

           var row, cell, txtNode;

           for (var i = 0; i < size; i++) {

               var nextNode = the_names[i].firstChild.data;

               row = document.createElement("tr");

               cell = document.createElement("td");

              cell.onmouseout = function() {this.className='mouseOver';};

               cell.onmouseover = function() {this.className='mouseOut';};

               cell.setAttribute("bgcolor", "#FFFAFA");

               cell.setAttribute("border", "0");

               cell.onclick = function() { populateName(this); } ;

               txtNode = document.createTextNode(nextNode);

               cell.appendChild(txtNode);

               row.appendChild(cell);

               nameTableBody.appendChild(row);

           }

       }

       function setOffsets() {

           var end = inputField.offsetWidth;

           var left = calculateOffsetLeft(inputField);

           var top = calculateOffsetTop(inputField) + inputField.offsetHeight;

           completeDiv.style.border = "black 1px solid";

           completeDiv.style.left = left + "px";

           completeDiv.style.top = top + "px";

           nameTable.style.width = end + "px";

       }

       function calculateOffsetLeft(field) {

         return calculateOffset(field, "offsetLeft");

       }

       function calculateOffsetTop(field) {

         return calculateOffset(field, "offsetTop");

       }

       function calculateOffset(field, attr) {

         var offset = 0;

         while(field) {

           offset += field[attr];

           field = field.offsetParent;

         }

         return offset;

       }

       function populateName(cell) {

           inputField.value = cell.firstChild.nodeValue;

           clearNames();

       }

       function clearNames() {

           var ind = nameTableBody.childNodes.length;

           for (var i = ind - 1; i >= 0 ; i--) {

                nameTableBody.removeChild(nameTableBody.childNodes[i]);

           }

           completeDiv.style.border = "none";

       }

   </script>

 </head>

 <body>

    <h1>Ajax Auto Complete Example</h1>

   Names: <input type="text" size="20" id="names"

                                 onkeyup="findNames();" style="height:20;"/>

       <div style="position:absolute;" id="popup">

           <table id="name_table" bgcolor="#FFFAFA" border="0"

                                           cellspacing="0" cellpadding="0"/>

           <tbody id="name_table_body"></tbody>

       </table>

   </div>

 </body>

</html>

服務(wù)器端代碼模擬了命名服務(wù)的動(dòng)態(tài)名字搜索功能。servlet中設(shè)置了一組名字，搜索委托給包含有查找邏輯的另一個(gè)類。注意，如果沒有找到任何數(shù)據(jù)，要向客戶返回響應(yīng)，指示沒有內(nèi)容。代碼清單4-18顯示了AutoCompleteServlet.java，代碼清單4-19是NameSer- vice.java。

代碼清單4-18 

AutoCompleteServlet.java

package ajaxbook.chap4;

import java.io.*;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.List;

import javax.servlet.*;

import javax.servlet.http.*;

public class AutoCompleteServlet extends HttpServlet {

   private List names = new ArrayList();

   public void init(ServletConfig config) throws ServletException {

       names.add("Abe");

       names.add("Abel");

       names.add("Abigail");

       names.add("Abner");

       names.add("Abraham");

       names.add("Marcus");

       names.add("Marcy");

       names.add("Marge");

       names.add("Marie");

   }

protected void doGet(HttpServletRequest request, HttpServletResponse response)

   throws ServletException, IOException {

       String prefix = request.getParameter("names");

       NameService service = NameService.getInstance(names);

       List matching = service.findNames(prefix);

       if (matching.size() > 0) {

           PrintWriter out = response.getWriter();

           response.setContentType("text/xml");

           response.setHeader("Cache-Control", "no-cache");

           out.println("<response>");

           Iterator iter = matching.iterator();

           while(iter.hasNext()) {

               String name = (String) iter.next();

               out.println("<name>" + name + "</name>");v
           }

           out.println("</response>");

           matching = null;

           service = null;

           out.close();

       } else {

           response.setStatus(HttpServletResponse.SC_NO_CONTENT);

       }

   }

}

代碼清單4-19 

NameService.java

package ajaxbook.chap4;

import java.util.ArrayList;

import java.util.Iterator;

import java.util.List;

public class NameService {

   private List names;

   /** Creates a new instance of NameService */

   private NameService(List list_of_names) {

       this.names = list_of_names;

   }

   public static NameService getInstance(List list_of_names) {

       return new NameService(list_of_names);

   }

   public List findNames(String prefix) {

       String prefix_upper = prefix.toUpperCase();

       List matches = new ArrayList();

       Iterator iter = names.iterator();

       while(iter.hasNext()) {

           String name = (String) iter.next();

           String name_upper_case = name.toUpperCase();

           if(name_upper_case.startsWith(prefix_upper)){

              boolean result = matches.add(name);

           }

       }

       return matches;

   }

}

圖4-17顯示了實(shí)際運(yùn)行的自動(dòng)完成示例。
Image017.jpg