脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → AJAX Servlet实现异步交互

AJAX Servlet实现数据异步交互的方法

 更新时间：2017年07月06日 14:25:02   作者：Loger丶  
本篇文章主要介绍了AJAX Servlet实现数据异步交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在慕课网上看了AJAX的一些教程，自己参考着实现一下！

首先，导入json所需要的6个包

下载链接：JSONObjectjar_jb51.rar

总的目录：

前端页面：

首先是一个输入框：

<input type="text" id="keyword" name="keyword" onkeyup="getContents()">

onkeyup表示按下键盘时的操作

javascript：

<script type="text/javascript">
  
  //全局xmlHttp对象
  var xmlHttp;

  //获得xmlHttp对象
  function createXMLHttp() {
    //对于大多数浏览器适用
    var xmlHttp;
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    //考虑浏览器的兼容性
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
      if (!xmlHttp) {
        xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
      }
    }
    return xmlHttp;
  }
  
  //回调函数
  function callback() {
    //4代表完成
    if(xmlHttp.readyState == 4){
      //200代表服务器响应成功，404代表资源未找到，500服务器内部错误
      if(xmlHttp.status == 200){
        //交互成功获得响应的数据，是文本格式
        var result = xmlHttp.responseText;
        //解析获得的数据
        var json = eval("("+ result +")");
        //获得数据之后，就可以动态的显示数据了，把数据显示到输入框下面
        alert(json);
      }
    }
  }
  
  //获得输入框的内容
  function getContents(){
    //首先获得用户的输入内容，这里获得的是一个结点
    var content = document.getElementById("keyword");
    if(content.value ==""){
      return;
    }
    
    //向服务器发送内容，用到XmlHttp对象
    xmlHttp = createXMLHttp();
    //给服务器发送数据，escape()不加中文会有问题
    var url = "search?keyword=" + escape(content.value);
    //true表示js的脚本会在send()方法之后继续执行而不会等待来自服务器的响应
    xmlHttp.open("GET",url,true);
    //xmlHttp绑定回调方法，这个方法会在xmlHttp状态改变的时候调用,xmlHttp状态有0-4，
    //我们只关心4，4表示完成
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);
  }
</script>

总的index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  
  //全局xmlHttp对象
  var xmlHttp;

  //获得xmlHttp对象
  function createXMLHttp() {
    //对于大多数浏览器适用
    var xmlHttp;
    if (window.XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    //考虑浏览器的兼容性
    if (window.ActiveXObject) {
      xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
      if (!xmlHttp) {
        xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
      }
    }
    return xmlHttp;
  }
  
  //回调函数
  function callback() {
    //4代表完成
    if(xmlHttp.readyState == 4){
      //200代表服务器响应成功，404代表资源未找到，500服务器内部错误
      if(xmlHttp.status == 200){
        //交互成功获得响应的数据，是文本格式
        var result = xmlHttp.responseText;
        //解析获得的数据
        var json = eval("("+ result +")");
        //获得数据之后，就可以动态的显示数据了，把数据显示到输入框下面
        alert(json);
      }
    }
  }
  
  //获得输入框的内容
  function getContents(){
    //首先获得用户的输入内容，这里获得的是一个结点
    var content = document.getElementById("keyword");
    if(content.value ==""){
      return;
    }
    
    //向服务器发送内容，用到XmlHttp对象
    xmlHttp = createXMLHttp();
    //给服务器发送数据，escape()不加中文会有问题
    var url = "search?keyword=" + escape(content.value);
    //true表示js的脚本会在send()方法之后继续执行而不会等待来自服务器的响应
    xmlHttp.open("GET",url,true);
    //xmlHttp绑定回调方法，这个方法会在xmlHttp状态改变的时候调用,xmlHttp状态有0-4，
    //我们只关心4，4表示完成
    xmlHttp.onreadystatechange=callback;
    xmlHttp.send(null);
  }
</script>
</head>
<body>
  <input type="text" id="keyword" name="keyword" onkeyup="getContents()">
</body>
</html>

后端：

AjaxServlet.java

package com.loger.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/search")
public class AjaxServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  
  static List<String> list = new ArrayList<>();
  static{
    list.add("chenle");
    list.add("陈乐");
  }
    
  /**
   * @see HttpServlet#HttpServlet()
   */
  public AjaxServlet() {
    super();
    // TODO Auto-generated constructor stub
  }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //设置编码
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    
    //首先获得客户端发送来的数据
    String keyword = request.getParameter("keyword");
    System.out.println(keyword);
    
    
    
    //返回json数据
    response.getWriter().write(JSONArray.fromObject(list).toString());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
  }

}

运行结果：

这就是AJAX的实现步骤，其他在页面上把内容显示出来，如输入验证码时在旁边实时提示是否正确等操作，通过JS实现即可，由于本人没怎么学过js，就这样子吧！！！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Java如何使用elasticsearch进行模糊查询

    Java如何使用elasticsearch进行模糊查询

    这篇文章主要介绍了Java如何使用elasticsearch进行模糊查询,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Java JVM内存区域详解

    Java JVM内存区域详解

    下面小编就为大家带来一篇基于jvm java内存区域的介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • 聊聊java变量的初始化之后的默认值

    聊聊java变量的初始化之后的默认值

    这篇文章主要介绍了聊聊java变量的初始化之后的默认值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-08-08
  • Java实现word转pdf并在关键字位置插入图片

    Java实现word转pdf并在关键字位置插入图片

    这篇文章主要为大家详细介绍了如何利用Java实现word转pdf,并在word中关键字位置插入图片,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • Java的JSON转换库GSON的基本使用方法示例

    Java的JSON转换库GSON的基本使用方法示例

    GSON是Google制作的一个可以让Java对象与JSON互相转换的类库,下面我们就来看一下Java的JSON转换库GSON的基本使用方法示例:
    2016-06-06
  • 一文读懂Spring Bean的生命周期

    一文读懂Spring Bean的生命周期

    今天我们来说一说 Spring Bean 的生命周期，小伙伴们应该在面试中经常遇到，这是正常现象，本文让更多的小伙伴们可以轻松的读懂 Spring Bean 的生命周期
    2023-03-03
  • Java日志API管理最佳实践详解

    Java日志API管理最佳实践详解

    这篇文章主要介绍了Java日志API管理最佳实践详解，记录日志只是有效地利用日志的第一步，更重要的是如何对程序运行时产生的日志进行处理和分析。,需要的朋友可以参考下
    2019-06-06
  • MyBatis中操作类对象的实现

    MyBatis中操作类对象的实现

    在MyBatis框架中,操作类对象是用于执行数据库操作的核心对象,本文主要介绍了MyBatis中操作类对象的实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • Java中Synchronized的用法解析

    Java中Synchronized的用法解析

    synchronized是Java中的关键字，是一种同步锁，本文给大家详细介绍Java Synchronized 用法大全，感兴趣的朋友跟随小编一起看看吧
    2021-11-11
  • MyBatis-Plus 分页插件配置的两种方式实现

    MyBatis-Plus 分页插件配置的两种方式实现

    本文主要介绍了MyBatis-Plus 分页插件配置的两种方式实现,包括使用PaginationInterceptor和MybatisPlusInterceptor两种方式,具有一定的参考价值,感兴趣的可以了解一下
    2025-03-03

最新评论