springboot前端ajax 06 优化

把ajax的函数写在html文件中很麻烦，而且有时候需要使用到多个html文件，就这存在反复使用ajax 的get和post方法。

所以，干脆把ajax的反复出现的部分，提出来。
在static目录下创建ajax.js文件。（用file来创建）

内容是：

/定义ajax的post请求函数
function doAjaxPost(url,params,callback){
//1.创建ajax异步请求（这也是ajac技术应用的入口）
var xhr=new XMLHttpRequest();
//2.设置请求，响应过程的状态监听(通过回调函数处理状态变化)
xhr.onreadystatechange=function(){
if(xhr.readyState4&&xhr.status200){
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open(“POST”,url,true);//true表示异步
//post请求必须设置请求头，可以从属性获取
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
//4.发送请求
//post请求将参数写到send方法
xhr.send(params);
//5.对响应结果进行处理(在回调函数中处理)。

	}

//定义ajax的get请求函数
function doAjaxGet(url,params,callback){

	//1.创建ajax异步请求（这也是ajac技术应用的入口）
	var xhr=new XMLHttpRequest();
	//2.设置请求，响应过程的状态监听(通过回调函数处理状态变化)
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4&&xhr.status==200){
			callback(xhr.responseText);
		}
	}
	//3.创建打开与服务端的连接（设置同步或异步）
	xhr.open("GET",url+"?"+params,true);
	//4.发送异步请求
	xhr.send(null)
	//5.处理响应执行结果
	
}

如何使用这个js文件，在script标签中的src属性中写出相对位置

html文件可以使用ajax.js的函数，直接使用，直接用函数名就好。

02.或者使用封装

内容结构是：
用小括号包裹起来的function，是表示文件只要加载就会执行的函数

(function(){
var Ajax=function(){}//这个语句相当于java中声明了一个类
Ajax.prototype={ //这个相当于java的.class字节码文件。每个js函数内部都存在一个原型对象,这个对象会被所有函数实例所共享
doAjaxGet:function(url,params,callback){
//1.创建ajax异步请求对象(这也是ajax技术应用的入口对象)
var xhr=new XMLHttpRequest();
//2.设置请求，响应过程的状态监听(通过回调函数处理状态变化)
xhr.onreadystatechange=function(){
//4 表示通讯结束
//200 表示服务端响应ok
if(xhr.readyState4&&xhr.status200){
// console.log(“response text”,xhr.responseText)
//xhr.responseText用于获取服务端的响应结果
callback(xhr.responseText)
}
}
//3.创建或打开与服务端的链接(设置同步或异步)
xhr.open(“GET”,url+“?”+params,true);//true表示异步
//4.发送异步请求
xhr.send(null);//Get请求send方法中不传递参数
}
,//这个逗号
doAjaxPost: function(url,params,callback){
//1.创建ajax异步请求对象(这也是ajax技术应用的入口对象)
var xhr=new XMLHttpRequest();
//2.设置请求，响应过程的状态监听(通过回调函数处理状态变化)
xhr.onreadystatechange=function(){
//4 表示通讯结束
//200 表示服务端响应ok
if(xhr.readyState4&&xhr.status200){
// console.log(“response text”,xhr.responseText)
//xhr.responseText用于获取服务端的响应结果
callback(xhr.responseText)
}
};
//3.创建与服务端的连接
xhr.open(“POST”,url,true);
//post请求必须要设置此请求头
xhr.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);
//4.发送异步post请求，参数放到send方法中
xhr.send(params);
}
}
window.Ajax=new Ajax(); //外部访问入口
})()

外部引用时候：

在页面使用测试时候：

function doGetActivitys(){
  	
  		//1.定义请求参数
  		var params="";
  		//2.定义请求url (前面加/为绝对路径，不加为相对路径)
  		var url="doFindActivitys";
  		//3.发送异步请求获取服务端资源并更新到页面
  		//doAjaxGet(url,params,callback);
  		Ajax.doAjaxGet(url,params,function(result){
  			//在浏览器控制台输出result
  			console.log(result)
  			doHandleResponseResult(result);
  		});
  	}

---

script标签中直接使用函数（有一个默认的对象来调用这个函数，window。），和小括号使用函数
都是一开始就会使用的