• Ajax使用流程

    Ajax在不刷新页面的情况下，进行页面局部更新。

    Ajax使用流程：

    1. 创建XmlHttpReqeust对象
    2. 发送Ajax请求
    3. 处理服务器响应

    1. 创建XmlHttpReqeust对象

    XmlHttpReqeust对象是Ajax的核心，使用该对象发起请求，接收响应

    不同的浏览器创建方式不相同：
    在这里插入图片描述

    2. 发送Ajax请求

    • xmlhttp.open()创建请求
    • xmlhttp.send()发送到服务器

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/882ae23293a34b57a167ec965ea899c6.png

    3. 处理服务器响应

    • xmlhttp.onreadystatechange()事件用来监听Ajax执行过程
    • xmlhttp.readyState属性说明XMLHttpRequest当前状态
      在这里插入图片描述
    • xmlhttp.status属性代表服务器响应状态码

    在这里插入图片描述

    JSON语法规则

    • 数据由key:value键值对描述
    • {}代表一个完整对象，拥有多个键值对
    • []保存数组，多个对象之间使用,分隔

    JSON是一种轻量级文本数据交换格式，javascript天然支持JSON。

    Ajax+JSON开发模式：
    在这里插入图片描述
    JSON序列化组件Jackson

    		<dependency>
			
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
            <version>2.12.3version>
        dependency>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    将对象序列化为JSON字符串：
    在这里插入图片描述
    在这里插入图片描述

    发起Ajax请求并处理响应
    在这里插入图片描述

    Ajax组件库-axios

    http://axios-js.com/zh-cn/docs/

    axios简化了Ajax的操作

    在这里插入图片描述

    axios发送GET请求：
    在这里插入图片描述

    axios发送POST请求：
    在这里插入图片描述
    在这里插入图片描述

    Ajax默认是异步的方式执行。

    Ajax同步和异步的区别：

    • 同步是在服务器未返回JSON前，JS程序一直处于阻塞状态
    • 异步是在服务器未返回JSON前，JS程序不阻塞，Ajax通过回调获取结果
      在这里插入图片描述
      在这里插入图片描述

    Ajax同步方式请求：
    在这里插入图片描述

    因为是同步方式，监听事件不会被执行，当代码顺序执行到这一行时，说明请求已经返回
    在这里插入图片描述

    Ajax实现二级联动菜单：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="/js/axios.js">script>
head>
<body>
    <select id="lv1" style="width:200px;height:30px">
        <option value="-1" selected>请选择option>
    select>
    <select id="lv2" style="width:200px;height:30px">select>

<script>
    var lv1=document.getElementById("lv1");
    axios.get("/channel",{params:{"level":1}})
    .then(function(response){
        var json=response.data;
        for(var i=0;i<json.length;i++){
            var channel=json[i];
            lv1.options.add(new Option(channel.name,channel.code))
        }
    }).catch(function(error){
    });
    var lv2=document.getElementById("lv2");
    lv1.onchange=function(){
        axios.get("/channel",{params:{"level":2,"parent":lv1.value}})
        .then(function(response){
            var json=response.data;
            lv2.length=0;//	清除二级菜单原来的数据
            for(var j=0;j<json.length;j++) {
                lv2.options.add(new Option(json[j].name,json[j].code))
            }
        }).catch(function(error){
        });
    }
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    package ajax.servlet;

import ajax.entity.Channel;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String level = req.getParameter("level");
        String parent = req.getParameter("parent");
        List<Channel> chlist=new ArrayList<>();
        if(level.equals("1")){
            chlist.add(new Channel("ai","人工智能"));
            chlist.add(new Channel("web","前端开发"));
        }else if(level.equals("2")){
            if(parent.equals("ai")){
                chlist.add(new Channel("dl","深度学习"));
                chlist.add(new Channel("cv","计算机视觉"));
                chlist.add(new Channel("nlp","自然语言处理"));
            }else if(parent.equals("web")){
                chlist.add(new Channel("html","超文本标记语言"));
                chlist.add(new Channel("css","级联样式表"));
                chlist.add(new Channel("js","javascript脚本"));
            }
        }
        ObjectMapper objectMapper=new ObjectMapper();
        String json=objectMapper.writeValueAsString(chlist);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().println(json);
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
  • 相关阅读:
    大数据之Kafka
    FPGA实现图像对比度自动调整，提供2套工程源码和技术支持
    element 封装弹窗
    HTTPS双向认证及密钥总结
    （生物信息学）R语言绘图初级——3-5分文章必备——小提琴图
    python笔记Ⅴ----元组、字典、集合
    华为防火墙基本原理工作方法总结
    Vue3+vite+cesium环境搭建
    df = pd.read_xxx(“xxx“, dtype=xxx)dtype问题
    sqlserver-sql 个人写过最长sql记录 192行
  • 原文地址：https://blog.csdn.net/nefss_/article/details/133764656