【Ajax】Ajax学习笔记(基础用法)

- 日理万妓 2023-10-08 15:17 2阅读 0赞

### 【Ajax】Ajax学习笔记 ###

#### 1、全局刷新与局部刷新 ####

*  全局刷新：整个浏览器覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16]
    
     *  全局刷新的原理：
        
        (1) 必须由浏览器亲自向服务器发送请求协议包。
        
        (2) 这个行为导致服务器直接将‘响应包’发送到浏览器内存中。
        
        (3) 这个行为导致浏览器内存中原有内容被覆盖掉。
        
        (4) 这个行为导致浏览器在展示数据时，只有相应数据可以展示。
 *  局部刷新：在浏览器的内部，发起请求，获取数据，改变也买那种的部分内容。其余的页面无需加载和渲染。网络中数据传输量少，给用户的感受好。  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16 1]
    
     *  局部刷新的原理：
        
        (1)不能由浏览器发送请求给服务器。
        
        (2) 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求。
        
        (3) 这个行为导致服务器端直接将“响应包”发送至脚本对象内存中。
        
        (4) 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有受到任何影响。
        
        (5) 这个行为导致浏览器在展示数据的同时，展示原有数据和相应数据。

#### 2、Ajax简介 ####

*  Ajax：Asynchronous JavaScript And XML（异步JavaScript和XML）
 *  Ajax是一种无需重新加载整个网页的情况下，能够更新部分页面内容的新方法，不是一种语言。Ajax包含的技术主要有JavaScript、DOM、CSS、XML等。核心是JavaScript和XML。
 *  Ajax不仅需要前端的技术，同时需要后端的配合。服务器需要提供数据，数据是Ajax请求的响应结果。

#### 3、异步请求对象XMLHttpRequest ####

*  在局部刷新时，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器发起请求并接收相应数据。这个对象叫做异步请求对象。
 *  全局刷新是同步行为，局部刷新是异步行为（浏览器数据没有全部更新）。
 *  这个异步对象用于在后台与服务器交换数据。XMLHttpRequest就是我们说的异步对象。
 *  异步对象的作用：
    
     *  在不重新加载页面的情况下更新网页。
     *  在页面已加载后向服务器请求数据。
     *  在页面已加载后从服务器接收数据。
 *  注：
    
     *  所有现代浏览器都内建了XMLHttpRequest对象。通过一些简单的JavaScript代码，我们就可以创建XMLHttpRequest对象。
     *  \*\*异步不等同于多线程，JavaScript不支持多线程操作！ \*\*
 *  XMLHttpRequest对象的三个重要属性
    
     *  onreadystatechange：一个js函数名或直接定义函数，每当readyState属性改变时，就会调用该函数。
     *  readyState：存有XMLHttpRequest的请求状态。从0~4的变化。
        
         *  0：请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
         *  1：初始化异步请求对象，xmlHttp.open(请求方式，请求地址，true)
         *  2：异步对象发送请求，xmlHttp.send()
         *  3：异步对象接收应答数据从服务端返回数据。XMLHttpRequest内部处理。
         *  4：异步请求对象已经将数据解析完毕。此时才可以读取数据。
     *  status属性(返回的状态码) ，常用的如下：
        
         *  200：“OK”
         *  404：未找到页面

#### 4、Ajax异步实现步骤 ####

##### (1) 创建异步对象 #####

var xmlHttp = new XMLHttpRequest();

##### (2) 绑定onreadystatechange事件 #####

*  当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发(回调)onreadystatechange事件。此事件可以指定一个处理函数。我们通常通过判断XMLHttpRequest对象的状态，获取服务端返回的数据。
 *  语法格式：
    
        xmlHttp.onreadystatechange = function() {
              
            if(xmlHttp.readyState === 4 && xmlHttp.status === 200) {
              
            	// 处理服务其返回的数据
            }
        }

##### (3) 初始化请求参数 #####

*  方法：open(method, url, async): 初始化异步请求对象。
 *  参数说明：
    
     *  method：请求的类型（get或post）
     *  url：服务器的servlet地址
     *  async：true(异步)或false(同步)
 *  例：
    
        xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true);

##### (4) 发送请求 #####

xmlHttp.send();

##### (5) 接受服务端返回的数据 #####

*  如需获得来自服务器的响应数据，可使用XMLHttpRequest对象的responseText或responseXML属性。
    
     *  responseText：获得字符串形式的响应数据
     *  responseXML：获得XML形式的响应数据

#### 5、JSON数据格式 ####

*  可参考：[JSON 教程 \_JSON 教程\_JavaScript\_教程\_教程\_JSON在线解析及格式化验证 - JSON.cn][JSON _ _JSON _JavaScript_JSON_ - JSON.cn]
 *  为什么使用JSON格式：
    
     *  JSON格式容易理解。
     *  JSON格式数据在多种语言中，比较容易处理。使用Java、JavaScript读写JSON格式的数据都比较容易。
     *  JSON格式数据它占用的空间，在网络中传输快，用户的体验好。
 *  JSON的工具库：GSON（Google）、FastJSON（阿里）、Jackson、json-lib

#### 6、Ajax应用实例 ####

*  该案例涉及到数据库、JDBC方面的知识，由于本文主要介绍Ajax的使用，故将从数据库获取数据的代码省略。

##### (1) 目录结构 #####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_10_color_FFFFFF_t_70_g_se_x_16]

##### (2) index.jsp ——异步的实现代码在这里 #####

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>$Title$</title>
        <script type="text/javascript">
          var searchProvince = function () {
          
            // 需要查询的省份id
            var id = document.getElementById("provinceId").value;
            // 创建异步对象
            var xmlHttp = new XMLHttpRequest();
            // 绑定事件
            xmlHttp.onreadystatechange = function () {
          
              if(xmlHttp.readyState === 4 && xmlHttp.status === 200) {
          
                var result = xmlHttp.responseText;
                // alert(result);
                // 响应的字符串转换为一个JSON对象
                var jsobj = eval("(" + result + ")");
                document.getElementById("provinceName").innerText = jsobj.name;
                document.getElementById("provinceAlias").innerText = jsobj.jiancheng;
                document.getElementById("provincial").innerText = jsobj.shenghui;
              }
            }
    
            // 初始异步对象的请求参数
            /*
                true: 异步处理请求，使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其他操作。
                false: 同步，异步对象必须处理完成请求，从服务端获取数据后，才能执行send之后的代码。任意时刻只能执行一个异步请求。
                注：异步不等同于多线程，JavaScript是不支持多线程的！
             */
            xmlHttp.open("get", "searchProvince?provinceId=" + id, true);
            // 转型异步操作
            xmlHttp.send();
    
            // alert("send之后的代码！");
          }
        </script>
      </head>
      <body>
      <center>
        <table border="2">
          <tr>
            <td>省份编号</td>
            <td><input type="text" id="provinceId"></td>
            <td><input type="button" onclick="searchProvince()" value="查询"></td>
          </tr>
          <tr>
            <td>省份名称</td>
            <td colspan="2"><span id="provinceName"></span></td>
          </tr>
          <tr>
            <td>省份简称</td>
            <td colspan="2"><span id="provinceAlias"></span></td>
          </tr>
          <tr>
            <td>省会名称</td>
            <td colspan="2"><span id="provincial"></span></td>
          </tr>
        </table>
      </center>
      </body>
    </html>

##### (3) SearchProvinceServlet.java ——服务器端处理代码 #####

package com.Etui.controller;
    
    import com.Etui.dao.ProvinceDao;
    import com.Etui.entity.Province;
    import com.fasterxml.jackson.databind.ObjectMapper;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    public class SearchProvinceServlet extends HttpServlet {
        
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            // 默认值，{}： 表示json格式的数据
            String json = "{}";
            ProvinceDao dao = new ProvinceDao();
            // 读取参数
            String provinceId = request.getParameter("provinceId");
    
            // 判断provinceId有值时，调用dao查询数据
    
            if(provinceId != null && provinceId.trim().length() != 0) {
        
                // System.out.println("测试 ====++++ provinceId ---》" + provinceId);
                // 根据id查询省名与简称
                Province province = dao.searchForId(provinceId);
    
                // 使用jackson将Province实例对象转换为JSON格式的数据
                ObjectMapper om = new ObjectMapper();
                json = om.writeValueAsString(province);
                // 测试
    //            System.out.println("查询结果" + province);
                response.setContentType("text/html;charset=utf-8");
                PrintWriter pw = response.getWriter();
                pw.print(json);
            }
    
        }
    }

##### (4) Province.java——Province类 #####

package com.Etui.entity;
    
    public class Province {
        
        private int id;
        private String name;
        private String jiancheng;
        private String shenghui;
    
        @Override
        public String toString() {
        
            return "Province{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", jiancheng='" + jiancheng + '\'' +
                    ", shenghui='" + shenghui + '\'' +
                    '}';
        }
    
        public void setId(int id) {
        
            this.id = id;
        }
    
        public void setName(String name) {
        
            this.name = name;
        }
    
        public void setJiancheng(String jiancheng) {
        
            this.jiancheng = jiancheng;
        }
    
        public void setShenghui(String shenghui) {
        
            this.shenghui = shenghui;
        }
    
        public int getId() {
        
            return id;
        }
    
        public String getName() {
        
            return name;
        }
    
        public String getJiancheng() {
        
            return jiancheng;
        }
    
        public String getShenghui() {
        
            return shenghui;
        }
    
        public Province(int id, String name, String jiancheng, String shenghui) {
        
            this.id = id;
            this.name = name;
            this.jiancheng = jiancheng;
            this.shenghui = shenghui;
        }
    
        public Province() {
        
        }
    }

##### (5) 运行结果 #####

![在这里插入图片描述][b5eba8b0085e4c80816177d497bbd752.gif]

#### Over！ ####

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a907551b479d473a8cfd313ec6c561f4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/17ab6f2d01b743259452bad2ecbd5705.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_20,color_FFFFFF,t_70,g_se,x_16
[JSON _ _JSON _JavaScript_JSON_ - JSON.cn]: https://www.json.cn/jiaocheng/co-1733.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d22d7167d1c44bc795ef03a64e13dac1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARXR1adu5KO-9peC8pe-9pcK0KdmIIMyRzJE=,size_10,color_FFFFFF,t_70,g_se,x_16
[b5eba8b0085e4c80816177d497bbd752.gif]: https://img-blog.csdnimg.cn/b5eba8b0085e4c80816177d497bbd752.gif