ajax问题 text输入框

maochanglu

哪个是复杂的工程。不仅仅是ajax的功能。

shang2010

哦，在gg，看起来很简单 东西，都很复杂，

dyllove98

提示你直接baidu一下吧，这方面的源代码都很多的

709900560

1. web.xml
   
2. <?xml version="1.0" encoding="UTF-8"?>
   
3. <web-app version="2.4"  
   
4.     xmlns="http://java.sun.com/xml/ns/j2ee"  
   
5.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
   
6.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee  
   
7.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
   
8.      
   
9.     <filter>
   
10.         <filter-name>response-filter</filter-name>
    
11.         <filter-class>book.filter.SetResponseFilter</filter-class>
    
12.     </filter>
    
13.     <filter-mapping>
    
14.         <filter-name>response-filter</filter-name>
    
15.         <url-pattern>/*</url-pattern>
    
16.     </filter-mapping>
    
17.      
    
18.     <servlet>
    
19.     <servlet-name>search</servlet-name>
    
20.     <servlet-class>book.suggest.SearchSuggest</servlet-class>
    
21.    </servlet>
    
22.    <servlet-mapping>
    
23.      <servlet-name>search</servlet-name>
    
24.      <url-pattern>/search</url-pattern>
    
25.    </servlet-mapping>
    
26. </web-app>

复制代码

1. SetResponseFilter.java
   
2. package book.filter;
   
3. import java.io.IOException;
   
4. import javax.servlet.Filter;
   
5. import javax.servlet.FilterChain;
   
6. import javax.servlet.FilterConfig;
   
7. import javax.servlet.ServletException;
   
8. import javax.servlet.ServletRequest;
   
9. import javax.servlet.ServletResponse;
   
10. public class SetResponseFilter implements Filter {
    
11.     public void init(FilterConfig arg0) throws ServletException {
    
12.     }
    
13.     public void doFilter(ServletRequest req, ServletResponse rep,
    
14.             FilterChain chain) throws IOException, ServletException {
    
15.          
    
16.         chain.doFilter(req, rep);
    
17.         rep.setContentType("text/html;charset=UTF-8");
    
18.     }
    
19.     public void destroy() {
    
20.     }
    
21. }

复制代码

1. SearchSuggest.java
   
2. package book.suggest;
   
3. import java.sql.Connection;
   
4. import java.sql.DriverManager;
   
5. import java.sql.ResultSet;
   
6. import java.sql.SQLException;
   
7. import java.sql.Statement;
   
8. import java.util.Vector;
   
9. import javax.servlet.ServletException;
   
10. import javax.servlet.http.HttpServlet;
    
11. import javax.servlet.http.HttpServletRequest;
    
12. import javax.servlet.http.HttpServletResponse;
    
13. public class SearchSuggest extends HttpServlet {
    
14.     private static final long serialVersionUID = 1L;
    
15.     public void doGet(HttpServletRequest request, HttpServletResponse response)
    
16.             throws ServletException, java.io.IOException {
    
17.          
    
18.         request.setCharacterEncoding("GBK");
    
19.                  
    
20.         String search = (String)request.getParameter("search");
    
21.          
    
22.         response.setContentType("text/html;charset=GBK");
    
23.         response.setHeader("Cache-Control", "no-cache");
    
24.          
    
25.         String sql = "select distinct(title) from suggest where title like '%%"+search+"%%' order by title";
    
26.         //String sql = "select distinct(title) from suggest";
    
27.         Connection conn = null;
    
28.         Statement stmt = null;
    
29.         ResultSet rs = null;
    
30.         Vector<String> vData = new Vector<String>();
    
31.          
    
32.         java.io.PrintWriter out = response.getWriter();
    
33.         try {
    
34.             
    
35.             //Class.forName("com.mysql.jdbc.Driver");
    
36.             /*Class.forName("org.gjt.mm.mysql.Driver");
    
37.          
    
38.             String url = "jdbc:mysql://localhost:3306/search";
    
39.             
    
40.             conn = DriverManager.getConnection(url, "root", "123456"); */
    
41.          
    
42.          Class.forName("org.gjt.mm.mysql.Driver").newInstance();
    
43.          String url="jdbc:mysql://localhost:3306/search?user=root&password=123456";
    
44.          
    
45.          conn= DriverManager.getConnection(url);
    
46.             stmt = conn.createStatement();
    
47.             
    
48.             rs = stmt.executeQuery(sql);
    
49.             
    
50.             while (rs.next())
    
51.             {
    
52.                 vData.add(rs.getString("TITLE"));
    
53.             }
    
54.             
    
55.             StringBuffer buf = new StringBuffer();
    
56.             for (int i=0;i<vData.size();i++)
    
57.             {
    
58.                 String keyword = (String)vData.get(i);
    
59.                 buf.append(keyword+"\n");
    
60.             }
    
61.             out.println(buf.toString());
    
62.         } catch (Exception e) {
    
63.             e.printStackTrace();
    
64.         } finally {
    
65.             try {
    
66.                  
    
67.                 if (stmt != null)
    
68.                     stmt.close();
    
69.                 if (conn != null)
    
70.                     conn.close();
    
71.             } catch (SQLException sqle) {
    
72.             }
    
73.         }
    
74.     }
    
75.     public void doPost(HttpServletRequest request, HttpServletResponse response)
    
76.             throws ServletException, java.io.IOException {
    
77.         doPost(request, response);
    
78.     }
    
79. }

复制代码

1. ajax_search.js
   
2. //Gets the browser specific XmlHttpRequest Object
   
3. function getXmlHttpRequestObject() {
   
4.     if (window.XMLHttpRequest) {
   
5.         return new XMLHttpRequest();
   
6.     } else if(window.ActiveXObject) {
   
7.         return new ActiveXObject("Microsoft.XMLHTTP");
   
8.     } else {
   
9.         alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
   
10.     }
    
11. }
    
12. function createAjaxObj(){
    
13.   var httprequest=false;
    
14.   if (window.XMLHttpRequest)
    
15.   {  
    
16.     httprequest=new XMLHttpRequest();
    
17.     if (httprequest.overrideMimeType)
    
18.       httprequest.overrideMimeType('text/xml');
    
19.    }
    
20.    else if (window.ActiveXObject)
    
21.    {  
    
22.      try {
    
23.        httprequest=new ActiveXObject("Msxml2.XMLHTTP");
    
24.      }
    
25.      catch (e){
    
26.        try{
    
27.           httprequest=new ActiveXObject("Microsoft.XMLHTTP");
    
28.        }
    
29.        catch (e){}
    
30.      }
    
31.    }
    
32.    return httprequest;
    
33. }
    
34. var searchReq = createAjaxObj();
    
35. 
    
36. function searchSuggest() {
    
37.     if (searchReq.readyState == 4 || searchReq.readyState == 0) {
    
38.         var str = escape(document.getElementById('txtSearch').value);
    
39.         searchReq.open("GET", 'search?search=' + str, true);
    
40.         searchReq.onreadystatechange = handleSearchSuggest;  
    
41.         searchReq.send(null);
    
42.     }        
    
43. }
    
44. 
    
45. function handleSearchSuggest() {
    
46.     if (searchReq.readyState == 4) {
    
47.         var ss = document.getElementById('search_suggest');
    
48.         ss.innerHTML = '';
    
49.         var str = searchReq.responseText.split("\n");
    
50.         for(i=0; i < str.length - 1; i++) {
    
51.             //Build our element string.  This is cleaner using the DOM, but
    
52.             //IE doesn't support dynamically added attributes.
    
53.             var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
    
54.             suggest += 'onmouseout="javascript:suggestOut(this);" ';
    
55.             suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
    
56.             suggest += 'class="suggest_link">' + str[i] + '</div>';
    
57.             ss.innerHTML += suggest;
    
58.         }
    
59.     }
    
60. }
    
61. //Mouse over function
    
62. function suggestOver(div_value) {
    
63.     div_value.className = 'suggest_link_over';
    
64. }
    
65. //Mouse out function
    
66. function suggestOut(div_value) {
    
67.     div_value.className = 'suggest_link';
    
68. }
    
69. //Click function
    
70. function setSearch(value) {
    
71.     document.getElementById('txtSearch').value = value;
    
72.     document.getElementById('search_suggest').innerHTML = '';
    
73.   }

复制代码

1. suggest.html
   
2. <html>
   
3.     <head>
   
4.         <style type="text/css" media="screen">
   
5.             body {
   
6.                 font: 11px arial;
   
7.             }
   
8.             .suggest_link {
   
9.                 background-color: #FFFFFF;
   
10.                 padding: 2px 6px 2px 6px;
    
11.             }
    
12.             .suggest_link_over {
    
13.                 background-color: #E8F2FE;
    
14.                 padding: 2px 6px 2px 6px;
    
15.             }
    
16.             #search_suggest {
    
17.                 position: absolute;  
    
18.                 background-color: #FFFFFF;  
    
19.                 text-align: left;  
    
20.                 border: 1px solid #000000;           
    
21.             }        
    
22.         </style>
    
23.         <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    
24.     </head>
    
25.     <body>
    
26.         <h3>test ajax</h3>
    
27.         <div style="width: 500px;">
    
28.             <form id="frmSearch" action="">
    
29.                 <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />
    
30.                 <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
    
31.                 <div id="search_suggest">
    
32.                 </div>
    
33.             </form>
    
34.         </div>
    
35.     </body>
    
36. </html>

复制代码