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

最新推荐文章于 2024-10-07 21:00:41 发布
最新推荐文章于 2024-10-07 21:00:41 发布
阅读量159 收藏
点赞数
分类专栏： 做的练习 文章标签： ajax xmlhttprequest servlet string function hashmap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygswine/article/details/4344835
版权

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

 

 

 

ygswine
关注
专栏目录
java ajax 定时刷新当前页面_Ajax实现页面自动刷新实例解析
weixin_31635881的博客
03-04 683
AJAX 是一种用于创建快速动态网页的技术。接下来通过本文给大家介绍Ajax实现页面自动刷新实例解析，感兴趣的朋友一起看看吧Ajax简介：AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动...
.net ajax防页面刷新,ASP.NET之使用Ajax实现页面异步刷新（无需刷新整个页面）
weixin_29359765的博客
08-05 765
目前在使用ASP.NET技术做毕业设计，但是关于网页中的各种配置我到现在还不是很清楚，正在努力进化...一般情况下，新建网页页面的话，应该为.aspx后缀的文件，建好之后对应一个同名的.cs文件，属于后端文件。在这种情况下aspx页面负责显示网页的前端，cs文件负责网页的逻辑处理(及后台)，然而，在页面中嵌入javascript也是可以处理相关逻辑的。所以，当遇到一种情况：不需要前端页面，只有后台...
ajax无刷新更改文章,ajax 页面无刷新更改数据库中的内容
weixin_36179103的博客
08-06 207
用户名的年龄：年龄的显示方法如下："style="background:red"onclick="changeToInput(this.id)"value="">changeToInput(this.id)方法如下：varreq;vargID;functionchangeToInput(id){varoNP=document.getElementById...
java英语单词查询，输入一个单词根据字典查询单词意思
PanrasD的博客
01-30 7251
输入一个单词，可以查询单词意思，使用了字典 算法思想：字典文件读取后按单词长度进行了分组，单词查询时也是按照单词长度 选择对应的单词组进行查询，查询效率高 使用单词库：https://wenku.baidu.com/view/503b1318b14e852459fb57b0.html，转换成txt进行读取 读取文件输出遇到的错误总结： 1.读txt文件第一行会乱码； 方案：将txt转换
ajax无刷新页面切换,历史记录后退前进解决方案-转载
Anony_z的博客
04-18 362
ajax无刷新页面切换,历史记录后退前进解决方案 问题描述 我们在工作中常常遇到需要用ajax来显示下一页和上一页，ajax可以不刷新页面进行操作！但是，假如你想通过浏览器的历史记录返回上一页和下一页。那么ajax默认是做不到的！一般需求要历史返回的时候，我们通常不使用ajax。但是呢，假如一个页面中，只有一个地方是需要动态的上一页下一页，其他地方都是固定的，那么这种情况除了使用模板之外，我们...
AJAX，无需刷新获取数据
SnowTT_的博客
05-02 1290
在学AJAX、nodejs、es6这些知识都会互相嵌套，如果想要速成的话我觉得应该先把一个东西学好，嵌套的先记下笔记，然后再学下一个，再把嵌套的记下，以此类推。当你学完所有的东西，综合来看嵌套的内容，就会更好理解。
ajax无刷新交互数据
qq_45938466的博客
12-30 679
Ajax基础
ajax自动局部刷新,jQuery如何实现AJAX定时刷新局部页面
weixin_36342477的博客
08-05 1804
jQuery如何实现AJAX定时刷新局部页面发布时间：2021-06-25 09:47:48来源：亿速云阅读：75作者：小新这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。方法一：局部刷新我们讲述到最多的是ajax 了，当然也可以不使用ajax来刷新页面了，我们可以使用jq...
Ajax ——无刷新页面加载页面
ZFZ5720
09-21 4546
Ajax 是一种无需重新加载网页就能更新部分页面数据的技术 Ajax的全称是AsynchronousJavaScript and XML,即异步JavaScript+XML。 Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取
ajax实现无刷新提交,【jQuery】将form表单通过ajax实现无刷新提交
weixin_42402664的博客
08-06 534
//将form转换为AJAX提交function ajaxSubmit(url,frm,fn){var dataPara=getFormJson(frm);$.ajax({url:url,type:"post",data:dataPara,async:false,dataType:'txt',success:fn});}//将form中的值转换为键值对function getFormJson(fr...
Java Ajax 无刷新分页实例（完整版）
05-10
本实例提供了完整的Java AJAX无刷新分页解决方案，允许用户在不重新加载整个页面的情况下浏览多页数据，提高网页交互的效率。下面我们将详细探讨这个实例中的关键知识点。 1. **AJAX基础**：AJAX是一种在后台与...
Ajax提交Form表单页面仍会刷新问题的快速解决办法
10-20
在开发Web应用时，我们经常使用Ajax技术来实现页面的无刷新交互，提高用户体验。然而，在实际操作中，我们可能会遇到Ajax提交Form表单时页面仍然刷新的问题。本文将深入探讨这个问题及其解决方案。 首先，我们要...
Ajax 无刷新在注册用户名时的应用的代码
10-30
### Ajax无刷新技术在注册用户名验证中的应用 #### 一、引言 随着Web开发技术的不断进步，用户对网站的交互性和响应速度有了更高的要求。传统的网页在进行表单提交时，通常需要整个页面重新加载，这不仅降低了用户...
Ajax提交表单页面刷新很快的解决方法
10-20
本文将详细介绍如何解决Ajax提交表单导致页面快速刷新的问题，并提供相关代码示例。 首先，问题可能源于表单的提交按钮类型设置。在HTML表单中，`<input type="submit">`按钮在点击后默认会触发表单的submit事件，...
Ajax留言板页面无刷新.zip
08-20
**Ajax留言板页面无刷新技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现了网页的异步更新，大大...
Ajax教程
最新发布
Jsjendndn的博客
10-07 263
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。先解释XML：XML指的是可扩展标记语言，类似HtmlXML的设计宗旨是传输数据，不是显示数据XML标签没有被预定义XML是W3C的推荐标准它的主要应用是作为配置文件，程序间数据的传输，小型数据库，和json的功能差不多。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面。
Ajax开发技术
Liuxu 的博客
09-29 854
【代码】Ajax开发技术。
前端——Ajax和jQuery
qq_53256193的博客
10-01 1672
jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。
VUE 开发——AJAX学习（二）
weixin_74113429的博客
09-26 973
异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发一个回调函数；Promise：用于表示一个异步操作的最终完成（或失败）及其结果值。Promise对象一旦被兑现/拒绝，就是已敲定，状态无法再被改变。待定（pending）：初始状态，既没有被兑现，也没有被拒绝。同步代码：逐行执行，需原地等待结果后，才继续向下执行。成功调用：resolve（值）触发then（）执行。失败调用：reject（值）触发catch（）执行。功能：不离开当前页面，显示单独内容，供用户操作。
AJAX无刷新技术：实现与问题解决
"神奇的_ajax框架：无刷新技术在项目开发中的应用" 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种关键技术，它使得网页能够实现异步数据交换，从而实现页面局部刷新，而无需重新加载整个页面。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值