使用ajax实现jsp在不刷新页面的前提下与后台进行数据交互

先附上此次测试的相关页面名称及代码,共有三个文件:web.xml、index.jsp以及放在包 com.ajax.com下的AjaxServerlet.java。

代码及解释如下:

(1) index.jsp

复制代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
 
    <script type="text/javascript">
       //1、获取到xmlhttprequest
    function getXmlhttp() {
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    window.onload = function() {
        document.getElementById('mybtn').onclick = function() {
 
            //1、获取到xmlhttprequest 对象
            var xmlhttp = getXmlhttp();
            //2、xmlhttprequest的响应事件
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //5、操作获取到的信息
                    //5.1ajax返回的数据,转换为javascript对象
                    // 5.1.1 利用eval实现转换
                    var ajaxResult = eval("(" + xmlhttp.responseText + ")");
                    //5.1.2 利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号
                    /* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */
                    alert(ajaxResult)
                    //5.2获取JavaScript对象的属性
                    var age = ajaxResult.age;
                    var name = ajaxResult.name;
 
                    //5.3获取到页面的DIV,并设置内容
                    var mydiv = document.getElementById("myAjax");
                    mydiv.innerHTML = "name:" + name + "," + "age:" + age;
                }
            }
            //3、准备获取ajax请求
            //3.1 对于get请求,带参数的方式,直接在open函数的请求地址带上参数
            xmlhttp.open("POST", "AjaxServerlet", true);
            //4、发送ajax请求
            xmlhttp.setRequestHeader("Content-type",
                    "application/x-www-form-urlencoded");
            /*
             *使用post方法提交时,通过send("age=18&name=zhang")传递参数
             *使用get方法提交时,必须调用send(null)
             *使用post或get都必须使用调用send()
             */
            xmlhttp.send("age=18&name=zhang");
 
        };
    }
    </script>
</head>
<body>
<button id="mybtn">点击</button>
    <div id="myAjax"></div>
</body>
</html>
复制代码
xmlhttp.readyState 的取值有0,1,2,3,4。readyState的值每一次改变都会自动调用 onreadystatechange 。

|--------------|-------------------------------------------------------------------------------|
| ReadyState取值 | 描述 |
| 0 | 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。 |
| 1 | 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 |
| 2 | 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。 |
| 3 | 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 |
| 4 | 描述一种"已加载"状态;此时,响应已经被完全接收。 |

在点击按钮后,从创建XMLHttpRequest对象开始到数据交互结束,虽然ReadyState一直在变化,但由于会自动调用 onreadystatechange ,故能在整个过程中实现监听数据交互的整个流程并做出相应的回应,在这里,当 (xmlhttp.readyState == 4 && xmlhttp.status == 200) ,即数据发送完毕且连接正常时,获取后台传过来的数据并显示到 id 为 myAjax 的 div 中。

当不需要传递参数到后台时,可将send()方法中的字符串替换为null,即 send(null),或在 open() 方法中使用 get 方式连接。

(2) web.xml

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://java.sun.com/xml/ns/javaee"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
        id="WebApp_ID" version="3.0">
        
    <servlet>
            <servlet-name>AjaxServerlet</servlet-name>
        <servlet-class>com.ajax.com.AjaxServerlet</servlet-class>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>AjaxServerlet</servlet-name>
        <url-pattern>/AjaxServerlet</url-pattern>
    </servlet-mapping>
</web-app>   
复制代码
配置servlet的目的是响应 index.jsp 页面中点击按钮出发事件时交由后台java类处理,<url-pattern>标签中的"/AjaxServerlet"即为前端使用ajax时需要连接的url地址,使用时应去掉“/”。

(3) AjaxServerlet.java

复制代码
package com.ajax.com;

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

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

public class AjaxServerlet extends HttpServlet {
     
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String age = request.getParameter("age");
        String name = request.getParameter("name");
 
        String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"
                + "\":" + age + "}";
        System.out.println(personJSON);
        response.getWriter().write(personJSON);
    }
 
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
 
    }
}

获取前端传过来的数据并传参给前端。

相关推荐
蓝染-惣右介2 分钟前
【MyBatisPlus·最新教程】包含多个改造案例,常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段
java·数据库·tomcat·mybatis
小林想被监督学习3 分钟前
idea怎么打开两个窗口,运行两个项目
java·ide·intellij-idea
HoneyMoose5 分钟前
IDEA 2024.3 版本更新主要功能介绍
java·ide·intellij-idea
我只会发热6 分钟前
Java SE 与 Java EE:基础与进阶的探索之旅
java·开发语言·java-ee
是老余8 分钟前
本地可运行,jar包运行错误【解决实例】:通过IDEA的maven package打包多模块项目
java·maven·intellij-idea·jar
crazy_wsp8 分钟前
IDEA怎么定位java类所用maven依赖版本及引用位置
java·maven·intellij-idea
.Ayang10 分钟前
tomcat 后台部署 war 包 getshell
java·计算机网络·安全·web安全·网络安全·tomcat·网络攻击模型
醉の虾12 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
一直学习永不止步16 分钟前
LeetCode题练习与总结:最长回文串--409
java·数据结构·算法·leetcode·字符串·贪心·哈希表
张小小大智慧20 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript