请教一下csdn"输入问题，问题答案立即呈现在您眼前"？

用ajax技术，把你输入的信息动态的传到后台，然后在后台进行相关问题的搜索，把得到的结果集传递过来，动态的输出。我想应该是这样的，抢个沙发坐。。呵呵

google搜索是最简单的一中ajax的实现方式，它的重点在于无刷新操作，你操作的同时后台在处理相应的数据并很快显示在前台区域，也就是你在输入信息的时候，你所键入的数据将会利用文本框onchang事件将文本框数据提交后台后台处理完成显示在前台，达到同步的感觉。

类似于 Google 的 pre search，其实很简单，在文本框的事件里面，调用后台查询，然后生成一个 div，显示在文本框下面。也就是 ajax

谢谢大家啦吧基本了解了前台的实现
还有一个问题是：后台是怎么实现的呢？
因为刚学web方面的东西，很多都不懂，请大家指点一下

me的邮箱是：[email protected]
谢谢了希望你能在百忙之中抽点时间把你的例子发给我研究一下

我主要想了解：把信息传到后台后，后台怎么对问题进行搜索的？是不是要定义一些规则库来做啊？注：九月分开学的时候，刚开始自学java，jsp等所以问题比较多 O(∩_∩)O

我的嫖客..
http://hi.baidu.com/1d7500/blog/item/f7e59c030e5f7181d43f7c58.htmlindex.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GBK"
contentType="text/html; charset=GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <base href="<%=basePath%>">   <title>My JSP 'index.jsp' starting page</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   <style>
a {
display: block;
color: #7F9DB9;
text-decoration: none;
font-size: 12px;
}a:hover {
font-size: 12px;
color: #33AECC;
}
</style>
   <script type="text/javascript">
    function onTextChanage(keyObject){
     var keyValue = keyObject.value;
     var thisDiv = document.getElementById("detail");

     if(keyValue != null && keyValue != top.oldValue){
      top.oldValue = keyValue;
      keyValue = keyValue.replace(/(^\s*)/g,"");
      if(keyValue != ""){
       getResponseMeanToDiv(thisDiv,keyValue);
      }else{
       thisDiv.innerHTML = "";
       thisDiv.style.display = "none";
      }
     }
    }
   </script>
   <script type="text/javascript">
    if (window.ActiveXObject && !window.XMLHttpRequest) {
         window.XMLHttpRequest=function() {
           return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
        };
      }//取得XMLHttpRequest对象

      //将数据提交到后台并返回个HTML串
      function getResponseMeanToDiv(thisDiv,keyValue){
       var request = new XMLHttpRequest();
       if(request){
        request.onreadystatechange=function(){
        if(request.readyState == 4 && request.status == 200){
           if(request.responseText != null && request.responseText != ""){
            thisDiv.innerHTML = request.responseText;
            thisDiv.style.display = "block";
           }
         }
        }
       }
       request.open("POST", "getMean?keyValue="+ keyValue + "&randomNumber="+ 10 * Math.random(), true);
            request.setRequestHeader("text/html; charset=GBK", "application/x-www-form-urlencoded");
           request.send("&timeStamp=" + new Date().getTime());
//     request.open('GET',"getMean?keyValue="+ keyValue + "&randomNumber="+ 10 * Math.random());
//     request.send(null);//发送参数如果有参数req.send("username="+user_name);用request取得
      }
   </script>
</head><body>
   <input type="text" name="keyValue" onkeyup="onTextChanage(this)"    style="width: 250px; height: 22px; font-size: 10pt; border-top: 1px solid #7F9DB9; border-right: 0px; border-bottom: 1px solid #7F9DB9; border-left: 1px solid #7F9DB9; border-right: 1px solid #7F9DB9;">
   <br>
   <div id="detail"
    style="width: 250px; border-bottom: 1px solid #7F9DB9; border-left: 1px solid #7F9DB9; border-right: 1px solid #7F9DB9; display: none;">   </div>
</body>
</html>

GetMeanAjax .java
GetMeanAjax .javapackage servlet;import java.io.IOException;
import java.io.PrintWriter;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import util.Utils;public class GetMeanAjax extends HttpServlet {/**
* Constructor of the object.
*/
public GetMeanAjax() {
   super();
}/**
* Destruction of the servlet. <br>
*/
public void destroy() {
   super.destroy(); // Just puts "destroy" string in log
   // Put your code here
}/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request
*          the request send by the client to the server
* @param response
*          the response send by the server to the client
* @throws ServletException
*           if an error occurred
* @throws IOException
*           if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   response.setContentType("text/xml;charset=GBK");
   PrintWriter out = response.getWriter();
   String keyValue = request.getParameter("keyValue");
   String html = null;
   if (keyValue == null || keyValue.trim().equals("")) {
    html = "";
   } else {
    html = Utils.listToAJAXString(Utils.getTestList(keyValue));
   }
   try {
    out.println(html);
   } finally {
    out.flush();
    out.close();
   }
}/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request
*          the request send by the client to the server
* @param response
*          the response send by the server to the client
* @throws ServletException
*           if an error occurred
* @throws IOException
*           if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   doGet(request, response);
}public void init() throws ServletException {
   // Put your code here
}}

Utils
package util;import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Random;/**
* @author Lv9
* @since 2009-8-8
*/
public class Utils {
/**
* 该方法是将LIST转换成HTML的代码可以改
*
* @param list
*          需要转换的List
* @return String 转换好的HTML代码
*/
public static String listToAJAXString(List<String> list) {   // 如果List为空则返回无内容的字符串
   if (list == null || list.isEmpty()) {
    return "";
   } else {
    StringBuffer html = new StringBuffer("");
    // 每条List都生成一条HTML
    for (Iterator<String> it = list.iterator(); it.hasNext();) {
     html.append(span.replaceAll(span_detail, it.next())); // 将span模板里的关键字替换成现有内容
    }
    return html.toString();
   }
}/**
* 获得List方法测试专用方法内容:根据传进来的关键字生成一个随机长度List
*
* @param keyValue
*          关键字
* @return List<String> 随机长度的List
*/
public static List<String> getTestList(String keyValue) {
   List<String> list = new ArrayList<String>();
   Random random = new Random();
   int y = 0;
   while (y < 1) {
    y = random.nextInt(20);// 长度在20之间大于0
   }
   for (int i = 0; i < y; i++) {
    list.add(keyValue + i);
   }
   return list;
}/** 生成的模板 */
public final static String span = "<span style=\"font-size: 12px;text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;width:248px;\"><a href=\"javascript:void(0);\" onclick = \"document.getElementById('keyValue').value = this.innerHTML;document.getElementById('detail').style.display = 'none';\"> #detail#</a> </span> ";/** 模板里的属性 */
public final static String span_detail = "#detail#";
}

就是ajax 其他的就是 CSS 的问题了
先搜索ajax

另外补充下目前我写这个只支持String类型的List 这个LZ可以自己改造一下调试不通告诉我

调试易

请教一下csdn"输入问题，问题答案立即呈现在您眼前"？

解决方案 »