寫到這裏，我感到非常的慚愧，關於AJAX的原理我一點沒有搞懂，只會把代碼寫上，把效果做出來。
我也常常問自己，計算機的世界這麼大，以我現在的情況，是隻要做出來就行，還是把一些技術要搞明白呢？
我並沒有得到回答。
題目：
輸入一個英文單詞，點“詞典搜索”按鈕，輸出對應的中文解釋；
如果沒有對應的中文解釋，提示“不存在該詞條的解釋”；
如果用戶沒有輸入英文單詞就點“詞典搜索”按鈕，提示“詞條不能爲空”。
第一步:完成servlet的後臺開發 (自定義修改的地方,我們根據實現情況修改)
package com;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class DictSearchServlet extends HttpServlet {
private static final long serialVersionUID = 606930490763501138L;
private Map dictMap = new HashMap();
public void init(){
dictMap.put("beida jade bird","北大青鳥");
dictMap.put("accp","阿博泰克認證的計算機專家");
dictMap.put("ajax","一種創建交互式網頁的技術");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//獲得並處理表單數據 (自定義修改)
String key = request.getParameter("key");
if (null!=key){
key = key.toLowerCase();
}
String result = (String)dictMap.get(key);
response.setCharacterEncoding("GBK");
response.setContentType("");
//實現的關鍵
PrintWriter out = response.getWriter();
// 沒有查到結果
if (null==result){
out.print("不存在該詞條的解釋");
}else{
out.print(result);
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
第二步 :前臺的開發
<%@ page language="java" pageEncoding="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>青鳥在線詞典</title>
<script>
function createXmlHttpRequest(){
if(window.ActiveXObject){//如果是IE瀏覽器
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非IE瀏覽器
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
function doSearch(){
//獲得表單中的顯示信息的層 (可以自行定義)
var oResult = document.getElementById("divResult");
oResult.innerText = "搜索中...";
var oKey = document.getElementById("key");
var key = oKey.value;
if (!key){
oResult.innerText = "詞條不能爲空";
oKey.focus();
return ;
}
// 請求字符串 ( s爲對應映射文件的映射名 編寫代碼時候 可以自行定義)
var url = "s?key="+key;
// 1. 創建XMLHttpRequest組件
xmlHttpRequest = createXmlHttpRequest();
// 2. 設置回調函數 (haoLeJiaoWo 下面方法的方法名 自行定義)
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;
// 3. 初始化XMLHttpRequest組件
xmlHttpRequest.open("GET",url,true);
// 4. 發送請求
xmlHttpRequest.send(null);
}
function haoLeJiaoWo(){
if( xmlHttpRequest.readyState == 4
&&xmlHttpRequest.status == 200){
var result = xmlHttpRequest.responseText; //result爲servlet返回的結果
var oResult = document.getElementById("divResult");
oResult.innerText = result;
}
}
</script>
</head>
<body>
<input id="key" />
<button onclick="javascript:doSearch();">詞典搜索</button>
<div id="divResult"></div>
</body>
</html>
第三步: 完成配置信息
<servlet>
<description>dict servlet</description>
<display-name>dict servlet</display-name>
<servlet-name>DictSearchServlet</servlet-name>
<servlet-class>com.aptech.jb.dict.DictSearchServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DictSearchServlet</servlet-name>
<url-pattern>/s</url-pattern>
</servlet-mapping>