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

Etui۹(･༥･´)و ̑̑

已于 2023-04-08 18:00:03 修改

阅读量1.1k

点赞数

分类专栏： Ajax 学习笔记文章标签： JSP Servlet Ajax 异步请求 Java

于 2022-04-08 08:36:27 首次发布

本文链接：https://blog.csdn.net/m0_47015897/article/details/124032247

版权

学习笔记同时被 2 个专栏收录

43 篇文章 8 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

【Ajax】Ajax学习笔记

1、全局刷新与局部刷新

全局刷新：整个浏览器覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。
- 全局刷新的原理：
  
  (1) 必须由浏览器亲自向服务器发送请求协议包。
  
  (2) 这个行为导致服务器直接将‘响应包’发送到浏览器内存中。
  
  (3) 这个行为导致浏览器内存中原有内容被覆盖掉。
  
  (4) 这个行为导致浏览器在展示数据时，只有相应数据可以展示。
局部刷新：在浏览器的内部，发起请求，获取数据，改变也买那种的部分内容。其余的页面无需加载和渲染。网络中数据传输量少，给用户的感受好。
- 局部刷新的原理：
  
  (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格式容易理解。
- JSON格式数据在多种语言中，比较容易处理。使用Java、JavaScript读写JSON格式的数据都比较容易。
- JSON格式数据它占用的空间，在网络中传输快，用户的体验好。
JSON的工具库：GSON（Google）、FastJSON（阿里）、Jackson、json-lib

6、Ajax应用实例

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

(1) 目录结构

在这里插入图片描述

(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() {
    }
}