Ajax在springboot项目中的使用_springboot form ajax

目录

Ajax简介

Ajax操作

Ajax-get请求

Ajax-post请求

Ajax的两种封装方式及调用

方式一，封装成ajax.js文件

方式二，封装成ajax.js文件 

---

Ajax简介

Ajax是一种web应用技术，可以借助客户端脚本（javascript）与服务端应用进行异步通讯，获取服务端数据以后，可以进行局部刷新，进而提高数据的响应和渲染速度。所有的Ajax请求都会基于DOM（HTML元素）事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新。

Ajax操作

• Ajax-get请求

    function doAjaxGet(url,params,callback) {
        //创建ajax异步请求对象，即ajax技术应用的入口对象
        var xhr=new XMLHttpRequest();
        //设置请求响应过程的状态监听
        xhr.onreadystatechange=function (){
            if(xhr.readyState==4&&xhr.status==200){
                //4表示通讯结束，200表示服务端响应ok
                // console.log("响应结果：：：",xhr.responseText);
                callback(xhr.responseText);
            }
        }
        // 创建或打开服务端的链接
        xhr.open("GET",url+"?"+params,true);//true表示异步
        // 发送异步请求
        xhr.send();
    }

• Ajax-post请求

    function doAjaxPost(params, url, callback) {
        //创建ajax异步请求对象，即ajax技术应用的入口对象
        var xhr = new XMLHttpRequest();
        //设置请求响应过程的状态监听
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //4表示通讯结束，200表示服务端响应ok
                // console.log("响应结果：：：",xhr.responseText);
                callback(xhr.responseText);
            }
        }
        //创建链接
        xhr.open("POST", url, true);
        //post请求设置请求头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }

Ajax的两种封装方式及调用

• 方式一，封装成ajax.js文件

//post方法
function doAjaxPost(url, params, callback) {
	//1，创建ajax异步请求对象
	var xhr = new XMLHttpRequest();
	//2，设置请求，响应过程的状态监听
	xhr.onreadystatechange = function() {
		//4表示通信结束
		if (xhr.readyState == 4 && xhr.status == 200) {
			//responseText用户获取响应结果
			callback(xhr.responseText)
		}
	}
	//3，创建连接,true表示异步
	xhr.open("POST", url, true);
	//4，post请求必须设置请求头   
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//5，发送异步请求
	xhr.send(params);
}
 
//get方法
function doAjaxGet(url, params, callback) {
	//1，创建ajax异步请求对象
	var xhr = new XMLHttpRequest();
	//2，设置请求，响应过程的状态监听
	xhr.onreadystatechange = function() {
		//4表示通信结束
		if (xhr.readyState == 4 && xhr.status == 200) {
			//responseText用户获取响应结果
			callback(xhr.responseText)
		}
	}
	//3，创建连接,true表示异步
	xhr.open("GET", url + "?" + params, true);
	//4，发送异步请求
	xhr.send(null);
}

调用

<script type="text/javascript" src="/js/ajax.js"></script>

调用

<script type="text/javascript">
 
    function doGetActivitys(){
        //首先定义请求参数，请求的url
        var params="";
        var url="你自己的url";
        //发送请求
        doAjaxGet(url,params,function (result){
            console.log(result);
            doHandleResult(result);
        });
    }
</script>

• 方式二，封装成ajax.js文件 

(function () {
    var Ajax=function (){}
    Ajax.prototype={
        doAjaxGet:function(url,params, callback) {
            //创建ajax异步请求对象，即ajax技术应用的入口对象
            var xhr = new XMLHttpRequest();
            //设置请求响应过程的状态监听
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //4表示通讯结束，200表示服务端响应ok
                    // console.log("响应结果：：：",xhr.responseText);
                    callback(xhr.responseText);
                }
            }
            // 创建或打开服务端的链接
            xhr.open("GET",url+"?"+params,true);//true表示异步
            // 发送异步请求
            xhr.send();
        },
        
        doAjaxPost:function (params, url, callback) {
            //创建ajax异步请求对象，即ajax技术应用的入口对象
            var xhr = new XMLHttpRequest();
            //设置请求响应过程的状态监听
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //4表示通讯结束，200表示服务端响应ok
                    // console.log("响应结果：：：",xhr.responseText);
                    callback(xhr.responseText);
                }
            }
            //创建链接
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }
    window.Ajax=new Ajax();
})()

 引入

<script type="text/javascript" src="/js/ajax.js"></script>

调用

<script type="text/javascript">
 
    function doGetActivitys(){
        //首先定义请求参数，请求的url
        var params="";
        var url="你自己的url";
        //发送请求
        Ajax.doAjaxGet(url,params,function (result){
            console.log(result);
            doHandleResult(result);
        });
    }
</script>