12-SpringBoot工程中ajax技术分析及应用

最新推荐文章于 2022-01-21 01:41:54 发布

在空中翱翔

最新推荐文章于 2022-01-21 01:41:54 发布

阅读量256

点赞数

分类专栏： java培优第三阶段

本文链接：https://blog.csdn.net/weixin_52114888/article/details/111714921

版权

本文详细介绍了Ajax技术，包括其背景、定义、应用场景。接着，通过实例展示了在SpringBoot项目中实现Ajax的步骤，包括创建项目、添加依赖、编写Controller和HTML页面。此外，还探讨了Ajax的基本业务实现、进阶封装以及在jQuery中的应用。

摘要由CSDN通过智能技术生成

1.Ajax技术简介

1.1 背景分析

在互联网高速发展的今天，传统的WEB应用，对于高并发、高性能、高可靠性的要求已迫在眉睫。单线程方式的客户端与服务端交互方式已经不能满足现阶段的需求.我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生

1.2 Ajax是什么

Ajax (Asynchronous JavaScript and XML) 是一种Web应用客户端技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯(可以有多个线程同时与服务器交互)，并且按需获取服务端数据以后,可以进行局部刷新,进而提高数据的响应和渲染速度

1.3 Ajax应用场景

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:

商品系统
评价系统
地图系统
…
AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问

2.Ajax快速入门

2.1 Ajax请求响应过程分析

2.1.1 传统方式是web请求与响应(客户端要等待响应结果)，如图所示：

在这里插入图片描述

2.1.2 Ajax方式的请求与响应(关键是客户端不阻塞),如图所示:

在这里插入图片描述

2.2 Ajax编程步骤及模板代码分析

Ajax 编码的基本步骤?(重点是ajax技术的入口-XMLHttpRequest-XHR对象)
第一步：基于dom事件创建xhr对象
第二步：在xhr对象上注册状态监听(监听客户端与服务端的通讯过程)
第三步：与服务端建立连接(指定请求方式，请求url，同步还是异步)
第四步：发送请求(将请求数据传递服务端)
ajax编码过程的模板代码如下：

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
   
    if(xhr.readyState==4&&xhr.status==200){
   
           console.log(xhr.responseText)
    }
}
xhr.open("GET",url,true);
xhr.send(null);

2.3 SpringBoot项目Ajax技术入门实现

2.3.1 第一步：创建项目module，如图所示：

在这里插入图片描述

2.3.2 第二步：添加Spring Web依赖，代码如下：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.3.3 第三步：创建AjaxController处理客户端请求，代码如下：

package com.cy.pj.ajax.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
   
    @RequestMapping("/doAjaxStart")
    public String doAjaxStart(){
   
        return "Response Result of Ajax Get Request 01";
    }
}

2.3.4 第四步：在项目static目录下，创建一个页面ajax-01.html，代码如下：

html元素代码如下：

<h1>The Ajax 01 Page</h1>
<fieldset>
    <legend>Ajax 异步Get请求</legend>
    <button onclick="doAjaxStart()">Ajax Get Request</button>
    <span id="result">Data is Loading...</span>
</fieldset>

javascript脚本代码如下：

function doAjaxStart() {
   
        //debugger//客户端断点(此断点生效需要打开控制台)
        //1.创建xhr对象(XmlHttpRequest)-Ajax应用的入口对象
        let xhr = new XMLHttpRequest();
        //2.在xhr队形上注册状态监听(拿到服务端响应结果以后更新到页面result位置)
        xhr.onreadystatechange=function () {
   //事件处理函数(客户端与服务端通讯状态发生变化  时会执行此函数)
            if(xhr.readyState==4 && xhr.status==200){
   //status==200表示请求处理过程没问题
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        //3.与服务端建立连接(指定请求方式，请求url，异步)
        xhr.open("GET","http://localhost/doAjaxStart",true);//true代表异步
        //4.向服务端发送请求
        xhr.send(null);//get请求send方法内部不传数据或者写一个null
        //假如是异步客户端执行完send会继续向下执行
    }

2.3.5 第五步：启动Tomcat服务并进行访问测试分析

点击Ajax Get Request 按钮,检测页面数据更新

2.3.6 第六步：启动及访问过程中的BUG分析

点击按钮没反应
访问指定属性的对象不存在
跨域访问

3.Ajax基本业务实现

3.1 基本业务描述

基于对ajax技术理解,实现ajax方式的Get,Post,Put,Delete等请求的异步处理,如图所示:
在这里插入图片描述

3.2 服务端关键代码设计及实现

基于业务描述,在AjaxController类中添加相关属性和方法,用于处理客户端的ajax请求

添加属性和构造方法，代码如下：

//假设这个是用于存储数据的数据库
    private List<Map<String,Object>> dbList = new ArrayList<>();
    public AjaxController(){
   
        Map<String,Object> map = new HashMap<>();
        map.