关于java:13SpringBoot工程中ajax技术分析及应用

13-SpringBoot工程中ajax技术剖析及利用

springbootjavascript

公布于 11月10日

Ajax 技术简介

背景剖析？

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

Ajax 是什么？

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

Ajax 利用场景？

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

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

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

Ajax 利用模型剖析？

Ajax 疾速入门

Ajax 申请响应过程剖析

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

Ajax形式的申请与响应(要害是客户端不阻塞),如图所示:

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

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

第一步:创立我的项目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 doAjaxStart(){
 //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
//如果是异步客户端执行完send会持续向下执行.
}

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

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

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

点击按钮没反馈

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

跨域拜访

Ajax 根本业务实现

根本业务形容

基于对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);
    }

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

Ajax 技术进阶实现

Ajax 代码的封装

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

ajax get 申请,代码如下:

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

ajax post 申请,代码如下:

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

ajax put 申请,代码如下:

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

ajax delete 申请,代码如下:

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

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

咱们在理论的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对象进行实现。

Ajax 技术在Jquery中的利用

Jquery简介

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

Jquery中罕用ajax函数剖析

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

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

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

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

参考官网案例….

总结(Summary)

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

关于java:13SpringBoot工程中ajax技术分析及应用

13-SpringBoot工程中ajax技术剖析及利用

Ajax 技术简介

背景剖析？

Ajax 是什么？

Ajax 利用场景？

Ajax 利用模型剖析？

Ajax 疾速入门

Ajax 申请响应过程剖析

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

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

Ajax 根本业务实现

根本业务形容

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

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

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

Ajax 技术进阶实现

Ajax 代码的封装

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

Ajax 技术在Jquery中的利用

Jquery简介

Jquery中罕用ajax函数剖析

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

总结(Summary)

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于java:13SpringBoot工程中ajax技术分析及应用

13-SpringBoot工程中ajax技术剖析及利用

Ajax 技术简介

背景剖析？

Ajax 是什么？

Ajax 利用场景？

Ajax 利用模型剖析？

Ajax 疾速入门

Ajax 申请响应过程剖析

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

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

Ajax 根本业务实现

根本业务形容

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

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

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

Ajax 技术进阶实现

Ajax 代码的封装

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

Ajax 技术在Jquery中的利用

Jquery简介

Jquery中罕用ajax函数剖析

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

总结(Summary)

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复