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

钟凯 2020-11-11 09:19:53
技术 SpringBoot ajax 工程 13-springboot


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请求与响应(客户端要等待响应结果),如图所示:

image.png

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

image.png

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,如图所示:

image.png

第二步:添加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服务并进行访问测试分析.

image.png

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

第六步:启动及访问过程中的Bug分析

  • 点击按钮没反应

image.png

  • 访问指定属性的对象不存在

image.png

  • 跨域访问

image.png

Ajax 基本业务实现

基本业务描述

基于对ajax技术理解,实现ajax方式的Get,Post,Put,Delete等请求的异步处理,如图所示:
image.png

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

基于业务描述,在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编码过程中的一些调试技巧。

版权声明
本文为[钟凯]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037793570

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple