三步解决Ajax无刷新页的应用

最新推荐文章于 2025-08-21 21:29:08 发布

原创最新推荐文章于 2025-08-21 21:29:08 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #servlet #string #function #hashmap

做的练习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的在线词典应用开发过程，利用AJAX技术实现前后端交互，包括前端页面设计、后端Servlet开发及配置信息设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写到这里，我感到非常的惭愧，关于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>

<title>青鸟在线词典</title>

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>

</body>

</html>

第三步: 完成配置信息

<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>