关于springboot:13SpringBoot工程中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("/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 服务并进行拜访测试剖析.

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

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

点击按钮没反馈

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

跨域拜访

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

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

Ajax 技术简介

背景剖析？

Ajax 是什么？

Ajax 利用场景？

Ajax 利用模型剖析？

Ajax 疾速入门

Ajax 申请响应过程剖析

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

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

Ajax 根本业务实现

根本业务形容

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

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

Ajax 技术进阶实现

Ajax 代码的封装

Ajax 编程小框架的实现

Ajax 技术在 Jquery 中的利用

Jquery 简介

Jquery 中罕用 ajax 函数剖析

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

总结(Summary)