JavaWeb学习(1)(同步或异步请求、依赖jQuery简单实现Ajax技术)

news2024/12/12 22:21:38

目录

一、Web的基本流程与页面局部刷新。

(1)web开发时基本流程。

(2)页面的"全局刷新"与"局部刷新"。

二、Ajax技术。

(1)基本介绍。

(2)基本特点。

1、与服务器异步交互。

2、浏览器页面局部刷新。

(3)同步交互与异步交互?

1、同步交互。

2、异步交互。

三、Ajax常见应用情景。

(1)搜索框的"模糊搜索"显示。

(2)注册表单时用户名的验证:"是否被注册"情景。

(3)面试提问。

1、提问。这位同学请谈下你对ajax的理解?

2、回答。

四、jQuery。

(1)基本介绍。

(2)大致功能介绍。

1、兼容性。

2、选择器。

3、事件处理。

4、动画和效果。

5、Ajax技术。

6、链式调用。

7、扩展性。

8、轻量级。

五、使用JQuery简单实现Ajax技术。

(1)为什么使用jQuery实现Ajax技术?

(2)使用jquery中的ajax()方法的实现步骤。

(3)jquery中的ajax()方法的参数详解。

(4)使用idea(2024)创建web项目测试。

1、整个项目结构。

2、ajax.jsp代码。

3、AjaxServlet类。(接收jsp页面请求)

4、tomcat配置与部署情况。


一、Web的基本流程与页面局部刷新。

(1)web开发时基本流程。
  • jsp页面——>发起请求——>servlet——>重定向请求转发(跳转)其它页面。

(2)页面的"全局刷新"与"局部刷新"。
  • 我们都知道点击浏览器左上角"刷新"标志,就会刷新整个页面。
  • 这时客户端就会向服务器发送请求。


  • 如果需求:实现页面的部分内容的"局部刷新"。(如:验证码刷新、用户名验证等)
  • 这里就要使用到我们的Ajax技术实现局部刷新。

二、Ajax技术。

(1)基本介绍。
  • AJAX(Asynchronous JavaScript and XML)翻译中文:就是"异步Javascript和XML"。
  • 是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据,并更新部分网页,使得网页能够异步更新
  • AJAX 的工作原理:是使用 JavaScript 向服务器发送异步请求,然后使用 XML 或 JSON 格式接收数据,并在客户端对这些数据进行处理。

(2)基本特点。
  • AJAX还有一个最大的特点就:当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程

1、与服务器异步交互。
2、浏览器页面局部刷新。

(3)同步交互与异步交互?
1、同步交互。
  • 客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求

  • 同步交互是指在执行操作时,必须等待该操作完成后才能进行下一步操作的过程。
  • 在同步交互中,程序的执行是顺序的,一个任务完成后,下一个任务才能开始。

  • 在电影院排队买票时,你前面的人必须完成购票后,你才能开始购票。这个过程是顺序的,不能同时进行。

2、异步交互。
  • 客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求

  • 异步交互是指可以同时进行多个操作,不需要等待当前操作完成就可以开始下一个操作的过程。
  • 在异步交互中,程序可以并行执行多个任务,提高了效率和响应速度。

  • 在生活中如:洗衣机在洗衣服的同时,你可以做其他家务。比如扫地、擦桌子,不需要一直等待衣服洗完。

三、Ajax常见应用情景。

(1)搜索框的"模糊搜索"显示。

  • 当我们在百度中输入一个“白”字后,会马上出现一个下拉列表!其中列表中显示的是包含“白”字的关键字。

  • 其实这里就使用了Ajax技术!
  • 文件框发生了输入变化时,浏览器会使用Ajax技术向服务器发送一个请求,查询包含“白”字的关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把关键字显示在下拉列表中。

  • 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
  • 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!


(2)注册表单时用户名的验证:"是否被注册"情景。
  • 当输入用户名后,把光标移动到其他表单项上时,浏览器会使用Ajax技术向服务器发出请求服务器会查询名为"zhangSan"的用户是否存在。
  • 最终服务器返回"true":表示名为"zhangSan"的用户已经存在了,浏览器在得到结果后显示"用户名已被注册"!


(3)面试提问。
1、提问。这位同学请谈下你对ajax的理解?
  • 需要回答时:首先组织语言——>再进行结构化回复 突出逻辑性和层次结构
  • 先说清楚:是什么 +  什么时候用(什么场景下用) + 是怎么用的(在哪里用到了)
  • 这样就能去更好的与面试官达成"匹配度",而不是"回去等消息"。

2、回答。
  • Ajax是用JavaScript语言跟服务器进行异步交互的技术。(首先提出:官方解答
  • 当我们需要对页面的数据进行局部刷新的时候可以使用Ajax技术来实现。本人在xxx项目,大量使用Ajax技术。比如:网页的搜素框通过异步去请求匹配的数据,还有注册时填写表单,对表单数据的验证等等。

  • 这样就体现出它的基本概念、使用场景、如何使用。

四、jQuery。

(1)基本介绍。
  • jQuery是一个快速、小巧且功能丰富的JavaScript库
  • 其创建目的是:简化HTML文档遍历和操作事件处理动画Ajax等操作。
  • jQuery的设计宗旨是“Write Less, Do More”,即用更少的代码做更多的事情。
(2)大致功能介绍。
1、兼容性。
  • jQuery支持所有主流浏览器,包括IE6.0+、Firefox、Safari、Chrome和Opera。

2、选择器。
  • jQuery使用CSS风格的选择器来查找和操作HTML元素,这使得DOM操作变得简单直观。

3、事件处理。
  • jQuery提供了一种统一的方法来绑定事件处理器,无论在哪种浏览器上,都不需要担心兼容性问题。

4、动画和效果。
  • jQuery内置了多种动画效果,如淡入淡出、滑动等。可以很容易地给网页添加动态效果。

5、Ajax技术。
  • jQuery的Ajax功能简化了与服务器的数据交换。使得异步加载数据和更新页面部分内容变得容易。

6、链式调用。
  • jQuery的方法支持链式调用,这使得代码更加简洁和易于阅读。

7、扩展性。
  • jQuery允许开发者扩展其功能,通过编写自定义的插件来满足特定的需求。

8、轻量级。
  • 尽管功能强大,jQuery的文件大小相对较小,这有助于加快网页的加载速度。

五、使用JQuery简单实现Ajax技术。

(1)为什么使用jQuery实现Ajax技术?
  • 通过JavaScript书写ajax()方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题。
  • jQuery中已经将Ajax的相关操作进行了封装。使用时只需要在合适的地方调用Ajax相关的方法即可。相比而言,JQuery实现Ajax更加简洁、方便

(2)使用jquery中的ajax()方法的实现步骤。


(3)jquery中的ajax()方法的参数详解。


(4)使用idea(2024)创建web项目测试。
  • 后端使用:servlet-api、JavaWeb。
  • 前端使用:jsp-api、html、JavaScript等等。

1、整个项目结构。


2、ajax.jsp代码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax初识</title>
    <%--引入jquery--%>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button onclick="myfun()">有种点击我!</button>
<script>
    function myfun() {
        //1.使用ajax方法
        $.ajax({
            url:"http://localhost:8080/AjaxServlet",
            type:"GET",
            data:"name=Tom",
            dataType:"text",
            success:function (data){
                alert(data)
            }
        })
    }
</script>
</body>
</html>
3、AjaxServlet类。(接收jsp页面请求)
package com.fs.web;

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;

/**
 * @Title: AjaxServlet
 * @Author HeYouLong
 * @Package com.fs
 * @Date 2024/12/4 下午5:40
 * @description: AjaxServlet测试类
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求编码
        req.setCharacterEncoding("UTF-8");
        //设置相应编码
        resp.setContentType("text/html;charset=UTF-8");
        //拿到对应参数值
        String username = req.getParameter("name");
        resp.getWriter().write("hello!"+username);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}
4、tomcat配置与部署情况。
  • tomcat服务器。


  • 部署(配置工件)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2253847.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

spark sql 环境安装,java 默认路径和 安装配置!

yum安装java 查看默认路径 update-alternatives --config java # Java 环境变量 export JAVA_HOME/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.412.b08-1.el7_9.x86_64/jreexport PATH$JAVA_HOME/bin:$PATH# Spark 环境变量 export SPARK_HOME/home/vagrant/soft/sparkexport PATH…

网络层总结

网络层任务&#xff1a; 分组 从源主机 经多个网络/多段链路 传输到目的主机 两种重要的功能&#xff1a; 分组转发、 路由选择 网络层向其上层提供的两种服务 —— 面向连接的虚电路服务、无连接的数据报服务 面向连接的虚电路服务&#xff1a; 可靠通…

python学习笔记15 python中的类

上一篇我们介绍了python中的库 &#xff0c;学习了一些常见的内置库。详细内容可点击–>python学习笔记14 python中的库&#xff0c;常见的内置库&#xff08;random、hashlib、json、时间、os&#xff09; 这一篇我们来看一下python中的类 创建一个类 class 类的名称():de…

MySQL数据集成到广东省追溯平台的销售信息同步方案

销售信息同步--外购上报流程2&#xff1a;MySQL数据集成到广东省特殊食品电子追溯平台 在现代数据驱动的业务环境中&#xff0c;确保销售信息的准确性和及时性至关重要。本文将分享一个具体的技术案例&#xff0c;展示如何通过轻易云数据集成平台&#xff0c;将MySQL中的销售信…

【推荐算法】推荐系统的评估

这篇文章是笔者阅读《深度学习推荐系统》第五章推荐系统的评估的学习笔记&#xff0c;在原文的基础上增加了自己的理解以及内容的补充&#xff0c;在未来的日子里会不断完善这篇文章的相关工作。 文章目录 离线评估划分数据集方法客观评价指标P-R曲线ROC/AUCmAPNDCG A/B 测试分…

移植NIOS10.1工程,NIOS10.1路径修改

移植NIOS10.1工程&#xff0c;NIOS10.1路径修改 因工程的需要&#xff0c;使用的NIOS10.1&#xff0c;比较老&#xff0c;这个版本的路径是使用的绝对路径&#xff0c;导致移植工程市回报路径的错误&#xff0c;在13.1之后改为了相对路径&#xff0c;不存在这个问题。 需要修…

WPF+LibVLC开发播放器-LibVLC播放控制

接上一篇&#xff1a; LibVLC在C#中的使用 实现LibVLC播放器播放控制 界面 界面上添加一个Button按钮用于控制播放 <ButtonGrid.Row"1"Width"88"Height"24"Margin"10,0,0,0"HorizontalAlignment"Left"VerticalAlignme…

iOS与Windows间传文件

想用数据线从 windows 手提电脑传文件入 iPhone&#xff0c;有点迂回。 参考 [1]&#xff0c;要在 windows 装 Apple Devices。装完、打开、插线之后会检测到手机&#xff0c;界面&#xff1a; 点左侧栏「文件」&#xff0c;不是就直接可以传&#xff0c;而是要通过某个应用传…

两个畸变矩阵相乘后还是一个2*2的矩阵,有四个畸变元素。1、畸变矩阵吸收了法拉第矩阵。2、畸变矩阵也给法拉第旋转角带来模糊(求解有多种可能)

角度一&#xff1b;恢复畸变的时候也把法拉第旋转恢复了 角度二&#xff1a;求解法拉第旋转角的时候 前面乘的复系数的不同也会带来法拉第旋转角和畸变的不同解 注意&#xff1a;无论多少个畸变矩阵相乘&#xff0c;结果都是2*2的矩阵&#xff0c;也就是畸变参数可以减少…

【Linux】基础IO_文件系统IO_“一切皆文件”_缓冲区

目录 1. 理解"⽂件" 1-1 狭义理解 1-2 ⼴义理解 1-3 ⽂件操作的归类认知 1-4 系统⻆度 访问文件&#xff0c;需要先打开文件&#xff01;那么是由谁打开文件&#xff1f;&#xff1f;&#xff1f; 操作系统要不要把被打开的文件管理起来&#xff1f; 2. 回顾…

【LeetCode】498.对角线遍历

无论何时何地&#xff0c;我都认为对于一道编程题&#xff0c;思考解法的时间用于是实际动手解决问题的2倍&#xff01;如果敲键盘编码需要5min&#xff0c;那么思考解法的过程至少就需要10分钟。 1. 题目 2. 思想 其实这就是一道模拟题&#xff0c;难度中等。做这种题的关键就…

Jupyter Lab打印日志

有时候在 jupyter 中执行运行时间较长的程序&#xff0c;且需要一直信息&#xff0c;但是程序执行到某些时候就不再打印了。 可以开启 日志控制台&#xff0c;将日志信息记录在控制台中。 参考&#xff1a;https://www.autodl.com/docs/jupyterlab/

Hbase整合Mapreduce案例1 hdfs数据上传至hbase中——wordcount

目录 整合结构准备java API 编写pom.xmlMain.javaMap.javaReduce 运行 整合结构 准备 上传hdfs data.txt数据 data.txt I am wunaiieq QAQ 123456 Who I am In todays interconnected world the role of technology cannot be overstated It has revolutionized the way we …

temu登录接口逆向分析(含Py纯算)

文章目录 1. 写在前面2. 接口分析3. 算法还原 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python…

python中什么叫做脚本

Python一种面向对象的动态类型语言&#xff0c;是一种脚本语言&#xff0c;常用于各种服务器的维护和自动化运行。它具有丰富和强大的库。它常被称为胶水语言&#xff0c;因为它能够把用其他语言制作的各种模块很轻松地联结在一起。 以.py 结尾的文件就是Python脚本&#xff0…

全面解析 Transformer:改变深度学习格局的神经网络架构

目录 一、什么是 Transformer&#xff1f; 二、Transformer 的结构解析 1. 编码器&#xff08;Encoder&#xff09; 2. 解码器&#xff08;Decoder&#xff09; 3. Transformer 模型结构图 三、核心技术&#xff1a;注意力机制与多头注意力 1. 注意力机制 2. 多头注意力&…

虚幻引擎---材质篇

一、基础知识 虚幻引擎中的材质&#xff08;Materials&#xff09; 定义了场景中对象的表面属性&#xff0c;包括颜色、金属度、粗糙度、透明度等等&#xff1b;可以在材质编辑器中可视化地创建和编辑材质&#xff1b;虚幻引擎的渲染管线的着色器是用高级着色语言&#xff08;…

基于Matlab计算机视觉的车道线识别与前车检测系统研究

随着自动驾驶技术的发展&#xff0c;车道线识别和前车检测成为智能驾驶系统中的核心技术之一。本实训报告围绕基于计算机视觉的车道线识别与前车检测系统展开&#xff0c;旨在通过处理交通视频数据&#xff0c;实时检测车辆所在车道及其与前车的相对位置&#xff0c;从而为车道…

vue.js学习(day 19)

自定义创建项目 ESlint 代码规范 代码规范错误 手动修正 自动修正 settings.json {"emmet.triggerExpansionOnTab": true,"editor.fontSize": 25,// 当保存的时候&#xff0c;eslint自动帮我们修复错误"editor.codeActionsOnSave": {&qu…

物联网——WatchDog(监听器)

看门狗简介 独立看门狗框图 看门狗原理&#xff1a;定时器溢出&#xff0c;产生系统复位信号&#xff1b;若定时‘喂狗’则不产生系统复位信号 定时中断基本结构&#xff08;对比&#xff09; IWDG键寄存器 独立看门狗超时时间 WWDG(窗口看门狗) WWDG特性 WWDG超时时间 由于…