JavaWeb实验 AJAX技术基本应用

实验目的

认识Ajax的作用；
能在JSP中应用Ajax与Servlet进行交互。

实验内容

创建一个Java Web应用，综合利用JSP、Ajax和Servlet技术实现中英文互译功能：

在输入框输入英文单词时，在后面即时显示翻译为中文的结果；
在输入框输入中文词汇时，在后面即时显示翻译为英文的结果。

界面如图（可以适当改进，添加其他功能）：

Ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小黄翻译</title>
</head>
<script type = "text/javascript">function adjaxReq(){var word = document.getElementById("word");var wordx = word.value;var req = new XMLHttpRequest();req.open("GET","./translate.html?wordx="+wordx,true);req.send();req.onreadystatechange = function(){if (req.status == 200 && req.readyState == 4){console.log(req.responseText);var divx = document.getElementById("showtips");divx.innerHTML = req.responseText;}};} 
</script>
<body><input id = word onkeyup = "adjaxReq()"/><br><br>翻译：<div id = showtips></div>
</body>
</html>

Trans.java
package gdpu.com;import java.sql.*;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class Trans*/
@WebServlet("/Trans")
public class Trans extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");String codex = request.getParameter("wordx");try {Class.forName("com.mysql.jdbc.Driver"); // 驱动程序名String url = "jdbc:mysql://localhost:3306/实验"; // 数据库名String username = "root"; // 数据库用户名String password = "0403"; // 数据库用户密码Connection conn = DriverManager.getConnection(url, username, password); // 连接状态if (conn != null) {Statement stmt = null;ResultSet rs = null;stmt = conn.createStatement();String sql = "SELECT * FROM translate where English ='" + codex + "' or Chinese='" + codex + "'";// 查询语句rs = stmt.executeQuery(sql);System.out.print(sql);while (rs.next()) {response.getWriter().print(rs.getString(1) + ";" + rs.getString(2));conn.close();return;}response.getWriter().print("未查到该单词翻译。");} else {System.out.print("连接失败！");}} catch (Exception e) {e.printStackTrace();}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}