一: 原生的JS封装 ajax
ajax: function(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
// 创建ajax 对象
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 将传入的参数转换成一个数组对象
var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
//post 方法
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
// get 方法
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
// 读取请求相应的状态
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//请求成功时,执行这个函数
opt.success(xmlHttp.responseText);
}else{
// 请求失败时,执行次函数
opt.faild(xmlHttp.responseText);
}
};
},
调用原生的 ajax :
getAllUser () {
this.ajax({
method: 'get',
url: 'http://localhost:8080/user/getUser',
data: {
},
async: true,
success: function(text) {
console.log("获取到的信息:",text);
},
faild: function(text) {
console.log("失败时显示的函数: ",text);
}
});
二: JQuery 封装的 ajax
要引入jquery 哦,我的上一篇博客已经说明的方法,亲自测试过。
$.ajax({
type : "get",
url : "http://localhost:8080/user/getUser",
success : function(data) {
console.log("返回的数据:",data);
},
error : function(){
alert("错误");
}
});
两种方法的比较:
两种方法各有千秋,用 JS 封装的原始 ajax ,比较灵活自己可以根据自己的业务需求来制定不同的方式,jQuery 封装的 ajax 使用起来自己封装的要好,但是不够灵活。
前后端分离是当前web项目开发的主流,会经常遇到跨域问题,解决跨域问题时,就体现了两种方法的优缺点。
1: 用 nginx 作为服务器代理,转换一下请求的地址,但是请求的时请求路径不需要写完整的路径,只需要在 url 前面加上
特定的前缀,当 nginx 收到请求时,会根据 url 的前缀,将请求转向特定的服务,在这种情况下,就显示了自己封装的ajax的
优点,当 url 的前缀发生改变时,只需要修改一个位置即可。
2:用 CorsFilter 作为解决跨域问题,也是只把请求路径的前缀修改一下即可。
例如: