玩转原生态AJAX

最新推荐文章于 2024-04-27 20:10:03 发布

贫僧洗发爱飘柔

最新推荐文章于 2024-04-27 20:10:03 发布

阅读量242

点赞数

分类专栏：前端 JavaScript 文章标签： ajax javascript json java

本文链接：https://blog.csdn.net/qq_45637894/article/details/109373884

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

文章目录

一、什么是局部刷新和全局刷新
- 1.全局刷新
- 2.局部刷新
二、什么是AJAX？
三、Ajax实现通过省份id查询省份的名称

一、什么是局部刷新和全局刷新

1.全局刷新

浏览器整个页面刷新（整个页面被新的数据覆盖）

在这里插入图片描述

2.局部刷新

不刷新整个页面，只刷新页面的一部分。

在这里插入图片描述

二、什么是AJAX？

  AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。  
  AJAX 实现局部刷新的一种技术。AJAX 是一种用于创建快速动态网页的技术。

Ajax的原理简单来说：通过浏览器的javascript对象XMLHttpRequest(Ajax引擎)对象向服务器发送异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出，同时Ajax引擎也接收服务器返回响应的数据，所以不会导致浏览器上的页面全部刷新。

1. 同步和异步的区别

同步方式发送请求：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
异步方式发送请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

2.原生态的Ajax的开发步骤

创建Ajax引擎对象(XMLHttpRequest对象）
为对象绑定事件（设置回调函数，处理服务器返回来的数据）
设置请求路径和请求参数
发送请求
接受服务器响应的数据

3.核心对象XMLRequest

在这里插入图片描述

①readyState属性（Ajax引擎通信状态码）

0:请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
2: 异步对象发送请求， xmlHttp.send()
3: 异步对象接收应答数据从服务端返回数据。XMLHttpRequest 内部处理。
4: 异步请求对象已经将数据解析完毕。此时才可以读取数据。

每当 readyState 属性改变时，就会调用回调函数（一共会调用4次）

②status属性（http通信状态码）

200：ok
404:未找到页面

③初始化请求参数(open方法）

    Ajax对象.open(method,url,async)；

method：请求的类型；GET 或 POST
url：服务器的 servlet 地址
async：true（异步）或 false（同步）

④接收服务器响应回来的数据

 XMLHttpRequest对象.responseText ;   获得字符串形式的响应数据
 XMLHttpRequest对象.responseXML ;    获得 XML 形式的响应数据

三、Ajax实现通过省份id查询省份的名称

在这里插入图片描述

前端页面（通过Ajax发起请求）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>数据表</title>
      <script>
          function doBtn() {
              var pid = document.getElementById("id").value;
              var xmlHttpRequest = new XMLHttpRequest();
              //创建异步duixiang
              //绑定事件
              xmlHttpRequest.onreadystatechange=function () {
                  if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                   var respText =  xmlHttpRequest.responseText;
                   // 将json对象转换为java对象
                   var jsonObj=eval("("+respText+")");
                   document.getElementById("name").value=jsonObj.name;
                   document.getElementById("jiancheng").value=jsonObj.jiancheng;
                   document.getElementById("shenghui").value=jsonObj.shenghui;
                  }
              }
              <!-- 初始化参数-->

              xmlHttpRequest.open("get","ajaxServlet?id="+pid,true);
              //发送请求
              xmlHttpRequest.send();
          }
      </script>
  </head>
  <body>
   <table border="1px" align="center">
      <tr>
        <td>省份id</td>
        <td><input type="text" id="id"/>
        <input type="button"  value="搜索" onclick="doBtn()"/></td>
      </tr>
      <tr>
        <td>省名</td>
        <td><input type="text" id="name"></td>
      </tr>
     <tr>
       <td>省份简称</td>
       <td><input type="text" id="jiancheng"/> </td>
     </tr>
     <tr>
       <td>省会</td>
       <td><input type="text" id="shenghui"/> </td>
     </tr>
   </table>
  </body>
</html>

服务端Servlet实现类

public class AjaxServlet extends HttpServlet {
     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         String id = request.getParameter("id");
         ProvinceDao provinceDao = new ProvinceDao();
         Province province = provinceDao.find(id);
         //将java对象转换为json格式的字符串
         ObjectMapper objectMapper = new ObjectMapper();
         String string = objectMapper.writeValueAsString(province);
         response.setContentType("application/json;charset=utf-8");
         PrintWriter writer = response.getWriter();
         writer.println(string);
         writer.flush();
         writer.close();
     }
}

dao层，查询数据

public class ProvinceDao {


    public Province find(String id) {
        Connection connection=null;
        PreparedStatement statement=null;
        Province province=null;
        try {
             connection = JdbcUtil.getConnection();
            String sql="select name,jiancheng,shenghui from province  where id=?";
            statement = connection.prepareStatement(sql);
            statement.setString(1,id);
            ResultSet resultSet = statement.executeQuery();
            while (resultSet.next()){
                String name = resultSet.getString("name");
                String jiancheng = resultSet.getString("jiancheng");
                String shenghui = resultSet.getString("shenghui");
                province = new Province(null, name, jiancheng, shenghui);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return province;
    }
}

实体类以及jdbc工具类就不展示了

贫僧洗发爱飘柔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
玩转原生态AJAX

文章目录一、什么是局部刷新和全局刷新1.全局刷新2.局部刷新二、什么是AJAX？1.核心对象XMLRequest2. 同步和异步的区别3.AJAX的原理一、什么是局部刷新和全局刷新1.全局刷新浏览器整个页面刷新（整个页面被新的数据覆盖）2.局部刷新不刷新整个页面，只刷新页面的一部分。二、什么是AJAX？ AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 实现局部刷新的一种技术。AJAX 是一
复制链接

扫一扫