在javaweb开发过程中，我们常常会采用网页的局部页面刷新，但是我们又不想要跳转页面或者刷新页面，那么就要用到ajax异步刷新啦。先介绍一下什么是ajax吧！

一、定义：

AJAX 全名叫做Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。ajax不是新的编程语言，而是一种使用现有标准的新方法，ajax最大的优点是在于不重新加载整个页面的情况下，可以与服务器交换数据并更新网页的部分网页内容，ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、优点：

ajax虽然不是一个新语言，但是开启一个新的编程方式技术，在网页不进行表单提交和网页跳转的情况下，进行对服务器的访问和数据交流；
ajax使得以前无法网页部分刷新的现状变得可行；
ajax技术应用与不止在javaweb开发上，在其他应用和移动终端上也应用较多；
ajax给web用户的体验更好，不会让用户不停的去刷新页面，会在网页后面已经在自动进行数据交互了；

三、实际应用

使用ajax对后端的数据库进行异步读取：

1.网页代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户注册页面</title>
    <script type="text/javascript">
        var list_number;
        function checkName() {
            var spam = document.getElementById("nametip");
            var obj=new Date();
            spam.innerText="触发"+"当前时间:"+obj.getDay()+"日"+obj.getHours()+" 时 "+obj.getMinutes()+" 分 "+obj.getSeconds()+" 秒";
            // 进行ajax 进行异步请求后台数据
            var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                //ie浏览器
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //发送请求
            var uname = document.getElementById("name");
            xmlhttp.open("GET","UserServlet?name="+uname.value,true);
            xmlhttp.send();

            //服务器响应发回的数据
            xmlhttp.onreadystatechange=function()
            {
                //readyState==4 代表请求已经完成，且响应结束
                //status==200 代表状态正常
                if(xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var text_edit = document.getElementById("table_date");
                    text_edit.innerHTML = xmlhttp.responseText;
                }
            }
        }
        // 因为如果一个页面有多个ajax的时候，那么需要添加回调函数，用来辨别是哪一个ajx对象
        // 回调函数就是把一个函数作为参数传给另外一个参数

    </script>
</head>
<body>
<form action="UserServlet">

    <p>
        账号：<input type="text" name="name" id="name" onblur="checkName();" /><span
            id="nametip"></span>
    </p>
    <p>
        密码：<input type="password" name="name" id="password" /><span id="nametip"></span>
    </p>
    <p>
        <input type="submit" value="注册" />
    </p>
    <span id="edit1">这个是ajax发回的数据</span>

</form>
    <select class="form-control" name="stuSum" id="stuSum">
    <option selected="selected">--请选择--</option>
    </select>
<div id="table_date">

</div>
</body>
</html>

前端jsp页面通过鼠标焦点丢失触发异步请求函数，把需要请求的数据库的名称传到服务器，服务器把查询到的表的数据通过构建成html的表格形式的字符串返回给前端jsp页面，然后再赋值给一个div容器，显示即可。
我们来理一理ajax的工作过程：

1. 首先创建一个xmlhttp，并判断当前处于什么浏览器，如果是ie浏览器使用ActiveXObject进行创建xmlhttp对象，如果是其他浏览器使用XMLHttpRequest进行创建对象；
1. xmlhttp构建请求字符串，一般情况使用GET方式，较为方便，但是请求的字符串有长度要求；
1. 使用send()进行请求访问；
1. 定义监听xmlhttp 的函数，如果xmlhttp的状态发送改变，则执行，这个函数就是onreadystatechange，并且判断xmlhttp.readyState==4 && xmlhttp.status==200，readyState==4代表已经得到服务器的回复，且就绪了，xmlhttp.status==200代表当前正常，成功访问服务器并得到回复。在该函数中进行逻辑处理即可。

2.服务器代码：

package serlvet;

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.ResultSet;

@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String table_name=request.getParameter("name");
        System.out.println("发过来了一个请求");
        table_name = new String(table_name.getBytes("iso8859-1"), "utf-8");
        PrintWriter out = response.getWriter();
        //获取数据库的值
        if(table_name.equals("")||table_name.equals("[email protected]")){
            return;
        }
        JDBConnection jdbConnection=new JDBConnection();
        String sql_data = "select * from "+table_name;
        ResultSet resultSet =jdbConnection.executeQuery(sql_data);
        System.out.println(sql_data);
        out.write("<table>");
        try {
            while(resultSet.next()){
                int len =resultSet.getMetaData().getColumnCount(); //列数
                out.write("<tr>");
                for(int i=0;i<len;i++){
                    out.write("<td>"+resultSet.getString(i+1)+"</td>");
                }
                out.write("</tr>");
            }
        }catch (Exception e)
        {
            e.printStackTrace();
        }finally {
            out.write("</table>");
            out.flush();
            out.close();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

我把student 和 jdbc的也发出来吧

3.jdbc代码

package serlvet;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class JDBConnection {
    private final String dbDrive="com.mysql.cj.jdbc.Driver";
    private final String url="jdbc:mysql://localhost:3306/studentdata?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true";
    private final String user = "user";                 //数据库账户名
    private final String Passwd = "123456";       //数据库密码
    private Connection con=null;
    public JDBConnection(){
        try {
            Class.forName(dbDrive).newInstance();
        }catch (Exception ex){
            ex.printStackTrace();
            System.out.println("数据库加载失败!");
        }
        System.out.println("数据库加载成功!");
    }
    public boolean creatConnection(){
        try {
            con=DriverManager.getConnection(url,user,Passwd);
            con.setAutoCommit(true);
        }catch (SQLException e){
            System.out.println(e.toString());
        }
        return true;
    }
    public boolean executeUpdate(String sql){      //对数据库进行增加，修改，删除
        if(con==null){
            creatConnection();
        }
        try {
            Statement stmt=con.createStatement();
            int iCount=stmt.executeUpdate(sql);
            System.out.println("操作成功,所影响的记录数为"+String.valueOf(iCount));
            return true;

        }catch (SQLException e){
            return false;
        }
    }
    public ResultSet executeQuery(String sql)   //对数据库进行查询操作
    {
        ResultSet rs;
        try {
            if(con==null){
                creatConnection();
            }
            Statement stmt=con.createStatement();
            rs=stmt.executeQuery(sql);
        }catch (Exception e)
        {
            return null;
        }
        return rs;
    }
    public void closeConnecstion()
    {
        if(con==null){
            try {
                con.close();
            }catch (SQLException e){
                e.printStackTrace();
            }
        }
    }
    public List<student> getStudent(String sql){
        List<student> list=new ArrayList<>();
        ResultSet rs=executeQuery(sql);
        try {
            while (rs.next()) {
                student stu = new student();
                stu.setAddress(rs.getString("address"));
                stu.setBirthday(rs.getString("birthday"));
                stu.setCollege_name(rs.getString("college_name"));
                stu.setInputSchool_time(rs.getString("inputSchool_time"));
                stu.setMajor_name(rs.getString("major_name"));
                stu.setName(rs.getString("name"));
                stu.setNumber(rs.getString("student_number"));
                stu.setSex(rs.getString("sex"));
                stu.setStudent_year(rs.getString("student_year"));
                stu.setOutputSchool_time(rs.getString("outputSchool_time"));
                stu.setTelphone_number(rs.getString("telphone_number"));
                list.add(stu);
            }
        }
        catch (SQLException e){
        }
        finally {
            closeConnecstion();
        }
        return list;
    }
}

四、运行的结果

1. 访问了course_data 表数据
2. 访问了student_data表数据

今天的ajax就学习到这里结束啦！

当你的才华还撑不起你的野心的时候，
你就应该静下心来学习；
当你的能力还驾驭不了你的目标时，
就应该沉下心来，历练.

夏天的风€&^_^

发布了65 篇原创文章 · 获赞 29 · 访问量 6506

私信关注

ajax异步请求数据库显示