Ajax解析以及应用示例

最新推荐文章于 2021-08-06 12:13:26 发布

进击的Coders

最新推荐文章于 2021-08-06 12:13:26 发布

阅读量207

点赞数 1

分类专栏： Ajax Js 文章标签： ajax js java

本文链接：https://blog.csdn.net/qq_43403676/article/details/107715264

版权

Js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

1，什么是Ajax

Ajax是asynchronous JavaScript And Xml (异步的JavaScript和XML)。是一种异步请求技术，能够在不重新加载整个网页的情况下对网页的部分进行更新，目前应用非常广泛。

2，Ajax的使用步骤

创建异步对象
var xmlHttp = new XMLHttpRequest();
绑定事件
xmlHttp.onreadystatechange = function(){};
初始化异步对象参数
xmlHttp.open(get,url,true);
发送请求
xmlHttp.send();

3，一个使用Ajax的示例

这个示例在前端页面输入一个省份的id，点击提交发起异步请求，从数据库中查出该省份的对象，并返回到前端页面：

1，创建前端页面，在前端页面设置一个点击事件，在该点击事件触发的function中设置ajax请求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>根据省份id获取名称</title>
    <script type="text/javascript">
      //发起ajax请求，传递参数给服务器，服务器返回数据
    function search() {
      //  1，创建异步对象
      var xmlHttp = new XMLHttpRequest();
      //  2，绑定事件
      xmlHttp.onreadystatechange = function () {
        // alert(xmlHttp.readyState);
        if (xmlHttp.readyState==4&&xmlHttp.status==200){
          alert(xmlHttp.responseText);
          var province = JSON.parse(xmlHttp.responseText);
          // document.getElementById("pname").value = xmlHttp.responseText;
          document.getElementById("pname").value = province.name;
          document.getElementById("jiancheng").value = province.jiancheng;
          document.getElementById("shenghui").value = province.shenghui;
        }
      };
      //  3，初始化异步对象请求参数
      var proid = document.getElementById("proid").value;
      xmlHttp.open("get","queryProvince?proid="+proid,true);
      //  4，发送请求
      xmlHttp.send();
    }
    </script>
  </head>
  <body>
  <table>
    根据省份id获取名称
    <tr>
      <td>省份编号：</td>
      <td>
        <input type="text" id="proid">
        <input type="button" value="搜索" onclick="search()"><br>
      </td>
    </tr>
    <tr>
      <td>省份名称：</td>
      <td><input type="text" id="pname"></td><br>
    </tr>
    <tr>
      <td>省份简称：</td>
      <td><input type="text" id="jiancheng"></td><br>
    </tr>
    <tr>
      <td>省份省会：</td>
      <td><input type="text" id="shenghui"></td><br>
    </tr>
  </table>
  </body>
</html>

2，创建dao，数据库连接对象

public class ProvinceDao {
    public Province queryProvinceNameById(Integer provinceId){
        Connection conn = null;
        PreparedStatement pst = null;
        ResultSet rs= null;
        String sql = "";

        String url = "jdbc:mysql://localhost:3306/springdb?serverTimezone=UTC";
        String username = "root";
        String password = "123456";

        String name = "";
        String jiancheng = "";
        String shenghui = "";
        Province province = new Province();
        String s = "";

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url,username,password);
//            sql = "select name from pro where id = ?";
            sql = "select * from pro where id =?";
            pst = conn.prepareStatement(sql);
            pst.setInt(1,provinceId);
            rs = pst.executeQuery();

            while(rs.next()){
                name = rs.getString("name");
                jiancheng = rs.getString("jiancheng");
                shenghui = rs.getString("shenghui");
                province.setJiancheng(jiancheng);
                province.setName(name);
                province.setShenghui(shenghui);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (rs!=null){
                    rs.close();
                }
                if (pst!=null){
                    pst.close();
                }
                if (conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        System.out.println(s);
        return province;
    }
}

3，创建servlet并配置

创建servlet

public class QueryProvinceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理get请求
//        System.out.println("响应了ajax请求");
        String proid = req.getParameter("proid");
        System.out.println(proid);
        String name = "默认是无数据";
        //访问dao，查询数据库
        if (proid!=null&&!"".equals(proid.trim())){
            ProvinceDao dao = new ProvinceDao();
           Province province = dao.queryProvinceNameById(Integer.valueOf(proid));
            ObjectMapper objectMapper = new ObjectMapper();
            name = objectMapper.writeValueAsString(province);
        }
        //使用HttpServletResponse输出数据
//        resp.setContentType("text/html;charset=utf-8");

//        把获取到的数据，通过网络传给ajax中的异步对象，响应结果数据
//        指定服务器端（servlet）返回给浏览器的是json格式的数据
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.println(name);
        pw.flush();
        pw.close();
    }
}

配置servlet

    <servlet>
        <servlet-name>QueryProvinceServlet</servlet-name>
        <servlet-class>com.cjh.controller.QueryProvinceServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>QueryProvinceServlet</servlet-name>
        <url-pattern>/queryProvince</url-pattern>
    </servlet-mapping>

4，创建entity

public class Province {
    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;

    public Integer getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

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

    public String getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }

    public String getShenghui() {
        return shenghui;
    }

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

5，运行结果

在这里插入图片描述

6，总结

Ajax最重要的是他的核心对象XMLHttpRequest除了上面讲得使用步骤外，还有一些要注意的地方：

XMLHttpRequest核心对象有两个属性：readyState（ajax请求过程中的状态变换，4表示从服务器返回数据，请求成功）status（网络通信状态200表示通信成功，请求成功；404网络资源没找到）
Ajax的异步和同步：XMLHttpRequest可以设置异步或者同步：在使用核心对象的第三步的初始化核心对象的参数的时候可以设置是否同步。xmlHttp.open(get,url,true)最后一个参数为true表示异步，false表示同步。异步的时候不用等到异步请求执行完毕，就可以执行其他代码。同步则需等待请求执行完毕。
Ajax进行异步交互的时候常使用json来交换数据。使用Jackson工具对json进行处理。
```
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(province);
```
这样在前端就可以接收到符合json格式的字符串了，使用异步请求对象xmlHttp获取servlet传递过来的数据：xmlHttp.responseText; 然后使用JSON.parse()方法解析为js对象
```
var province = JSON.parse(xmlHttp.responseText);
```
然后使用province对象，取出里面的数据，渲染在页面上。

进击的Coders

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax解析以及应用示例

初始Ajax1，什么是AjaxAjax是asynchronous JavaScript And Xml (异步的JavaScript和XML)。是一种异步请求技术，能够在不重新加载整个网页的情况下对网页的部分进行更新，目前应用非常广泛。2，Ajax的使用步骤创建异步对象var xmlHttp = new XMLHttpRequest();绑定事件xmlHttp.onreadystatechange = function(){};初始化异步对象参数xmlHttp.open(get,u
复制链接

扫一扫

专栏目录