SpringBoot-Ajax的使用

头像
木安
    阅读 10 分钟

    Ajax概述

    Ajax 是什么？

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

    Ajax 应用场景？

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

    • 商品系统。
    • 评价系统。
    • 地图系统。
    • …..

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

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

    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 脚本代码如下:

    <!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Title</title>
</head>
<body>
    <div>
         <h1>The Ajax 01 Page</h1>
         <fieldset> <legend>Ajax 异步请求</legend>
         <button onclick="doAjaxGet()">Ajax Get Request</button>
         <span id="resultId">Loading data....</span>
         </fieldset>
     </div>
</body>
<script>
     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...");
     }
</script>
</html>

    第五步:启动Tomcat服务并进行访问测试分析
    image.png
    ajax-02.html
    post和get的使用：

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div>
 <h1>The Ajax 02 Page</h1>
 <fieldset> <legend>Ajax 表单请求</legend>
 <form> <input type="text" name="name" id="nameId" class="mingzi" onblur="doCheck()"/>
 <button type="button" onclick="doSave()">Save</button>
 </form> <span id="result"></span>
 </fieldset></div>
<script>
 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引擎
 }
</script>
</body>
</html>

    ajax-03.html

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div>
 <h1>The Ajax 03 Page</h1>
 <fieldset> <legend>Ajax 表单请求</legend>
 <form> <input type="text" name="name" id="nameId" class="mingzi" onblur="doCheck()"/>
 <button type="button" onclick="doSave()">Save</button>
 </form> <span id="result"></span>
 </fieldset></div>
<script>
 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;
         })
        }
</script>
</body>
</html>

    axios-ajax-01.html

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div>
 <button onclick="doAxiosAjaxGet()">axios.get(...)</button>
 <button onclick="doAxiosAjaxPost()">axios.post(...)</button>
 <button onclick="doAxiosAjaxPostJSON()">axios.postJSON(...)</button>
</div>
<div class="result"></div>
<script src="js/axios.min.js"></script>
<script>
 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()
    }
</script>
</body>
</html>

    jquery-ajax-01.html

    <!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Title</title>
</head>
<body>
    <div>
         <button onclick="doAxiosAjaxGet()">axios.get(...)          </button>
         <button onclick="doAxiosAjaxPost()">axios.post(...)</button>
         <button onclick="doAxiosAjaxPostJSON()">axios.postJSON(...)</button>
    </div>
    <div class="result"></div>
    <script src="js/axios.min.js"></script>
    <script>
        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()
    }
</script>
</body>
</html>
    ajax
    木安
    13 声望6 粉丝
    « 上一篇
    SpringBoot-Spring+MyBatis+Vue+BootStrap
    下一篇 »
    后台管理系统-日志管理模块

    引用和评论

    推荐阅读
    头像
    Spring Cloud-Eureka

    木安阅读 1.2k

    头像
    第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）

    刘大猫阅读 188

    头像
    回顾前端页面发送ajax请求方式

    刘大猫阅读 135

    0 条评论
    得票最新