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,就这样子吧!!!

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

(0)

相关推荐

  • Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值

    首先来看工程结构图: 项目所需要的包,如下所示: JSP代码: <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServe

  • jquery请求servlet实现ajax异步请求的示例

    ajax可以发送异步请求实现无刷新效果,但是使用javascript比较麻烦,就query提供了一些封装的方法 ,可以使得操作更为简单: $.ajax()方法: function sendRequest() { $.ajax({ url: "Hello", type: "GET", dataType: "txt", data: "name=zhangsan", complete: function(result){ alert

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

    在慕课网上看了AJAX的一些教程,自己参考着实现一下! 首先,导入json所需要的6个包 下载链接:JSONObjectjar_jb51.rar 总的目录: 前端页面: 首先是一个输入框: <input type="text" id="keyword" name="keyword" onkeyup="getContents()"> onkeyup表示按下键盘时的操作 javascript: <script t

  • IE9下Ajax无法刷新数据的缓存问题解决方法

    使用jQuery的getJSON从后台定时获取数据并刷新界面,使用以下方法时,在Chrome,Firefox下没问题,但在IE9下却无法刷新数据 $.getJSON(webApp + "/GetShowData.do?limit=" + limit,function(data){ //****************** } 原因是,在IE9下,进行Ajax请求时,若与之前请求相同,则不会再从浏览器获取数据,而是直接从本地获取,因此,在请求中加上时间戳,IE9便会认为是不同的请求,代码

  • jquery $.ajax()取xml数据的小问题解决方法

    开始的代码如下: 复制代码 代码如下: $.ajax({ type: "get", url: "Database/App_all.xml", dataType: "xml", timeout: 2000, beforeSend: function () {}, success: function (xml) { $(xml).find("app[id='id-1']").find("auther").app

  • 在SSM框架下用laypage和ajax实现分页和数据交互的方法

    layui,一款前端框架,提供了丰富的组件和模板,layui提供的简约后台管理模板,对于后端学习者来说是个不错的福音.这里记录在SSM框架下使用layui的分页组件laypage.(官网开发文档) 环境 Spring+SpringMVC+Mybatis , jquery-3.1.0.min.js , mysql-connector-java-5.1.34 参考文档 layui-laypage参数文档 前端代码主要参考的是layui官网给定的代码,加载layui.css和layui.js:除此之外

  • TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

    本文实例讲述了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法.分享给大家供大家参考,具体如下: 方法一: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法 前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax交互</title> <script s

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

    异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test

  • Java中使用json与前台Ajax数据交互的方法

    本文主要为大家分享了Ajax获取显示Json数据的一种方法,供大家参考,具体内容如下   1.首先前台用Ajax,其中注意dataType一定要选择json方式,Action成功返回给页面的Json内容是这样的[{"number":"V006","names":"LiLei"}],可见comment['names']对应"names":"LiLei",comment['number']对

  • Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1.首先在jsp页面的JavaScript,这段代码是通用的,所以把他放在函数外面,可以供其他的函数共同使用 var xhr=false; //创建XMLHttpRequst对象 if(window.XMLHttpRequest) { xhr=new XMLHttpRequest(); } else

  • Ajax+js实现异步交互

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 创建ajax核心对象 与服务器建立连接 向服务器发送请求 接收服务器响应的数据 看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了 首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象. functio

  • Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收服务器响应的数据 看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了 首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象.

随机推荐