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

Jason 2020-11-10 12:44:31
技术 SpringBoot ajax 工程 13-springboot


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("/doAjaxGet01")
public String doAjaxGet01(){
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="doAjaxGet01()">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/doAjaxGet01",true);//true代表异步
//4.向服务端发送请求
xhr.send(null);//get请求send方法内部不传数据或者写一个null
console.log("===main thread===")
//假如是异步客户端执行完send会继续向下执行.
}

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

image.png

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

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

  • 点击按钮没反应

image.png

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

image.png

  • 跨域访问

image.png

Ajax 基本业务实现

基本业务描述

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

客户端关键代码设计及实现

Ajax 技术进阶实现

Ajax 代码的封装

Ajax 编程小框架的实现

Ajax 技术在Jquery中的应用

Jquery简介

Jquery中常用ajax函数分析

Jquery中Ajax函数的基本应用实现

总结(Summary)

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

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

  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