1-SpringBoot工程中ajax技术的分析和应用

Ajax 技术简介

背景分析：

在互联网高速发展的今天，传统的WEB应用，对于高并发、高性能、高可靠性的要求已迫在眉睫。单线程方式的客户端与服务端交互方式已经不能满足现阶段的需求.我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生。

Ajax是什么？

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

Ajax的优点：

AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。

Ajax的缺点：

Ajax技术最大劣势是不能直接进行跨域访问。

Ajax的快速入门：

Ajax 请求响应过程分析

传统方式是web请求与响应(客户端要等待响应结果),如图所示

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

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

Ajax 编码的基本步骤?(重点是ajax技术的入口-XMLHttpRequest-XHR对象)

第一步:基于dom事件创建XHR对象
第二步:在XHR对象上注册状态监听(监听客户端与服务端的通讯过程)
第三步:与服务端建立连接(指定请求方式GET/POST,请求url,同步还是异步flase/true)
第四步:发送请求(将请求数据传递服务端)

Ajax 编码过程的模板代码如下:

//1.创建XML对象
var xhr=new XMLHttpRequest();
//2.在XHR对象上注册状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){//当状态变化时处理的事情
           console.log(xhr.responseText)//.接收响应信息
    }
}
//3.与服务端建立连接
xhr.open("GET",url,true);
//4.发送请求
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代码：
``
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Title</title>

</head>
<body>
<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>
</body>
</html>
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服务并进行访问测试分析.