使用AJAX开发简单在线小词典

开发环境以及资源:eclipse+tomcat6.0+JDK5+dom4j+xml

首先将写好的简单词典文件words-xml,放入已经建好工程的web-inf目录下

words.xml内容为:

<?xml version="1.0" encoding="GBK"?>
<words>
 <word>
  <en>hello</en>
  <cn>你好</cn>
 </word>
 <word>
  <en>test</en>
  <cn>n. 测试,试验</cn>
  <cn>v. 测试,试验,接受测验</cn>
 </word>
</words>

在webroot目录下新建一个查询词典的html页面:searchwords.html

<script type="text/javascript">
 var xmlHttp;
 var searchWord="";
   function createXMLHttpRequest(){
    if(window.ActiveXObject){
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
     xmlHttp = new XMLHttpRequest();
    }
   }
   function doSearch(){
    createXMLHttpRequest();
    searchWord = document.getElementById("userword").value;  
    
    xmlHttp.open("GET","/WordsXML/parsewords?word="+searchWord,true);
    xmlHttp.onreadystatechange = ResultCheck;
    xmlHttp.send(null);  
   }
   function ResultCheck(){
      // alert(xmlHttp.status);
    if(xmlHttp.readyState ==4){
     if(xmlHttp.status ==200){
     
      document.getElementById("searchResult").innerHTML= xmlHttp.responseText;
     }
    }  
   }
 </script> 
  Input Word:
  <input type="text" id="userword" size=30>
  <input type="button" value="Search" οnclick="doSearch()">
  <hr>
  <div id="searchResult">
  </div>

然后在src目录下写一个servlet:名称为ParseWordsServlet.java

(省略导入的包.)

public class ParseWordsServlet extends HttpServlet {
 @Override
 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  String word = request.getParameter("word");
  Document doc = null;
  SAXReader read = new SAXReader();
  try {
   String url = getServletContext().getRealPath("/")+"WEB-INF//words.xml";
   System.out.print(url);
   doc = read.read(url);
  } catch (DocumentException e) {
   e.printStackTrace();
  }
  String output = "";
  Element root = doc.getRootElement();
  for (Iterator iter = root.elementIterator("word"); iter.hasNext();) {
   Element e = (Element) iter.next();
   String eValue = e.element("en").getText();
   if (eValue.equals(word)) {
    for (Iterator iter2 = e.elementIterator("cn"); iter2.hasNext();) {
     Element cnE = (Element) iter2.next();
     output += cnE.getText() + "<br>";

    }

   }

  }
  if(output.equals("")){
   output="not find it!!";
  }
  response.setContentType("text/xml");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  out.print(output);
  out.close();
 }
}

配置web-inf目录下的web.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <servlet>
  <servlet-name>ParseWords</servlet-name>
  <servlet-class>
   com.runwit.words.ParseWordsServlet
  </servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>ParseWords</servlet-name>
  <url-pattern>/parsewords</url-pattern>
 </servlet-mapping>
</web-app>

启动tomcat6.0,打开目标网页,测试.