关于springboot:14SpringBoot工程中ajax技术分析及应用

在互联网高速倒退的明天，传统的 WEB 利用，对于高并发、高性能、高可靠性的要求已火烧眉毛。单线程形式的客户端与服务端交互方式曾经不能满足现阶段的需要. 咱们须要以异步、按需加载的形式从服务端获取数据并及时刷新，来进步用户体验，于是 Ajax 技术诞生。

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

Ajax 技术最大的劣势就是底层异步, 而后部分刷新, 进而进步用户体验, 这种技术当初在很多我的项目中都有很好的利用, 例如:

商品零碎。
评估零碎。
地图零碎。
…..

AJAX 能够仅向服务器发送并取回必要的数据，并在客户端采纳 JavaScript 解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。但 Ajax 技术也有劣势，最大劣势是不能间接进行跨域拜访。

传统形式是 web 申请与响应(客户端要期待响应后果), 如图所示:

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);

第一步: 创立我的项目 module, 如图所示:

第二步: 增加 Spring web 依赖, 代码如下:

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

第三步: 创立 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";}
}

第四步: 在我的项目中 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 doAjaxGet01(){//debugger// 客户端断点(此断点失效须要关上控制台)
 //1. 创立 XHR 对象(XmlHttpRequest)-Ajax 利用的入口对象
 let xhr=new XMLHttpRequest();
 //2. 在 XHR 对象上注册状态监听(拿到服务端响应后果当前更新到页面 result 地位)
 xhr.onreadystatechange=function(){// 事件处理函数(客户端与服务端通信状态发生变化  时会执行此函数)
 //readyState== 4 示意服务端响应到客户端数据曾经接管实现.
 if(xhr.readyState==4){if(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
 console.log("===main thread===")
// 如果是异步客户端执行完 send 会持续向下执行.
}

第五步: 启动 Tomcat 服务并进行拜访测试剖析.

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

第六步: 启动及拜访过程中的 Bug 剖析

点击按钮没反馈

拜访指定属性的对象不存在

跨域拜访

基于对 ajax 技术了解, 实现 ajax 形式的 Get,Post,Put,Delete 等申请的异步解决, 如图所示:

基于业务形容, 在 AjaxController 类中增加相干属性和办法, 用于解决客户端的 ajax 申请.

增加属性和构造方法, 代码如下:

/** 假如这个是用于存储数据的数据库 */
    private List<Map<String,Object>> dbList=new ArrayList<>();
    public AjaxController(){Map<String,Object> map=new HashMap<>();
        map.put("id","100");
        map.put("name","家用电器");
        map.put("parentId",null);//parentId 为 null 则示意它是 1 级分类
        map.put("remark","电器相干等");
        map.put("createdTime",new Date());
        dbList.add(map);
    }

增加 Ajax 申请解决办法, 代码如下:

 @GetMapping("/doAjaxGet")
    public List<Map<String,Object>> doAjaxGet(){return dbList;}
    @PostMapping("/doAjaxPost")
    public String doAjaxPost(@RequestParam Map<String,Object> map){map.put("createdTime",new Date());
        dbList.add(map);
        return "save ok";
    }
    @DeleteMapping("/doAjaxDelete")
    public String doAjaxDelete(String id){
        // 获取迭代器对象, 而后迭代 list 汇合, 找到 id 对应的元素, 进行删除操作
        Iterator it=dbList.iterator();
        while(it.hasNext()){Map<String,Object> map=(Map<String,Object>)it.next();
            if(map.get("id").equals(id)){//dbList.remove(map);// 这样删除会呈现并发删除异常
                it.remove();// 通过迭代器执行删除操作}
        }
        return "delete ok";
    }
    
    @PutMapping("/doAjaxUpdate")
    public String doAjaxUpdate(@RequestParam Map<String,Object> updateMap){Iterator it=dbList.iterator();
        while(it.hasNext()){Map<String,Object> map=(Map<String,Object>)it.next();
            if(map.get("id").equals(updateMap.get("id"))){map.put("name",updateMap.get("name"));
               map.put("remark",updateMap.get("remark"));
            }
        }
       return "update ok";
    }

在 static 目录下创立 ajax-02.html 文件, 要害代码如下:

<h1>The Ajax 02 Page</h1>
<button onclick="doAjaxGet()">Do Ajax Get</button>
<button onclick="doAjaxPost()">Do Ajax Post</button>
<button onclick="doAjaxDelete()">Do Ajax Delete</button>
<button onclick="doAjaxUpdate()">Do Ajax Update</button>
<div id="result"></div>

客户端 JavaScript 脚本设计, 代码如下:

Get 申请形式, 代码如下:

 function doAjaxGet(){let xhr=new XMLHttpRequest();
       xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;
               }
           }
       }
       xhr.open("GET","http://localhost/doAjaxGet",true);
       xhr.send(null);
    }

Post 申请形式, 代码如下:

function doAjaxPost(){let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("POST","http://localhost/doAjaxPost",true);
        //post 申请向服务端传递数据, 须要设置申请头, 必须在 open 之后
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 发送申请(post 申请传递数据, 须要将数据写入到 send 办法外部)
 xhr.send("id=101&name=Computer&remark=Computer...");
    }

Update 申请形式, 代码如下:

 function doAjaxUpdate(){let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("put","http://localhost/doAjaxUpdate",true);
        //post 申请向服务端传递数据, 须要设置申请头, 必须在 open 之后
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 发送申请(post 申请传递数据, 须要将数据写入到 send 办法外部)
 xhr.send("id=101&name=Book&remark=Book...");
    }

Delete 申请形式, 代码如下:

 function doAjaxDelete(){let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("delete","http://localhost/doAjaxDelete?id=101",true);
        xhr.send(null);
    }

在理论编程过程中咱们通常会封装代码共性, 提取代码个性. 而后来进步代码的可重用性. 例如:

 function ajaxGet(url,params,callback) {let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){callback(xhr.responseText);
            }
        }
    }
    xhr.open("GET",params?url+"?"+params:url,true);
    xhr.send(null);
}

function ajaxPost(url,params,callback) {//add
 let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){callback(xhr.responseText);
            }
        }
    }
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
}

function ajaxPut(url,params,callback) {//update
 let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){callback(xhr.responseText);
            }
        }
    }
    xhr.open("PUT",url,true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
}

function ajaxDelete(url,params,callback) {let xhr = new XMLHttpRequest();
    xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){callback(xhr.responseText);
            }
        }
    }
    xhr.open("delete",params?url+"?"+params:url,true);
    xhr.send(null);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1> The Ajax 03 Page</h1>
<button onclick="doAjaxGet()">Do Ajax Get</button>
<button onclick="doAjaxPost()">Do Ajax Post</button>
<button onclick="doAjaxDelete()">Do Ajax Delete</button>
<button onclick="doAjaxUpdate()">Do Ajax Update</button>
<div id="result"></div>
<script src="/js/ajax.js"></script>
<script>
    //Get 申请
 function doAjaxGet(){
       let url="http://localhost/doAjaxGet";
        let params="";
        ajaxGet(url,params,function (result){document.getElementById("result").innerText=result;
            // alert(result);
 // doAjaxGet();})
    }
    //Post 申请
 function doAjaxPost(){
        let url="http://localhost/doAjaxPost";
        let params="id=11&name=Computer&remark=Computer...";
        ajaxPost(url,params,function (result){document.getElementById("result").innerText=result;
            // alert(result);
 // doAjaxPost();})
    }
    //Delete 申请
 function doAjaxDelete() {
        let url="http://localhost/doAjaxDelete";
        let params="id=11";
        ajaxDelete(url,params,function (result){document.getElementById("result").innerText=result;
            // alert(result);
 // doAjaxDelete();})
    }
    //Update 申请
 function doAjaxUpdate(){
       let url="http://localhost/doAjaxUpdate";
        let params="id=11&name=TV&remark=TV...";
        ajaxPut(url,params,function (result){document.getElementById("result").innerText=result;
            // alert(result);
 // doAjaxUpdate();})
    }
</script>
</body>
</html>

咱们在理论的 js 编程中常常会以面向对象的形式进行实现，例如 ajaxGet 函数, 如何以对象形式进行调用呢？要害代码剖析如下：(如下代码的了解须要具备 JS 中面向对象的基础知识, 如果不熟可临时跳过)

(function(){
    // 定义一个函数，能够将其连贯为 java 中的类
     var ajax=function(){}
    // 在变量 ajax 指向的类中增加成员，例如 doAjaxGet 函数，doAjaxPost 函数
     ajax.prototype={ajaxGet:function(url,params,callback){
        // 创立 XMLHttpRequest 对象，基于此对象发送申请
        var xhr=new XMLHttpRequest();
        // 设置状态监听(监听客户端与服务端通信的状态)
        xhr.onreadystatechange=function(){// 回调函数，事件处理函数
            if(xhr.readyState==4&&xhr.status==200){//console.log(xhr.responseText);
                callback(xhr.responseText);//jsonStr
            }
        };
        // 建设连贯(申请形式为 Get, 申请 url, 异步还是同步 -true 示意异步)
        xhr.open("GET",url+"?"+params,true);
        // 发送申请
        xhr.send(null);//GET 申请 send 办法不写内容
     },
        ajaxPost:function(url,params,callback){
        // 创立 XMLHttpRequest 对象，基于此对象发送申请
        var xhr=new XMLHttpRequest();
        // 设置状态监听(监听客户端与服务端通信的状态)
        xhr.onreadystatechange=function(){// 回调函数，事件处理函数
            if(xhr.readyState==4&&xhr.status==200){//console.log(xhr.responseText);
            callback(xhr.responseText);//jsonStr
            }
        };
        // 建设连贯(申请形式为 POST, 申请 url, 异步还是同步 -true 示意异步)
        xhr.open("POST",url,true);
       //post 申请传参时必须设置此申请头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // 发送申请
        xhr.send(params);//post 申请 send 办法中传递参数
        }
    }
    window.Ajax=new ajax();// 构建 ajax 对象并赋值给变量全局变量 Ajax})()

此时外界再调用 doAjaxGet 和 doAjaxPost 函数时，能够间接通过 Ajax 对象进行实现。

jQuery 是一个疾速、简洁的 JavaScript 库框架，是一个优良的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的主旨是“write Less，Do More”，即提倡写更少的代码，做更多的事件。它封装 JavaScript 罕用的性能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

jQuery 中基于规范的 ajax api 提供了丰盛的 Ajax 函数利用，基于这些函数能够编写大量代码，便能够疾速实现 Ajax 操作。罕用函数有：

ajax(…)
get(…)
getJSON(…)
post(…)
…

阐明:jquery 中 ajax 相干函数的语法可参考官网(jquery.com).

参考官网案例 ….

本章次要介绍了 Ajax 是什么、利用场景、客户端与服务端的通信模型、ajax 编程的根本步骤、封装过程以及 ajax 技术在一些 JS 框架中的利用等，并且重点剖析了在 ajax 编码过程中的一些调试技巧。

关于springboot:14SpringBoot工程中ajax技术分析及应用

Ajax 技术简介

背景剖析？

Ajax 是什么？

Ajax 利用场景？

Ajax 利用模型剖析？

Ajax 疾速入门

Ajax 申请响应过程剖析

Ajax 编程步骤及模板代码剖析

SpringBoot 我的项目 Ajax 技术利用入门剖析

Ajax 根本业务实现

根本业务形容

服务端要害代码设计及实现

客户端要害代码设计及实现

启动服务进行拜访测试剖析

Ajax 技术进阶实现

Ajax 代码的封装

Ajax 编程小框架的实现(理解)

Ajax 技术在 Jquery 中的利用

Jquery 简介

Jquery 中罕用 ajax 函数剖析

Jquery 中 Ajax 函数的根本利用实现

总结(Summary)