本文最后更新于：December 3, 2021 pm

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax 是一种独立于 Web 服务器软件的浏览器技术。Ajax可使因特网应用程序更小、更快，更友好。

<script>
        function getShowd(){ //getShowd是触发事件函数
            // 第一步
            var xml = new XMLHttpRequest();
            // 第二步
            xml.onreadystatechange = function () {
                if (xml.status == 200 && xml.readyState == 4) {
                    var da = xml.responseText;
                    // 将json格式的字符串转换为json格式的对象
                    var opt = JSON.parse(da);
                    document.getElementById("uid").value = opt.id;
                    //其他执行代码。。。。
                }
            }

            var uid = document.getElementById("uid").value;
            var flag = "/StudyAjax01_war_exploded/jsond?id=" + uid;
            // 第三步
            xml.open("get", flag, true);
            // 第四步
            xml.send();
        }
    </script>

<input type="button" onclick="getShowd()" value="查询">

1.全局刷新（Servlet）

1.1 转发

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html  lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <div align="center" style="margin-top: 60px">
        <form action="/StudyAjax01_war_exploded/hs" method="get">
            姓名：<input type="text" name="username"> <br><br>
            性别：<input type="text" name="sex"> <br><br>
            年龄：<input type="text" name="age"> <br><br>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

dataShow.jsp

<%--
  Created by IntelliJ IDEA.
  User: dragonone
  Date: 2021/11/28
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
 结果为：${info}
</body>
</html>

📢注意：在使用${}这种时，必须要加上 isELIgnored=”false”。

getDataServlet.java

package com.tothefor.controller;

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 java.io.IOException;

/**
 * @Author DragonOne
 * @Date 2021/11/28 12:50
 */
@WebServlet(name = "hee", value = "/hs")
public class getDataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String usex = req.getParameter("sex");
        String uage = req.getParameter("age");
        String info = username + " " + usex + " " + uage;
        System.out.println(info);
        req.setAttribute("info",info);
        req.getRequestDispatcher("/dataShow.jsp").forward(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

1.2 HttpServletResponse对象

这里只需要index.jsp和getDataServlet.java，其中，index.jsp代码和上面一样，getDataServlet.java的代码有一点点改变：

package com.tothefor.controller;

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 java.io.IOException;
import java.io.PrintWriter;

/**
 * @Author DragonOne
 * @Date 2021/11/28 12:50
 */
@WebServlet(name = "hee", value = "/hs")
public class getDataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String usex = req.getParameter("sex");
        String uage = req.getParameter("age");
        String info = username + " " + usex + " " + uage;
        System.out.println(info);
//        req.setAttribute("info",info);
//        req.getRequestDispatcher("/dataShow.jsp").forward(req,resp);
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(info);
        out.flush();
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

2.局部刷新（Ajax）

使用Ajax的好处就是，不会被表单限制，在其他中也可以使用。

2.1 返回字符串类型

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script>
        function getShowd(){
            var xml = new XMLHttpRequest();
            xml.onreadystatechange = function () {
                if (xml.status == 200 && xml.readyState == 4) {
                    var da = xml.responseText;
                    document.getElementById("showda").innerText = da;
                }
            }

            var uname = document.getElementById("name").value;
            var usex = document.getElementById("sex").value;
            var uage = document.getElementById("age").value;
            var flag = "/StudyAjax01_war_exploded/hs?username=" + uname + "&sex=" + usex + "&age=" + uage;
            xml.open("get", flag, true);
            xml.send();
        }
    </script>
</head>
<body>
<div align="center" style="margin-top: 60px">
    姓名：<input type="text" id="name"> <br><br>
    性别：<input type="text" id="sex"> <br><br>
    年龄：<input type="text" id="age"> <br><br>
    <input type="button" onclick="getShowd()" value="查询">
</div>
<div align="center" style="margin-top: 30px">
    <span id="showda">暂无数据。</span>
</div>
</body>
</html>

getDataServlet.java

package com.tothefor.controller;

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 java.io.IOException;
import java.io.PrintWriter;

/**
 * @Author DragonOne
 * @Date 2021/11/28 12:50
 */
@WebServlet(name = "hee", value = "/hs")
public class getDataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String usex = req.getParameter("sex");
        String uage = req.getParameter("age");
        String info = username + " " + usex + " " + uage;
        System.out.println(info);
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(info);
        out.flush();
        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

2.2 返回JSON类型

如果是对象，则需要将对象转化为JSON，再用HttpServletResponse输出。

if(ce != null){
  ObjectMapper om = new ObjectMapper();
  js = om.writeValueAsString(ce);
}

将对象ce转化为String类型的js。

示例

本示例有六个文件：JDBCUtils（工具类）、CityEntiey（实体类）、CityDao（接口）、CityDaoImpl（实现类）、dataShow.jsp（前端页面）、JSONServlet（控制类）。

JDBCUtils.java

package com.tothefor.utils;

import java.sql.*;

/**
 * @Author DragonOne
 * @Date 2021/11/28 17:12
 */
public class JDBCUtils {
    static {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    //获取连接数据库对象
    public static Connection getConnection(){
        Connection conn = null;
        try {
            String url = "jdbc:mysql://localhost:3306/ajaxTest?serverTimezone=GMT%2B8";
            String user = "root";
            String password = "loong461";
            conn = DriverManager.getConnection(url,user,password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return conn;
    }

    //关闭函数
    public static void closeAll(Connection connection, Statement st, ResultSet rs){
        try {
            if(rs != null){
                rs.close();
            }
            if(st != null){
                st.close();
            }
            if(connection != null){
                connection.close();
            }

        }catch (SQLException e){
            e.printStackTrace();
        }
    }
}

CityEntiey.java

package com.tothefor.entity;

import jdk.nashorn.internal.objects.annotations.Getter;
import jdk.nashorn.internal.objects.annotations.Setter;

/**
 * @Author DragonOne
 * @Date 2021/11/28 17:29
 */

public class CityEntiey {
    private int id;
    private String name;
    private int shenghui;
    private String addredd;
    private String email;
    private String telephone;

    @Override
    public String toString() {
        return "CityEntiey{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", shenghui=" + shenghui +
                ", addredd='" + addredd + '\'' +
                ", email='" + email + '\'' +
                ", telephone='" + telephone + '\'' +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getShenghui() {
        return shenghui;
    }

    public void setShenghui(int shenghui) {
        this.shenghui = shenghui;
    }

    public String getAddredd() {
        return addredd;
    }

    public void setAddredd(String addredd) {
        this.addredd = addredd;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    public CityEntiey() {
    }
}

CityDao

package com.tothefor.dao;

import com.tothefor.entity.CityEntiey;

/**
 * @Author DragonOne
 * @Date 2021/11/28 17:36
 */
public interface CityDao {
    public CityEntiey queryDataByID(int index) throws Exception;
}

CityDaoImpl.java

package com.tothefor.dao.impl;

import com.tothefor.dao.CityDao;
import com.tothefor.entity.CityEntiey;
import com.tothefor.utils.JDBCUtils;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

/**
 * @Author DragonOne
 * @Date 2021/11/28 17:37
 */
public class CityDaoImpl implements CityDao {
    @Override
    public CityEntiey queryDataByID(int index) throws Exception{
        CityEntiey ce = new CityEntiey();
        Connection connection = JDBCUtils.getConnection();
        PreparedStatement ps = connection.prepareStatement("select * from city where id=?");
        ps.setInt(1,index);
        ResultSet rs = ps.executeQuery();
        while(rs.next()){
            int s1 = rs.getInt(1);
            String s2 = rs.getString(2);
            int s3 = rs.getInt(3);
            String s4 = rs.getString(4);
            String s5 = rs.getString(5);
            String s6 = rs.getString(6);
            ce.setId(s1);
            ce.setName(s2);
            ce.setShenghui(s3);
            ce.setAddredd(s4);
            ce.setEmail(s5);
            ce.setTelephone(s6);
        }
        JDBCUtils.closeAll(connection,ps,rs);
        return ce;
    }
}

dataShow.jsp

<%--
  Created by IntelliJ IDEA.
  User: dragonone
  Date: 2021/11/28
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script>
        function getShowd(){
            // console.log("fsas")
            var xml = new XMLHttpRequest();
            xml.onreadystatechange = function () {
                if (xml.status == 200 && xml.readyState == 4) {
                    var da = xml.responseText;
                    // 将json格式的字符串转换为json格式的对象
                    var opt = JSON.parse(da);
                    document.getElementById("uid").value = opt.id;
                    document.getElementById("name").value = opt.name;
                    document.getElementById("sh").value = opt.shenghui;
                    document.getElementById("address").value = opt.addredd;
                    document.getElementById("email").value = opt.email;
                    document.getElementById("tele").value = opt.telephone;
                }
            }

            var uid = document.getElementById("uid").value;
            var flag = "/StudyAjax01_war_exploded/jsond?id=" + uid;
            xml.open("get", flag, true);
            xml.send();
        }
    </script>
</head>
<body>
<div align="center" style="margin-top: 60px">
    ID:<input type="text" id="uid"> <br><br>
    姓名：<input type="text" id="name"> <br><br>
    省会：<input type="text" id="sh"> <br><br>
    地址：<input type="text" id="address"> <br><br>
    邮箱：<input type="text" id="email"> <br><br>
   电话：<input type="text" id="tele"> <br><br>
    <input type="button" onclick="getShowd()" value="查询">
</div>
</body>
</html>

JSONServlet.java

package com.tothefor.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tothefor.dao.CityDao;
import com.tothefor.dao.impl.CityDaoImpl;
import com.tothefor.entity.CityEntiey;
import com.tothefor.utils.JDBCUtils;

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 java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

/**
 * @Author DragonOne
 * @Date 2021/11/28 17:55
 */
@WebServlet(value = "/jsond")
public class JSONServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int id = Integer.valueOf(req.getParameter("id"));
        CityEntiey ce = null;
        String js = "无数据";
        CityDao cd = new CityDaoImpl();
        try {
            ce = cd.queryDataByID(id);
        }catch (Exception e){
            e.printStackTrace();
        }
        //把对象转换为json，才能通过httpServletResponse输出
        if(ce != null){
            ObjectMapper om = new ObjectMapper();
            js = om.writeValueAsString(ce);
        }
        System.out.println(js);
        //输出json给ajax
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(js);
        out.flush();
        out.close();

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

JavaWEB

JavaWEB AJAX

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/2836974425.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

JSoup-JAVA使用JSoup简单实现爬取网页数据 Previous

星星之火-关于VScode使用Git需要登录Codechina账号问题 Next

JavaWEB-（三十五）Ajax快速入门

目录

0.原生Ajax

1.创建异步对象

2.XMLHttpRequest方法

3.XMLHttpRequest属性

4.使用步骤

5.完整使用模板

1.全局刷新（Servlet）

1.1 转发

1.2 HttpServletResponse对象

2.局部刷新（Ajax）

2.1 返回字符串类型

2.2 返回JSON类型

示例

JDBCUtils.java

CityEntiey.java

CityDao

CityDaoImpl.java

dataShow.jsp

JSONServlet.java