乐趣区

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

jiezi

Ajax 技术简介

背景剖析？

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

Ajax 是什么？

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

Ajax 利用场景？

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

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

AJAX 能够仅向服务器发送并取回必要的数据，并在客户端采纳 JavaScript 解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。但 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,String>> dbList=new ArrayList<>();
    public AjaxController(){Map<String,String> map=new HashMap<String,String>();
    map.put("id","100");
    map.put("city","beijing");
    dbList.add(map);
    map=new HashMap<String,String>();
    map.put("id","101");
    map.put("city","shanghai");
    dbList.add(map);
    }

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

@GetMapping(path={"/doAjaxGet/{city}","/doAjaxGet")
public List<Map<String,String> doAjaxGet(@PathVariable(required=false) String city){List<Map<String,String>> list=new ArrayList<>();
   for(Map<String,String> map:dbList){if(map.get("city").contains(city)){list.add(map);
        }
    }
    return list;
}
@PostMapping("/doAjaxPost")
public String doAjaxPost(@RequestParam Map<String,String>  map){dbList.add(map);
     return "save ok";
}
@PostMapping("/doAjaxPostJson")
public String doAjaxPost(@RequestBody Map<String,String>  map){dbList.add(map);
     return "save ok";
}

@DeleteMapping("/doAjaxDelete/{id}")
public String doDeleteObject(@PathVariable  String id){
      // 基于迭代器执行删除操作
      Iterator<Map<String,String>> it=dbList.iterator();
      while(it.hasNext()){Map<String,String> map=it.next();
           if(map.get("id").equals(id)){it.remove();// 基于迭代器执行删除操作
              }
     }
     return "delete ok";
}
    
@PostMapping("/doAjaxPut")
public String doAjaxPut(@RequestParam Map<String,String>  paramMap){for(Map<String,String> map:dbList){if(map.get("id").equals(paramsMap.get("id"))){map.put("city",paramMap.get("city"))
          }
     }
     return "update ok";
}

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

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

<div>
    <h1>The Ajax 02 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
    <button onclick="doAjaxPut()">Do Ajax Put</button>
</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;
               }
           }
       }
       let params=""xhr.open("GET",`http://localhost/doAjaxGet/${params}`,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=102&city=shenzhen");
}
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/json");
        // 发送申请(post 申请传递数据, 须要将数据写入到 send 办法外部)
        let params={id:103,city:"xiongan"};
        let paramsStr=JSON.stringify(params);
        xhr.send(paramsStr);
}
  • Update 申请形式, 代码如下:
 function doAjaxPut(){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/doAjaxPut",true);
     //post 申请向服务端传递数据, 须要设置申请头, 必须在 open 之后
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     // 发送申请(post 申请传递数据, 须要将数据写入到 send 办法外部)
     xhr.send("id=101&city=tianjin");
    }
  • Delete 申请形式, 代码如下:
 function doAjaxDelete(){let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        let params="102";
        xhr.open("delete",`http://localhost/doAjaxDelete/${params}`,true);
        xhr.send(null);
    }

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

Ajax 技术进阶实现

Ajax 代码的封装

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

xhr 对象的创立

function createXHR(callback){
    //1.create XHR object
    let xhr=new XMLHttpRequest();
    //2.set onreadystatechange
    xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){callback(xhr.responseText);
            }
        }
    }
    return xhr;
}

Get 申请

function ajaxGet(url,params,callback){// 封装 ajax get 申请模板代码
    //1.create xhr and set onreadystate change
    let xhr=createXHR(callback);
    //2.open connection
    xhr.open("GET",`${url}/${params}`,true);
    //3.send request
    xhr.send();}

Post 申请

function ajaxPost(url,params,callback){// 封装 ajax get 申请模板代码
    //1.create xhr and set onreadystate change
    let xhr=createXHR(callback);
    //2.open connection
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //3.send request
    xhr.send(params);
}

post 申请，传递 json 数据

function ajaxPostJSON(url,params,callback){
    //1.create xhr and set onreadystate change
    let xhr=createXHR(callback);
    //2.open connection
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/json");
    //3.send request
    xhr.send(JSON.stringify(params));// 将 json 对象转换为 json 格局字符串提交到服务端
}

Put 申请

function ajaxPut(url,params,callback){// 封装 ajax get 申请模板代码
    //1.create xhr and set onreadystate change
    let xhr=createXHR(callback);
    //2.open connection
    xhr.open("put",url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //3.send request
    xhr.send(params);
}

delete 申请

function ajaxDelete(url,params,callback){// 封装 ajax get 申请模板代码
    //1.create xhr and set onreadystate change
    let xhr=createXHR(callback);
    //2.open connection
    xhr.open("delete",`${url}/${params}`,true);
    //3.send request
    xhr.send();}

创立 ajax-03.html 页面，在页面中别离调用如上函数进行拜访测试，要害代码如下：

<div>
      <h1>The Ajax 03 Page</h1>
      <button onclick="doAjaxGet()">Do Ajax Get</button>
      <button onclick="doAjaxPost()">Do Ajax Post</button>
      <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
      <button onclick="doAjaxDelete()">Do Ajax Delete</button>
      <button onclick="doAjaxPut()">Do Ajax Put</button>
  </div>
  <div id="result"></div>
  <script src="/js/ajax.js"></script>
  <script> //ajax delete request
      function doAjaxDelete(){
          const url="/doAjaxDelete";
          const params="101";
          ajaxDelete(url,params,function(result){alert(result);
          })
      }
      //ajax post put
      function doAjaxPut(){
          const url="/doAjaxPut";
          const params="id=100&city=shenzhen";
          ajaxPut(url,params,function(result){alert(result);
          })
      }
      //ajax post request
      function doAjaxPostJson(){
          const url="/doAjaxPostJSON";
          const params={id:"103",city:"xiongan"};// 服务端须要 @RequestBody
          ajaxPostJSON(url,params,function(result){alert(result);
          })
      }
      //ajax post request
      function doAjaxPost(){
          const url="/doAjaxPost";
          const params="id=102&city=shenzhen";
          ajaxPost(url,params,function(result){alert(result);
          })
      }
      //ajax get request
      function doAjaxGet(){
          const url="/doAjaxGet";
          const params="";
          ajaxGet(url,params,function(result){document.querySelector("#result").innerHTML=result;
          })
      } </script>

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 函数的根本利用实现

业务形容
构建一个 html 页面, 并通过一些 button 事件, 演示 jquery 中相干 ajax 函数的根本利用, 如图所示:

关键步骤及代码设计如下:
第一步: 在 static 目录下增加 jquery-ajax-01.html 页面.
第二步: 在页面上增加要害的 html 元素, 代码如下:

<h1>The Jquery Ajax 01 Page</h1>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doAjaxPost()">$.post(...)</button>
<button onclick="doAjaxGet()">$.get(...)</button>
<button onclick="doAjaxLoad()">$("..").load(...)</button>
<div id="result"></div>
<script src="/js/jquery.min.js"></script>

第三步: 增加 button 事件对应的事件处理函数, 代码如下:

  • ajax 函数利用, 代码如下:
function doAjax(){
   let url="http://localhost/doAjaxGet";
   let params="";
   // 这里的 $ 代表 jquery 对象
   //ajax({})这是 jquery 对象中的一个 ajax 函数(封装了 ajax 操作的根本步骤)
   $.ajax({
      type:"GET",// 省略 type, 默认就是 get 申请
      url:url,
      data:params,
      async:true,// 默认为 true, 示意异步
      success:function(result){//result 为服务端响应的后果
      console.log(result);//ajax 函数外部将服务端返回的 json 串转换为了 js 对象
   }//success 函数会在服务端响应状态 status==200,readyState== 4 的时候执行.
 });
}
  • post 函数利用, 代码如下
function doAjaxPost(){
    let url="http://localhost/doAjaxPost";
    let params="id=101&name=Computer&remark=Computer...";
    $.post(url,params,function(result){$("#result").html(result);
});
  • get 函数利用, 代码如下:
function doAjaxGet(){
    let url="http://localhost/doAjaxGet";
    let params="";
    $.get(url,params,function(result){$("#result").html(result);
    },"text");
}
  • load 函数利用, 代码如下:
function doAjaxLoad(){
    let url="http://localhost/doAjaxGet";
    $("#result").get(url,function(){console.log("load complete")
    });
}

总结(Summary)

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

javascriptspringboot

退出移动版