【WEEK4】 【DAY4】AJAX第一部分【中文版】

news2024/12/23 9:03:47

【WEEK4】 【DAY4】AJAX第一部分【中文版】
2024.3.21 Thursday

目录

  • 8.AJAX
    • 8.1.简介
    • 8.2.伪造ajax
      • 8.2.1.新建module：springmvc-06-ajax
      • 8.2.2.添加web支持，导入pom依赖
        • 8.2.2.1.修改web.xml
        • 8.2.2.2.新建jsp文件夹
      • 8.2.3.新建applicationContext.xml
      • 8.2.4.新建AjaxController.java
      • 8.2.5.配置Tomcat
      • 8.2.6.注
      • 8.2.7.新建test.html
      • 8.2.8.利用ajax可以做
    • 8.3.jQuery.ajax
      • 8.3.1.介绍
      • 8.3.2.jQuery.ajax(...)部分参数
      • 8.3.3.导入jQuery
      • 8.3.4.修改applicationContext.xml
      • 8.3.5.修改index.xml
      • 8.3.6.修改AjaxController.java
      • 8.3.7.运行
      • 8.3.8.流程图

8.AJAX

8.1.简介

  1. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
  2. AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
    在这里插入图片描述
  3. Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
  4. 在2005年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。
  5. Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
  6. 就和国内百度的搜索框一样!
  7. 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
  8. 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
  9. 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

8.2.伪造ajax

8.2.1.新建module：springmvc-06-ajax

在这里插入图片描述

8.2.2.添加web支持，导入pom依赖

因为该module被创建在SpringMVC_try1文件下，所以可以直接沿用父文件的依赖
在这里插入图片描述

8.2.2.1.修改web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--绑定配置文件-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <!--启动加载-->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>    <!--解决乱码-->
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>   <!--过滤所有请求-->
    </filter-mapping>
</web-app>
8.2.2.2.新建jsp文件夹

在这里插入图片描述

8.2.3.新建applicationContext.xml

在这里插入图片描述

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
    <context:component-scan base-package="P24.controller"/>
    <mvc:annotation-driven/>

    <!-- 视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

8.2.4.新建AjaxController.java

先新建controller文件夹
在这里插入图片描述

package P24.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }
}

测试使用

8.2.5.配置Tomcat

在这里插入图片描述
添加lib支持：在这里插入图片描述

8.2.6.注

如果删除module后重新创建名称相同的module，可能出现“Module ‘----‘already exists”（在项目保存的文件夹里删除文件之后），解决方法详见https://blog.csdn.net/weixin_43673163/article/details/126538827

8.2.7.新建test.html

在这里插入图片描述
注意新建的位置，和WEB-INF平级，直接属于web目录下一级
测试：加载了一个高度为500px的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe测试体验页面无刷新</title>

    <script>
        function go() {
            var url1 = document.getElementById("url").value;
            //所有的值变量，提前获取
            document.getElementById("iframe1").src=url1;
        }
    </script>

</head>
<body>

<div>
    <p>请输入地址：</p>
    <p>
        <input type="text" id="url" value="https://www.csdn.net/">
        <input type="button" value="提交" onclick="go()">
    </p>
</div>

<!--弹窗-->
<div>
    <iframe id="iframe1" style="width: 100%; height: 500px"></iframe>
</div>

</body>
</html>

在这里插入图片描述

  • 新建ajax-frame.html（效果相同）
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>kuangshen</title>
</head>
<body>

<script type="text/javascript">
  // window.onload = function(){
  //   var myDate = new Date();
  //   document.getElementById('currentTime').innerText = myDate.getTime();
  // };

  function LoadPage(){
    var targetUrl =  document.getElementById('url').value;
    console.log(targetUrl);
    document.getElementById("iframePosition").src = targetUrl;
  }

</script>

<div>
  <p>请输入要加载的地址：<span id="currentTime"></span></p>
  <p>
<!--    <input id="url" type="text" value="https://www.baidu.com/"/>不要使用百度的网址，打不开-->
    <input id="url" type="text" value="https://www.csdn.net/"/>
    <input type="button" value="提交" onclick="LoadPage()">
  </p>
</div>

<div>
  <h3>加载页面位置：</h3>
  <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>

在这里插入图片描述
注意：在输入框中不能访问百度官网，可以使用百度知道的网址进行实践
在这里插入图片描述

8.2.8.利用ajax可以做

  1. 注册时，输入用户名自动检测用户是否已经存在。
  2. 登陆时，提示用户名密码错误
  3. 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
    等等

8.3.jQuery.ajax

8.3.1.介绍

  1. 纯JS原生实现Ajax我们不去讲解这里，直接使用jquery提供的，方便学习和使用，避免重复造轮子，有兴趣的同学可以去了解下JS原生XMLHttpRequest ！
  2. Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
  3. jQuery 提供多个与 AJAX 有关的方法。
  4. 通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
  5. jQuery 不是生产者，而是大自然搬运工。（jQuary是一个库，包含js的大量函数）
  6. jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

8.3.2.jQuery.ajax(…)部分参数

url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”)
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)
accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
dataType：将服务器端返回的数据转换成指定类型
“xml”: 将服务器端返回的内容转换成xml格式
“text”: 将服务器端返回的内容转换成普通文本格式
“html”: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
“script”: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
“json”: 将服务器端返回的内容转换成相应的JavaScript对象
“jsonp”: JSONP 格式使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

8.3.3.导入jQuery

  1. 下载地址
    https://jquery.com/download/
    在这里插入图片描述
  2. 导入步骤
    右键上图链接另存为到本地地址，然后导入下图所示位置（web-statics-js）
    在这里插入图片描述

8.3.4.修改applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
    <context:component-scan base-package="P24.controller"/>
    <!--静态资源过滤-->
    <mvc:default-servlet-handler />
    <mvc:annotation-driven/>

    <!-- 视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>

</beans>

8.3.5.修改index.xml

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>$Title$</title>
  <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.7.1.js"></script>
  <script>
    <%--事件a--%>
    function a1(){
      $.post({
        //1. 请求地址
        url:"${pageContext.request.contextPath}/a1",
        //2. 请求数据
        //$("#txtName").val()取出输入框给出的值，这里的‘name'就是AjaxController中方法a1中的String name
        data:{'name':$("#txtName").val()},
        //3. 请求成功
        success:function (data,status) {
          //弹窗显示
          alert(data);
          alert(status);
          //在console界面显示
          console.log("data="+data);
          console.log("data="+status);
        },
        // //4. 请求失败
        // error:function () {
        // }
      });
    }
  </script>
</head>
<body>

<%--onblur：失去焦点触发事件--%>
<%--失去焦点的时候，发起一个请求（携带信息）到后台--%>
<%--  <a href="/t1"></a>这种不能实现失去焦点功能——因为会直接重定向或者转发--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>

</body>
</html>

8.3.6.修改AjaxController.java

package P24.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param=>"+name);
        if ("zzz".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
}

8.3.7.运行

在输入框输入任意内容后，如果失去焦点将触发function a1，将数据传到后端的a方法作为name参数，经过判断会弹出“true”或“false”
http://localhost:8080/springmvc_06_ajax_war_exploded/
输入字符：
在这里插入图片描述

alert(data);

在这里插入图片描述

alert(status);

在这里插入图片描述

console.log("data="+data); 
console.log("data="+status);

在这里插入图片描述
输入不符合要求的字符时：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.3.8.流程图

在这里插入图片描述
学习前端的注意事项
Html+css+js（熟练）
Js包含：1函数（闭包必考，就是自己调用自己），2Dom（id, name, tag; create, remove），3Bom（window事件：操作浏览器；document：操作文档对象）
ES6：import, require

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

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

相关文章

tftp使用

tftp使用

下载 sudo apt-get install tftpd-hpa 创建文件夹 mkdir /home/ljl/work/tftpd mkdir /home/ljl/tftpd chmod 777 tftpd/编辑 sudo vim /etc/default/tftpd-hpa //服务器端 sudo apt-get install tftp-hpa //客户端编辑权限 sudo vi /etc/default/tftpd-hpa 内容&#xff1…
阅读更多...
智能风扇的新篇章：唯创知音WTK6900G语音识别芯片引领行业革新

智能风扇的新篇章：唯创知音WTK6900G语音识别芯片引领行业革新

随着科技浪潮的推进&#xff0c;智能化技术逐渐渗透到生活的每一个角落&#xff0c;家电领域尤为明显。风扇&#xff0c;这一夏日清凉神器&#xff0c;也通过智能化改造&#xff0c;焕发出前所未有的光彩。其中&#xff0c;智能语音控制功能的加入&#xff0c;为风扇的使用带来…
阅读更多...
算法系列--递归(2)

算法系列--递归(2)

&#x1f495;"什么样的灵魂就要什么样的养料&#xff0c;越悲怆的时候我越想嬉皮。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;算法系列–递归(2) 前言:今天带来的是算法系列--递归(2)的讲解,包含六个和二叉树相关的题目哦 1.计算布尔⼆叉树的…
阅读更多...
Redis中文乱码问题

Redis中文乱码问题

最近排查问题&#xff0c;发现之前的开发将日志写在redis缓存中&#xff08;不建议这样做&#xff09;&#xff0c;我在查看日志的时候发现没办法阅读&#xff0c;详细是这样的&#xff1a; 查阅资料后发现是进制问题&#xff0c;解决方法是启动客户端的时候将redis-cli改为red…
阅读更多...
【RPG Maker MV 仿新仙剑 战斗场景UI （八）】

【RPG Maker MV 仿新仙剑 战斗场景UI （八）】

RPG Maker MV 仿新仙剑 战斗场景UI 八 状态及装备场景代码效果 状态及装备场景 本计划在战斗场景中直接制作的&#xff0c;但考虑到在战斗场景中加入太多的窗口这不太合适&#xff0c;操作也繁琐&#xff0c;因此直接使用其他场景。 代码 Pal_Window_EquipStatus.prototype.…
阅读更多...
STM32之HAL开发——启动文件详解【精华版】

STM32之HAL开发——启动文件详解【精华版】

启动文件介绍 启动文件是使用机器认识的汇编语言&#xff0c;由汇编编写&#xff0c;是系统上电复位后第一个执行的程序&#xff0c;经过一些必要的配置&#xff0c;最终能够调用 main 函数&#xff0c;使得用户程序能够在 MCU上正常运行起来的必备文件。 无论是是何种MCU&…
阅读更多...
腾讯三面被问到有没有参加过CTF_我反手就是一套军体拳打得面试官哑口无言！

腾讯三面被问到有没有参加过CTF_我反手就是一套军体拳打得面试官哑口无言！

目录 ​ 前言&#xff1a; 正文&#xff1a; 什么是CTF&#xff1f; 什么是PWN? 为什么要学CTF&#xff1f; CTF竞赛模式&#xff1a; CTF各大题型简介&#xff1a; 学之前的思考&#xff1a;分析赛题情况 常规做法 CTF比赛需要的知识储备 CTF比赛的神器&#xff…
阅读更多...
基于甘特图的资源调度优化策略

基于甘特图的资源调度优化策略

资源在项目管理中是一个永恒的话题。无论人力、物力还是财力资源,总是捉襟见肘,都希望用最少的资源完成最大的工作。这就要求我们在资源调度方面果断精准,做到最优化。而甘特图作为项目时间规划的重要工具,恰恰能为资源调度提供绝佳帮助。 甘特图能反映出任务之间的制约关系,有…
阅读更多...
vulnhub-----pWnOS1.0靶机

vulnhub-----pWnOS1.0靶机

文章目录 1.信息收集2.漏洞测试3.爆破hash4.提权 首先拿到一台靶机&#xff0c;就需要知道靶机的各种信息&#xff08;IP地址&#xff0c;开放端口&#xff0c;有哪些目录&#xff0c;什么框架&#xff0c;cms是什么&#xff0c;网页有什么常见的漏洞&#xff0c;如sql注入&…
阅读更多...
DC-3靶机

DC-3靶机

一.环境搭建 下载地址&#xff1a; http://www.five86.com/downloads/DC-3-2.zip 下载不下来的可以用迅雷输入上面的网址进行下载 虚拟机配置&#xff1a; 切换连接桥接模式为nat模式&#xff0c;启动靶机&#xff0c;出现如下报错&#xff0c;进入虚拟机配置 选中CD/DVD&…
阅读更多...
C语言：自定义类型（结构体）

C语言：自定义类型（结构体）

目录 一、结构的特殊声明二、结构的自引用三、结构体内存对齐1.对齐规则2.为什么存在内存对齐(1)平台原因 (移植原因)&#xff1a;(2)性能原因&#xff1a; 3.修改默认对齐数 四、结构体传参五、结构体实现位段1.什么是位段2.位段的内存分配3.位段的跨平台问题4.位段使用的注意…
阅读更多...
使用Python和OpenFOAM进行流体力学模拟的基础示例

使用Python和OpenFOAM进行流体力学模拟的基础示例

流体力学模拟通常涉及复杂的数学方程和数值方法&#xff0c;例如计算流体动力学(CFD)。OpenFOAM是一个开源的CFD工具箱&#xff0c;它使用C编写&#xff0c;但可以通过Python脚本进行自动化和定制。 以下是一个简单的示例&#xff0c;展示如何使用Python和OpenFOAM进行流体力学…
阅读更多...
【嵌入式开发 Linux 常用命令系列 4.3 -- git add 时单独排除某个目录或者文件】

【嵌入式开发 Linux 常用命令系列 4.3 -- git add 时单独排除某个目录或者文件】

文章目录 git add 时单独排除某个目录或者文件使用 .gitignore 文件使用命令行排除文件或目录 git add 时单独排除某个目录或者文件 在使用 git add 命令时&#xff0c;如果你想要排除特定的目录或文件&#xff0c;可以使用 .gitignore 文件或使用路径规范来指定不想添加的文件…
阅读更多...
YOLOv5-Y5周：yolo.py文件解读

YOLOv5-Y5周：yolo.py文件解读

本文为&#x1f517;365天深度学习训练营 中的学习记录博客 原作者&#xff1a;K同学啊|接辅导、项目定制 我的环境&#xff1a; 1.语言&#xff1a;python3.7 2.编译器&#xff1a;pycharm 3.深度学习框架Tensorflow/Pytorch 1.8.0cu111 一、代码解读 import argparse i…
阅读更多...
pcie dllp FC

pcie dllp FC

关于pcie dllp FC内容&#xff1a; 源地址&#xff1a; PCIe&#xff08;三&#xff09;—— PCIe协议栈&#xff0c;事务层和数据链路层 | Soul Orbit 3.2. 控制消息&#xff1a;DLLP&#xff08;Data Link Layer Packet&#xff09; 除了传输TLP数据包之外&#xff0c;数…
阅读更多...
SQL96 返回顾客名称和相关订单号(表的普通联结、内联结inner join..on..)

SQL96 返回顾客名称和相关订单号(表的普通联结、内联结inner join..on..)

方法一&#xff1a;普通联结 select cust_name, order_num from Customers C,Orders O where C.cust_id O.cust_id order by cust_name,order_num;方法二&#xff1a;使用内连接 select cust_name,order_num from Customers C inner join Orders O on C.cust_id O.cust_id …
阅读更多...
泛型可空类型Nullable＜T＞

泛型可空类型Nullable＜T＞

.Net Framework 4.8版本开始&#xff0c;引入了可空类型Nullable<T>. 对于引用类型的变量来说&#xff0c;如果未赋值&#xff0c;默认情况下是 Null 值&#xff0c; 对于值类型的变量&#xff0c;如果未赋值&#xff0c;整型变量的默认值为 0,Boolean默认为false&…
阅读更多...
基于ssm小型企业办公自动化系统论文

基于ssm小型企业办公自动化系统论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对小型企业办公信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…
阅读更多...
EPSON XV4001BC陀螺仪传感器汽车导航系统的应用

EPSON XV4001BC陀螺仪传感器汽车导航系统的应用

近年来为了提高汽车应用系统的可靠性,传感器融合系统被越来越多的应用到汽车领域,如汽车导航系统中的行人检测和预碰撞警告等,通过提供精准的导航信息,为驾驶员提供更安全,更稳定,更舒适的出行体验,例如在行人检测系统中,只使用低成本的红外传感器不能检测到行人的实际位置,而利…
阅读更多...
hcip复习总结2（广域网与OSPF）

hcip复习总结2（广域网与OSPF）

数据链路层面&#xff1a; 针对不同的物理链路定义不同的封装 局域网封装&#xff1a; Ethernet 2 &#xff08; TCP/IP &#xff09; &#xff0c; IEEE802.3 &#xff08; OSI &#xff09; 广域网封装&#xff1a; PPP HDLC FR ATM HDLC &#xff1a; 高级数据链路控制协…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023