Ajax请求全流程

最新推荐文章于 2022-12-10 09:17:56 发布

西里小诸葛

最新推荐文章于 2022-12-10 09:17:56 发布

阅读量628

点赞数 1

分类专栏： JavaWeb课程学习笔记文章标签： mysql json ajax

本文链接：https://blog.csdn.net/weixin_45941099/article/details/118500121

版权

JavaWeb课程学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、业务背景

在浏览器上显示一个表格，表格上有省份的id，名称，简称，省会等属性。我们在浏览器上输入id，浏览器通过xmlHttpRequest异步对象发送请求到服务器端（servlet类）。服务器端有两个文件一个是servlet类，另一个是dao类（负责数据库访问）。在servlet类中通过新建dao类对象，调用该对象访问数据库的方法。然后该方法返回一个值（可以是字符串，也可以是json对象）。然后通过Jackson.jar中的ObjectMapper.WriteValueofString(返回的java对象)方法，将java对象转换成json格式的字符串。然后就可以通过PrintWriter对象进行输出。这时前端页面就接收到了响应数据，再将json字符串转换成json对象，然后通过document.getElementById（）.value方法给浏览器中的页面控件赋值。

流程图

二、异步与同步的区别

Ajaxj就是异步对象请求，也就是局部刷新，异步对象它不是通过浏览器向服务器发送请求的，而是通过操作系统内置的内存对象，由操作系统向服务器发送请求。所以Ajax请求时，可以同时在浏览器页面进行其他的的交互，两者互不影响。

全局刷新:即页面中有数据更改，就得浏览器向服务器发送请求，然后根据返回的响应数据重新加载页面。

异步：即不同步伐地做不同的事情，相当于同时进行不同的操作

同步：是指程序必须一件事情完成了才能执行下一个事情，相当于严格按照顺序执行。

三、四步使用Ajax请求

创建异步对象、绑定事件、异步对象初始化（请求方式、请求地址+参数）、发送请求

Index.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax请求使用json格式的数据</title>
    <script type="text/javascript">
        function dosearch(){
            //发送Ajax请求，将请求参数发送给服务器，服务器返回数据
            //1.创建异步对象
            var xmlHttp=new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange=function () {
                if(xmlHttp.readyState==4&&xmlHttp.status==200)
                {   alert(xmlHttp.responseText);
                    var data=xmlHttp.responseText;
                    var jsonobj=eval("("+data+")");//key就是json对象的属性
                    //将json字符串转换成json对象，字符串中的key就是json对象的属性
                    document.getElementById("proname").value=jsonobj.name;
                    document.getElementById("projiancheng").value=jsonobj.jiancheng;
                    document.getElementById("proshenghui").value=jsonobj.shenghui;
                }
            }
            //3.初始化异步对象,指定访问的地址
            //获取文本框的id
            var proid=document.getElementById("proid").value;
            xmlHttp.open("get","queryJson?proid="+proid,true);
            //true表示异步请求，异步表示发送请求后，不用等待数据处理完毕，就可以进行其他操作
            //4.发送请求
            xmlHttp.send();
        }
    </script>
</head>
<body>
    <p>Ajax请求使用json格式的数据</p>
    <table>
        <tr>
            <td>省份编号：</td>
            <td><input type="text" id="proid">
                <input type="button" value="搜索" onclick="dosearch()">
            </td>
        </tr>
        <tr>
            <td>省份名称：</td>
            <td><input type="text" id="proname">
            </td>
        </tr>
        <tr>
            <td>省份简称：</td>
            <td><input type="text" id="projiancheng">
            </td>
        </tr>
        <tr>
            <td>省份省会：</td>
            <td><input type="text" id="proshenghui">
            </td>
        </tr>

    </table>
</body>
</html>

ProvinceDao(数据库操作类)

//使用jdbc访问数据库
public class PrinceDao {

    //根据id获取省份名称
    public String queryPrinceNamebyId(Integer princeid){
        Connection conn=null;
        PreparedStatement pst=null;
        ResultSet rs=null;
        String url="jdbc:mysql://localhost:3306/springdb";
        String sql="";
        String name="";
        //加载驱动
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection(url,"root","rootiszsh");
            sql="select name from province where id=?";
            pst=conn.prepareStatement(sql);
            //设置参数值
            pst.setInt(1,princeid);
            rs=pst.executeQuery();
            if(rs.next())
            {
                name=rs.getString("name");
                System.out.println("连接数据库成功");
            }
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }finally {
            try{
                if(rs!=null){rs.close();}
                if(pst!=null){pst.close();}
                if(conn!=null){conn.close();}
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return  name;
    }


    //根据id获取Province对象
    public Province queryPrincebyId(Integer provinceid){
        Connection conn=null;
        PreparedStatement pst=null;
        ResultSet rs=null;
        String url="jdbc:mysql://localhost:3306/springdb";
        String sql="";
        Province province=null;
        //加载驱动
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection(url,"root","rootiszsh");
            sql="select id,name,jiancheng,shenghui from province where id=?";
            pst=conn.prepareStatement(sql);
            //设置参数值
            pst.setInt(1,provinceid);//！！！！为什么要设置好参数呢
            rs=pst.executeQuery();
            if(rs.next())
            {
                province=new Province();//没有创建对象，开辟空间就会产生空指针异常
               province.setId(rs.getInt("id"));
               province.setName(rs.getString("name"));
               province.setJiancheng(rs.getString("jiancheng"));
               province.setShenghui(rs.getString("shenghui"));
                System.out.println("连接数据库成功");
            }
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }finally {
            try{
                if(rs!=null){rs.close();}
                if(pst!=null){pst.close();}
                if(conn!=null){conn.close();}
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return  province;
    }
}

Servlet类

public class QueryJsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //默认值，{}表示是Json格式的数据
        String json="{}";
        String Strproid=request.getParameter("proid");
        if(Strproid!=null&&Strproid.trim().length()>0)
        {
            PrinceDao princeDao=new PrinceDao();
            Province p=princeDao.queryPrincebyId(Integer.valueOf(Strproid));
            ObjectMapper om=new ObjectMapper();
            json=om.writeValueAsString(p);
        }
        //通过网络传递json数据，把获取的数据通过网络传递给ajax中的异步对象，响应结果数据
        //指定服务器（servlet）返回给浏览器的是json格式的数据
        response.setContentType("application/json;charset=utf-8");
        PrintWriter printWriter=response.getWriter();
        printWriter.println(json);
        printWriter.flush();
        printWriter.close();
    }
}

java对象转换成json字符串Demo

public class TestJson {
    public static void main(String[] args) throws JsonProcessingException {
        Province p=new Province();
        p.setId(1);
        p.setName("河北");
        p.setJiancheng("冀");
        p.setShenghui("石家庄");

        //使用jackson将参数的java对象转换成json格式的字符串
        ObjectMapper om=new ObjectMapper();
        String json=om.writeValueAsString(p);
        System.out.println("转换的字符串="+json);
    }
}

四、开发中的细节

1.首先先检测jsp页面发送ajax请求到servletle类是否成功。

2.检测是否连接上数据库

3.检测服务器端能否将从数据库中得到的单个参数的字符串传送给浏览器

4.先模拟浏览器发送请求，看是否能够获得json字符串，再编写前端页面

http://localhost:8080/queryInfo/queryJson?proid=1

西里小诸葛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax请求全流程

一、业务背景在浏览器上显示一个表格，表格上有省份的id，名称，简称，省会等属性。我们在浏览器上输入id，浏览器通过xmlHttpRequest异步对象发送请求到服务器端（servlet类）。服务器端有两个文件一个是servlet类，另一个是dao类（负责数据库访问）。在servlet类中通过新建dao类对象，调用该对象访问数据库的方法。然后该方法返回一个值（可以是字符串，也可以是json对象）。然后通过Jackson.jar中的ObjectMapper.WriteValueofString(返回的jav
复制链接

扫一扫