当前位置： 首页 > news >正文

阶段五-Day03-Ajax

news 文章来源：https://blog.csdn.net/m0_59163770/article/details/133581355 2025/4/20 19:03:24

一、JavaWeb中路径的说明

1. JavaWeb中的路径

在JavaWeb中, 路径分为相对路劲和绝对路径两种:

相对路径: 

        ./  表示当前目录

        ../  表示当前文件所在目录的上一级目录

绝对路径:

        完整的路径名

2. 在JavaWeb中/的不同意义

/斜杠如果被浏览器解析,得到的是

协议+本地ip+端口号

http://ip:port/

/斜杠如果被服务器解析, 得到是

协议+本地ip+端口号+项目路径

http://ip:port/工程路径/

  • 特殊情况：response.sendRedirect(“”)；服务器不解析,把斜杆发给浏览器去解析，得到http://ip:port/

二、AJAX

1. 之前浏览器和服务器交互的请求发送方式

浏览器和服务器进行数据交互的基本流程为： http://localhost:8080/Ajax_war_exploded/PathServlet

1.浏览器发起http请求

2.服务器收到请求,对请求进行解析,创建请求和响应对象

3.服务器根据请求解析结果调用对应的资源处理请求

4.服务器将处理结果响应给浏览器

5.浏览器收到响应结果,对结果数据进行解析

6.浏览器将解析后的数据展示在页面

浏览器发送请求的方式:

1.在浏览器地址栏输入url地址后回车

2.使用超链接

3.使用form表单

4.在js代码中使用window.location.href(在当前页面打开,window可以省略)

5.在js代码中使用windows.open()(在新标签打开,window可以省略)

2.浏览器发送请求访问服务器方式存在的问题

新的响应结果会覆盖之前的内容

3. Ajax的介绍和使用

3.1 介绍

概念：

Ajax(Asynchronous Javascript And XML)是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。

作用：

实现了在当前网页中显示新的响应内容。（不会覆盖掉原有内容）

特点：

  1. 一种新的让浏览器发起http请求的技术

  2. 使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示

  3. Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术

  4. 简单易用

3.2 ajax发送请求
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--传统请求:1.地址栏发起请求2.超链接发起请求3.location.href发起请求4.form发起请求5.window.open()方法(是在新标签页打开)缺点: 发起请求后,响应回来的内容覆盖原有的页面简单理解: document对象直接发起的请求, 响应回来什么内容,页面就会显示什么内容ajax请求:页面不变的情况下,发送请求,获取响应数据,将响应数据完成局部刷新ajax属于js的技术简单理解:xhr对象发起请求,页面不变--><script>function f() {//1.创建xhr对象var xhr = new XMLHttpRequest();//2.开启连接xhr.open("get","AServlet");//3.发起请求xhr.send();//4.监听readyState(状态码)的变化事件//,一旦readyState发生变化,启动函数执行xhr.onreadystatechange = function () {/** readyState:*   0:创建了xhr对象,还没有连接*   1:建立了连接,还没有发送请求*   2:发送了请求,服务端开始处理*   3:服务器响应,但没有响应完(通常仅完成了响应头中数据的处理)*   4:服务器完成了完整的响应* *///readyState为4，服务端完整响应。 响应状态码为200，成功响应。if (xhr.readyState == 4 && xhr.status == 200){//xhr.responseText(响应回来的文本)console.log(xhr.responseText);document.getElementById("sp").innerText = xhr.responseText;}}}</script>
</head>
<body>
<h3>ajax01.html</h3>
<button onclick="f()">请求</button>
<br>
<span id="sp"></span>
</body>
</html>

定义一个方法:

1.创建ajax请求对象

var xhr = new XMLHttpRequset()

2.开启连接

请求方式,请求路径

xhr.open("get","testServlet")

3.发起请求

xhr.send()

4.监听就绪状态码的变化

xhr.onreadystatechange = function(ev){

        if (xhr.readyState == 4 && xhr.status == 200){

                //获取响应数据

                var responseText = xhr.responseText

        }

}

4. 同步与异步请求

同步请求：

  • 发送请求后，一直等待服务端的响应，获取到服务端响应后，再执行其他的逻辑代码。

    • 浏览器直接发起

      • 在浏览器地址栏输入url，发起请求

      • 使用超链接，发起请求

      • 使用form表单，发起请求

      • 在js代码中使用window.location.href，发起请求

    • ajax发起同步请求，有xhr对象发起请求

      • ajax与其他方式发送同步请求的区别: ajax可以局部刷新(由xhr对象发送请求)，其他的请求方式会刷新整张页面

异步请求：

  • 发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。

5. Ajax的同步和异步设置

Ajax执行步骤：

  1. 创建Ajax请求对象

  2. 建立连接

  3. 发送连接

  4. 监听状态变化及结果处理

设置ajax的同步异步：

通过设置Ajax请求对象open方法的async参数的值：

true：表示异步，默认值

false：表示同步

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f() {location.href = "CServlet";}//ajax发起同步请求function f1() {var xhr = new XMLHttpRequest();//默认是true,异步请求xhr.open("get","CServlet",false);xhr.send();var responseText1 = xhr.responseText;console.log("同步请求")console.log(responseText1);}//ajax发起异步请求function f2() {var xhr = new XMLHttpRequest();//默认是true,异步请求xhr.open("get","CServlet");xhr.send();//监听xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200){var responseText2 = xhr.responseText;console.log(responseText2);}}console.log("异步请求");}</script>
</head>
<body>
<!--同步请求: 浏览器发送请求之后,一直等待服务器的响应,服务器响应完成后,才继续向下执行比如:1.地址栏直接发起的请求2.超链接发起请求3.form表单发起请求4.location.href发起请求ajax也可以发送同步请求: 但是页面不变,局部刷新异步请求: 浏览器发送请求后,不需要等待服务器的响应,继续执行其他代码,服务器响应后会有结果可以是函数的执行
-->
<a href="CServlet">超链接</a>
<hr>
<form action="CServlet"><input type="submit">
</form>
<hr>
<button onclick="f()">location.href</button>
<hr>
<a href="javascript:void(0)" onclick="f1()">ajax同步请求</a>
<hr>
<a href="javascript:void(0)" onclick="f2()">ajax异步请求</a>
</body>
</html>

6. Ajax的get请求和post请求及请求参数

6.1 Ajax设置get请求方式及携带请求参数：

Ajax的get请求的请求参数是直接写在请求路径后面

使用?拼接,多个参数中间使用&隔开

HelloServlet?name=lucy&age=18

6.2 Ajax设置post请求方式及携带请求参数：

Ajax的post请求传递参数是需要单独写在send方法中，而且需要设置请求头，该请求头表示此次请求是以表单的方式提交

 //请求方式是post请求，则需要设置请求头，这个请求头就表示是以表单方式提交数据
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send("name=lily&age=15");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f1() {//get方法传递参数var xhr = new XMLHttpRequest();xhr.open("get","DServlet?uname=zs&pwd=123");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}}}function f2() {//post方法传递参数var xhr = new XMLHttpRequest();xhr.open("post","DServlet");//必须设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")xhr.send("uname=ww&pwd=456");xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}}}</script>
</head>
<body>
<body>
<button onclick="f1()">get请求及传参</button>
<br>
<button onclick="f2()">post请求及传参</button>
<br>
<form action="aa" method="post"><input type="submit">
</form>
</body>
</body>
</html>

7. Ajax请求的响应数据格式及处理（重点）

使用json数据格式（特殊格式的字符串, 和js对象格式一致），它比较方便简单，而且也有好用的json工具包。json格式在浏览器可以直接解析成对象格式

Java对象的json字符串格式：

  • 普通Java对象的json字符串格式：

    User user = new User(1, "张三丰", 18, "北京");
​
{"id":1, "name":"张三丰", "age": 18, "address":"北京"}

  • Map集合对应的json字符串格式：

    Map<String, Object> map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");
​
{"key1":"value1", "key2":"value2"}

  • List集合对应的json字符串格式：

    List<User> list = new ArrayList<>();
list.add(new User(1, "赵敏", 18, "北京"));
list.add(new User(2, "周芷若", 28, "上海"));
​
[{"id":1, "name":"赵敏", "age":18, "address":"北京"},{"id":2, "name":"周芷若", "age":28, "address":"上海"}
]

Ajax获取响应数据的方式：var 变量名 = xhr.responseText;

  1. 获取到的是普通字符串数据：直接使用

  2. 获取到的是json格式的字符串：使用js的eval()函数，将json格式的字符串转换为js对象

三、 jQuery封装的Ajax的使用

  • 第一种：

    $.ajax({type:“请求方式”,url:“请求地址”，data:“请求参数”，dataType:"服务器返回的数据类型"success:fundction(data){ //成功且完整响应自动调用的函数},error: function(){ //出现错误自动调用的函数}
})

    dataType：用来指定服务器返回来的数据类型，可选值有如下：

    • xml：表示服务器返回的是xml内容

    • html：表示服务器返回的是html文本内容

    • script：表示服务器返回的是script文本内容

    • json：表示服务器返回的是json内容（重点）

    • jsonp：表示使用jsonp形式调用函数，早期我们用它来解决跨域问题

    • text：表示服务器返回的是纯文本字符串

  • 第二种：

    • $.get(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

    • $.post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

回调函数主要是用来处理服务器对我们的响应结果。

返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。

  • 第三种：

    • $.getJSON("请求地址", "请求参数", "回调函数")

这种方式要求服务器返回的数据类型得是json格式的。

  • 第四种：

    • $.getScript("请求地址", "回调函数")

    这种方式是发送ajax请求获取一个js文件。

相关文章：

阶段五-Day03-Ajax

一、JavaWeb中路径的说明 1. JavaWeb中的路径 在JavaWeb中, 路径分为相对路劲和绝对路径两种: 相对路径: ./ 表示当前目录 ../ 表示当前文件所在目录的上一级目录 绝对路径: 完整的路径名 2. 在JavaWeb中/的不同意义 /斜杠如果被浏览器解析,得到的是 协议本地ip端口号…...

编程日记 2023/10/9 22:33:09

EPOLL单线程版本 基于reactor 的 httpserver文件下载 支持多个客户端同时处理

之前写了一个httpserver的问价下载服务器 如果有多个客户端请求过来只能串行处理必须得等当前的操作完成之后才会处理 另外还存在 文件大的时候 会出错 处理不了 原因就是 sendfile是在一个while循环中处理的 当调用send失败返回-1之后 就 结束了 而一般来讲 se…...

编程日记 2023/10/9 22:32:08

uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装。 <template><view class"diygw-modal basic" v-if"showPrivacy" :class"showPrivacy?show:" style"z-index: 1000000"><view class"diygw-dialog diygw-dialog-modal bas…...

编程日记 2023/10/9 22:31:07

【Node.js】NPM 和 package.json

NPM npm 是 Node.js 的包管理工具&#xff0c;基于命令行&#xff0c;用于安装、升级、移除、管理依赖项。 常用命令&#xff1a; npm init&#xff1a;初始化一个新的 npm 项目&#xff0c;创建 package.json 文件。&#xff08;括号里为默认值&#xff09; description&am…...

编程日记 2023/10/9 22:28:04

周总结【java项目】

项目进度&#xff1a; 学习了JavaFX&#xff0c;下载了sceneBuilder辅助工具构建窗口&#xff08;目前建立了登陆&#xff0c;注册&#xff0c;忘记密码的界面&#xff09;&#xff0c;然后是学习了MySQL的连接&#xff0c;现在的项目是刚连上数据库&#xff1b; 下一步&…...

编程日记 2023/10/9 22:27:02

《深度不确定条件下的决策：从理论到实践》PDF

制定未来计划时需要预测变化&#xff0c;尤其是制定长期计划或针对罕见事件的计划时。当这些变化存在高度不确定性的时候&#xff0c;这种预期就变得越来越困难。 今天给大家介绍的这本《深度不确定条件下的决策&#xff1a;从理论到实践》正是解决以上问题的良方。完整书籍文…...

编程日记 2023/10/9 22:26:00

【MySQL】表的基础增删改查

前面我们已经知道怎么来创建表了&#xff0c;接下来就来对创建的表进行一些基本操作。 这里先将上次创建的表删除掉&#xff1a; mysql> use test; Database changedmysql> show tables; ---------------- | Tables_in_test | ---------------- | student | -----…...

编程日记 2023/10/9 22:25:00

第11章 Redis（二）

11.11 Redis 哨兵机制和集群有什么区别 难度：★★★ 重点：★★ 白话解析 前面的题目都是Redis的原理，接下来就是实际使用的问题了，首先Redis为了保证高可用，在微服务场景下必须是部署集群的，而Redis的集群部署通常就两种方式：主从和Redis Cluster。 参考答案 1、主从…...

编程日记 2023/10/9 22:23:59

mybatis配置entity下不同文件夹同类型名称的多个类型时启动springboot项目出现TypeException源码分析

记录问题&#xff1a;当配置了 mybatis.type-aliases-packagecom.runjing.erp.entity 配置项时&#xff0c;如果entity文件夹下存在不同子文件夹下的同名类型时&#xff0c;mybatis初始化加载映射时会爆出org.apache.ibatis.type.TypeException&#xff1a; The alias TestDemo…...

编程日记 2023/10/9 22:21:56

淘宝商品评论数据分析接口，淘宝商品评论接口

淘宝商品评论数据分析接口可以通过淘宝开放平台API获取。 通过构建合理的请求URL&#xff0c;可以向淘宝服务器发起HTTP请求&#xff0c;获取商品评论数据。接口返回的数据一般为JSON格式&#xff0c;包含了商品的各种评价信息。 获取到商品评论数据后&#xff0c;可以对其进…...

编程日记 2023/10/9 22:20:55

RK3288 android7.1 修改双屏异触usb tp触摸方向

一&#xff0c;问题描述&#xff1a; android机器要求接两个屏&#xff08;lvdsmipi&#xff09;两个usb tp要实现双屏异触。由于mipi的方向和lvds方向转成一样的了。两个usb tp的方向在异显示的时候也要作用一样。这个时候要根据pid和vid修改触摸上报的数据。usb tp有通用的触…...

编程日记 2023/10/9 22:19:54

软考 系统架构设计师系列知识点之软件架构风格（8）

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之软件架构风格&#xff08;7&#xff09; 这个十一注定是一个不能放松、保持“紧”的十一。由于报名了全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff0c;11月4号就要考试&#xff0c;因此…...

编程日记 2023/10/9 22:18:53

ubuntu安装ssh

安装 OpenSSH 服务器&#xff08;如果尚未安装&#xff09;&#xff1a; apt-get update && apt-get upgrade -y sudo apt-get install -y openssh-server 检查 SSH 服务是否正在运行&#xff1a; sudo service ssh status 如果 SSH 服务未运行&#xff0c;请通过以…...

编程日记 2023/10/9 22:17:52

webpack不同环境下使用CSS分离插件mini-css-extract-plugin

1.背景描述 使用mini-css-extract-plugin插件来打包css文件&#xff08;从css文件中提取css代码到单独的文件中&#xff0c;对css代码进行代码压缩等&#xff09;。 本次采用三个配置文件&#xff1a; 公共配置文件&#xff1a;webpack.common.jsdev开发环境配置文件&#x…...

编程日记 2023/10/9 22:16:51

[MongoDB]-权限验证管理

[MongoDB]-权限验证管理 senge | 2023年9月 背景说明&#xff1a;现有两套MongoDB副本集群给开发人员使用时未开启认证。 产生影响&#xff1a;用户若输入账号以及密码则会进行校验&#xff0c;但用户可以在不输入用户名和密码的情况下也可直接登录。 倘若黑客借此进行攻击勒索…...

编程日记 2023/10/9 22:15:50

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架&#xff0c;其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集&#xff0c;本文主要描述bootstrapjs的开发环境搭建。 如上所示&#xff0c;使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test…...

编程日记 2023/10/9 22:13:48

远程实时监控管理：5G物联网技术助力配电站管理

配电站远程监控管理系统是基于物联网和大数据处理等技术的一种创新解决方案。该系统通过实时监测和巡检配电场所设备的状态、环境情况、安防情况以及火灾消防等信息&#xff0c;实现对配电站的在线实时监控与现场设备数据采集。 配电站远程监控管理系统通过回传数据进行数据系…...

编程日记 2023/10/9 22:12:47

ubuntu 23.04安装中文输入法

使用ubuntu 23.04安装中文输入法&#xff0c;尝试了最新的搜狗&#xff0c;谷歌拼音&#xff0c;fcitx的原始拼音&#xff0c;最终的结果就是使用了谷歌拼音。 搜狗输入法&#xff1a;好用&#xff0c;但是用了没几天发现各种闪退&#xff0c;一打开就闪烁&#xff0c;根本无法…...

编程日记 2023/10/9 22:11:46

java：解析json的几种方式

Java是一种流行的编程语言&#xff0c;它提供了很多实用的库和工具&#xff0c;在处理JSON数据时也不例外。在本文中&#xff0c;我们将介绍Java中如何解析JSON数据。 JSON是一种轻量级的数据交换格式&#xff0c;它已经成为Web应用程序中最流行的数据格式之一。Java提供了许多…...

编程日记 2023/10/9 22:10:45

pytorch_神经网络构建1

文章目录 pytorch简介神经网络基础分类问题分析:逻辑回归模型逻辑回归实现多层神经网络多层网络搭建保存模型 pytorch简介 为什么神经网络要自定义数据类型torch.tensor? tensor可以放在gpu上训练,支持自动求导,方便快速训练,同时支持numpy的运算,是加强版,numpy不支持这些 为…...

编程日记 2023/10/9 22:09:45

Android 多线程并发详解

一&#xff0c;基础概念 1.1什么是CPU 中央处理器&#xff08;CPU&#xff09;&#xff0c;是电子计算机的主要设备之一&#xff0c;电脑中的核心配件。其功能主要是解释计算机指令以及处理计算机软件中的数据。CPU是计算机中负责读取指令&#xff0c;对指令译码并执行指令的…...

编程日记 2023/10/9 22:08:43

系统架构设计：8 论软件架构风格

目录 一 软件架构风格 1 数据流风格 （1）批处理风格 （2）管道-过滤器风格...

编程日记 2023/10/9 22:06:41

[Elasticsearch] 邻近匹配 (一) - 短语匹配以及slop参数

本文翻译自Elasticsearch官方指南的Proximity Matching一章。 邻近匹配(Proximity Matching) 使用了TF/IDF的标准全文搜索将文档&#xff0c;或者至少文档中的每个字段&#xff0c;视作"一大袋的单词"(Big bag of Words)。match查询能够告诉我们这个袋子中是否包含了…...

编程日记 2023/10/9 22:05:40

Bootstrap中让元素尽可能往父容器的左侧靠近或右侧造近(左浮动和右浮动)

在Bootstrap中&#xff0c;float-left是一个用于浮动元素的CSS类。它的作用是将一个元素向左浮动&#xff0c;使其在父容器内尽可能靠近左侧边缘&#xff0c;同时允许其他元素在其右侧排列。 使用float-left类可以创建多列布局&#xff0c;将元素水平排列在一行上&#xff0c;…...

编程日记 2023/10/9 22:04:39

网络流量安全分析-工作组异常

在网络中&#xff0c;工作组异常分析具有重要意义。以下是网络中工作组异常分析的几个关键点&#xff1a; 检测网络攻击&#xff1a;网络中的工作组异常可能是由恶意活动引起的&#xff0c;如网络攻击、病毒感染、黑客入侵等。通过对工作组异常的监控和分析&#xff0c;可以快…...

编程日记 2023/10/9 22:03:38

Flink之Watermark源码解析

1. WaterMark源码分析 在Flink官网中介绍watermark和数据是异步处理的,通过分析源码得知这个说法不够准确或者说不够详细,这个异步处理要分为两种情况: watermark源头watermark下游 这两种情况的处理方式并不相同,在watermark的源头确实是异步处理的,但是在下游只是做的判断,这…...

编程日记 2023/10/9 22:02:36

基于支持向量机SVM和MLP多层感知神经网络的数据预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 一、支持向量机&#xff08;SVM&#xff09; 二、多层感知器&#xff08;MLP&#xff09; 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .…...

编程日记 2023/10/9 22:01:35

【微服务】RedisSearch 使用详解

目录 一、RedisJson介绍 1.1 RedisJson是什么 1.2 RedisJson特点 1.3 RedisJson使用场景 1.3.1 数据结构化存储 1.3.2 实时数据分析 1.3.3 事件存储和分析 1.3.4 文档存储和检索 二、当前使用中的问题 2.1 刚性数据库模式限制了敏捷性 2.2 基于磁盘的文档存储导致瓶…...

编程日记 2023/10/9 22:00:33

第三章 栈、队列和数组

第三章 栈、队列、数组 栈栈的基本概念栈的顺序实现栈的链接实现栈的简单应用和递归 队列队列的基本概念队列的顺序实现队列的链接实现 数组数组的逻辑结构和基本运算数组的存储结构矩阵的压缩存储 小试牛刀 栈和队列可以看作是特殊的线性表&#xff0c;是运算受限的线性表 栈 …...

编程日记 2023/10/9 21:58:31

使用GitLab CI/CD 定时运行Playwright自动化测试用例

创建项目并上传到GitLab npm init playwright@latest test-playwright # 一路enter cd test-playwright # 运行测试用例 npx playwright test常用指令 # Runs the end-to-end tests. npx playwright test# Starts the interactive UI mode. npx playwright...

编程日记 2023/10/9 21:55:27