springcloud使用ajax,SpringBoot-Ajax的使用

分手后的思念是犯贱 2022-09-03 06:26 227阅读 0赞

Ajax概述

Ajax 是什么？

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

Ajax 应用场景？

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:商品系统。

评价系统。

地图系统。

…..

AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。

Ajax 请求响应过程分析

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

![16bea1fd4c766f8de97091c23b18f847.png][]

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

![b973d894d081cecdfdc501e84e3cd210.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的应用

第一步：创建项目13-springbooit-ajax

![bVcLfFn][]

第二步:添加Spring web依赖,代码如下:

org.springframework.boot

spring-boot-starter-web

第三步:创建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元素代码如下:

# The Ajax 01 Page #

Ajax 异步Get请求

Ajax Get Request

Data is Loading ...

javascript 脚本代码如下:

Title

# The Ajax 01 Page #

Ajax 异步请求

Ajax Get Request

Loading data....

function doAjaxGet() \{

debugger;

//1，创建XHR对象(此对象是ajax技术应用的入口对象，发送异步请求，处理响应结果都是通过此对象实现)

var xhr = new XMLHttpRequest();

//2，设置状态监听

xhr.onreadystatechange = function () \{//时间监听函数(处理客户端与服务端通过过程中产生的数据)

//readyState的值0，1，2，3，4

//0表示还未执行open方法

//1表示已执行open方法但未执行send方法

//2表示已执行send方法

//3表示客户端正在接受服务端响应的数据

//4表示客户端已经完成响应数据的接收

//200表示服务端的处理过程是ok的

if (xhr.readyState == 4 && xhr.status == 200) \{

var result = xhr.responseText;//获取服务端响应的文本数据

document.getElementById("resultId").innerHTML = result;

//3，建立与服务端的连接

xhr.open("GET", "http://localhost/doAjaxGet", true);//true表示异步请求

//4，发送请求

xhr.send(null);//将请求交给ajax引擎

console.log("do other...");

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

![bVcLfFs][]

ajax-02.html

post和get的使用：

Title

# The Ajax 02 Page #

Ajax 表单请求

Save

function doSave()\{//发送异步请求,检查name是否存在

//1.创建xhr对象(Ajax技术应用的入口)

let xhr=new XMLHttpRequest();

//2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)

xhr.onreadystatechange=function()\{

if(xhr.readyState==4&&xhr.status==200)\{

document.getElementById("result").innerHTML=xhr.responseText;

//3.建立Get连接(get请求传参数,要将参数拼接到url中)

let name=document.forms\[0\].name.value;//获取表单中name对应的value属性值

console.log("name",name);

let url="http://localhost/doSave";

xhr.open("POST",url,true);

//post请求假如需要向服务端传递参数,则必须在open之后设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4.发送异步POST请求(参数需要写到send方法内部)-表单数据或数据量比较大时

xhr.send(\`name=$\{name\}\`);//通过模板字符串\`\`和$\{\}表示拼接url

function doCheck()\{//发送异步请求,检查name是否存在

//1.创建xhr对象

debugger;

var xhr = new XMLHttpRequest();

//2，设置状态监听

xhr.onreadystatechange = function () \{

if (xhr.readyState == 4 && xhr.status == 200) \{

var result = xhr.responseText;

document.getElementById("result").innerHTML = result;

//3，建立与服务端的连接Get(get请求传参，要将参数拼接到URl中)

let name=document.forms\[0\].name.value;//获取表单中name对应的value属性值

//let name=document.getElementById("nameId").value;//基于节点id获取

//let name=document.querySelector("\#nameId").value;//基于id选择器(前缀"\#")

//let name=document.querySelector(".mingzi").value;//基于class选择器(前缀".")

//let name=document.querySelector("input").value; let url=\`http://localhost:1314/doCheck?name=$\{name\}\`;//通过模板字符串\`\`和$\{\}拼接url

xhr.open("GET",url, true);

//xhr.open("GET", "http://localhost/doCheck?name="+name, true);

//4，发送请求

xhr.send(null);//将请求交给ajax引擎

ajax-03.html

Title

# The Ajax 03 Page #

Ajax 表单请求

Save

function doAjaxGet(url,params,callback)\{

//1.创建xhr对象

debugger;

var xhr = new XMLHttpRequest();

//2，设置状态监听

xhr.onreadystatechange = function () \{

if (xhr.readyState == 4 && xhr.status == 200) \{

var result = xhr.responseText;

document.getElementById("result").innerHTML = result;

//3，建立与服务端的连接Get(get请求传参，要将参数拼接到URl中)

xhr.open("GET",\`$\{url\}?$\{params\}\`, true);

//4，发送请求

xhr.send(null);//将请求交给ajax引擎

function doAjaxPost(url,params,callback) \{

//1.创建xhr对象(Ajax技术应用的入口)

let xhr = new XMLHttpRequest();

//2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)

xhr.onreadystatechange = function (callback) \{

if (xhr.readyState == 4 && xhr.status == 200) \{

callback(xhr.responseText);

//3.建立Get连接(get请求传参数,要将参数拼接到url中)

xhr.open("POST", url, true);

//post请求假如需要向服务端传递参数,则必须在open之后设置请求头

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//4.发送异步POST请求(参数需要写到send方法内部)-表单数据或数据量比较大时

xhr.send(\`name=$\{params\}\`);//通过模板字符串\`\`和$\{\}表示拼接url

function doSave() \{//发送异步请求,检查name是否存在

//1,定义请求url

let url = "http://localhost:1314/doSave";

let params = document.forms\[0\].name.value;//获取表单中name对应的value属性值

doAjaxPost(url, params, function (result) \{

document.getElementById("result").innerHTML = result;

\})

function doCheck() \{//发送异步请求,检查name是否存在

let name = document.forms\[0\].name.value;//获取表单中name对应的value属性值

let params = \`name=$\{name\}\`;

let url = \`http://localhost:1314/doCheck\`;//通过模板字符串\`\`和$\{\}拼接url

doAjaxGet(url, params, function (result) \{

document.getElementById("result").innerHTML = result;

\})

axios-ajax-01.html

Title

axios.get(...)

axios.post(...)

axios.postJSON(...)

function doAxiosAjaxPostJSON()\{

//1,url

let url="http://localhost/doPostJSON";

//2,params

let params=\{"msg":"hello axios"\};

//3,send axios ajax request

axios.post(url,params)

.then(function (result)\{//callback function

document.querySelector(".result").innerHTML=JSON.stringify(result.data);//原生的JS代码

\})

.catch()

function doAxiosAjaxPost()\{

//1,url

let url="http://localhost/doPost";

//2,params

let params="msg=hello axios";

//3,send axios ajax request

axios.post(url,params)

.then(function (result)\{//callback function

document.querySelector(".result").innerHTML=JSON.stringify(result.data);//原生的JS代码

\})

.catch()

function doAxiosAjaxGet()\{

//1,url

let url="http://localhost/doAjax";

//2,params

let params=\{params: \{"msg":"hello axios"\}\}

//3,send ajax get request

axios.get(url,params)

.then(function (result)\{//callback function

document.querySelector(".result").innerHTML=JSON.stringify(result.data);//原生的JS代码

\})

.catch()

jquery-ajax-01.html

Title

axios.get(...)

axios.post(...)

axios.postJSON(...)

function doAxiosAjaxPostJSON()\{

//1,url

let url="http://localhost/doPostJSON";

//2,params

let params=\{"msg":"hello axios"\};

//3,send axios ajax request

axios.post(url,params)

.then(function (result)\{//callback function

document.querySelector(".result").innerHTML=JSON.stringify(result.data);//原生的JS代码

\})

.catch()

function doAxiosAjaxPost()\{

//1,url

let url="http://localhost/doPost";

//2,params

let params="msg=hello axios";

//3,send axios ajax request

axios.post(url,params)

.then(function (result)\{//callback function

document.querySelector(".result").innerHTML=JSON.stringify(result.data);//原生的JS代码

\})

.catch()

function doAxiosAjaxGet()\{

//1,url

let url="http://localhost/doAjax";

//2,params

let params=\{params: \{"msg":"hello axios"\}\}

//3,send ajax get request

axios.get(url,params)

.then(function (result)\{//callback function

document.querySelector(".result").innerHTML=JSON.stringify(result.data);//原生的JS代码

\})

.catch()

[16bea1fd4c766f8de97091c23b18f847.png]: /images/20220829/734597bd532149c6bddfc617403ce2a5.png
[b973d894d081cecdfdc501e84e3cd210.png]: /images/20220829/58ba15c76014410a8b6f3b489f638147.png
[bVcLfFn]: /images/20220829/407812407bec43e4b500689bf8074e1d.png
[bVcLfFs]: /images/20220829/6a1d796d5c93494eb873bcb1f5a04bf5.png