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

阶段五-Day03-Ajax

news 2025/10/18 20:12:59

一、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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/10/14 21:59:19

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/9/28 3:32:05

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/28 8:06:31

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/9/30 1:33:10

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/10/1 7:32:54

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/10/17 21:44:03

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/10/15 10:39:59

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/10/10 22:12:06

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

编程新知 2025/10/18 15:14:15