ajax long 不对,ajax 请求long数据溢出的转换问题以及fetch api兼容性问题

旧的ajax请求对象：XmlHttpRequest

XmlHttpRequest在web开发中，已经有很长时间，在使用上面只要网页里牵涉到异步加载的，几乎都是使用XmlHttpRequest这个对象进行异步数据访问。由于时间长，所以各大浏览器/手机/pc等都对其api支持比较完善。以下是在项目中些的一个公共的ajax，这里备注以下

//这是最终执行ajax的方法，里面做了很多判断

var XmlHttpPost = function(data) {

try {

_appurl = data.serverInterface != undefined ? _interfaceAppUrl.format(data.serverInterface) : _appurl;

} catch(e) {

//TODO handle the exception

}

var ajaxData = {

type: "post",

contentType: data.contentType ? data.contentType : "application/json;charset=utf-8",

async: data.sync ? data.sync : false,

timeout: data.timeout ? data.timeout : 5000,

url: data.url ? data.url : _appurl,

dataType: data.dataType ? data.dataType : 'json',

data: data.data ? data.data : "",

jsonp: data.jsonp ? data.jsonp : "weicyjsoncallback",

success: data.success ? data.success : function(result) {

if(_AppDebug) {

console.log(result)

}

},

complete: data.complete ? data.complete : completeDefault,

error: data.error ? data.error : function(er) {

try {

mui.toast("访问出错，请检查网络连接");

} catch(e) {

//TODO handle the exception

alert("访问出错");

}

}

};

excFunctionAjax(ajaxData);

}

var excFunctionAjax = function(ajaxData) {

var next = GetUrlRelativePath(); //获取房钱的url

var first = GetUrlRelativePath(ajaxData.url);//获取ajaxData对象传入的url

//如果不是jsonp，并且域名不相同，或者链接里面域名为null,则进行普通的ajax请求

if((ajaxData.dataType != 'jsonp') || (first.domain == next.domain) || first.domain == "") {

//判断地址是否有效，若无效

if(ajaxData.dataType == 'jsonp') {

ajaxData.dataType = "json";

}

if(!tools.Kit.isURL(ajaxData.url)) {

//地址无效，判断配置是否是tomcat根目录，若是，则进行if，否则进行else

if(Kit_Config.isRoot) {

ajaxData.url = next.httpType + next.domain + ajaxData.url;

} else {

ajaxData.url = next.httpType + next.domain + Kit_Config.webProject + ajaxData.url;

}

} else { //若是有效域名，则对域名进行相应的封装请求

//ajaxData.url = next.httpType+next.domain+first.url;

}

//进行ajax请求

if(_AppDebug) {

console.log(ajaxData.type + "请求的url：" + ajaxData.url);

}

//alert("ajax+++"+JSON.stringify(ajaxData));

$.ajax({

type: ajaxData.type,

url: ajaxData.url,

data: ajaxData.data,

contentType: ajaxData.contentType || "application/x-www-form-urlencoded; charset=UTF-8",

headers: {

"openid": localToken[0],

"token": localToken[1],

'url': window.location.href

},

dataType: "text",

success: function(data) {

if(ajaxData.type == "GET" || ajaxData.type == 'get'){

data = data.replace(/:\s\d{18}/g, ":\"@!#@!#$&\"").replace(/:\d{18}/g, ":\"@!#@!#$&\"").replace(/@!#@!#:\s/g,"").replace(/@!#@!#:/g,"");

}

data = JSON.parse(data);

ajaxData.success(data);

},

complete: function(XMLHttpRequest, status) {

ajaxData.complete(XMLHttpRequest, status);

},

error: function(er) {

console.log(er);

ajaxData.error(er);

}

});

} else {

//不用验证，直接进行ajax请求

$.ajax({

type: ajaxData.type,

url: ajaxData.url,

dataType: "text",  //上面ajaxData中已经传入了相应的dataType格式，但是这里直接写死是因为项目中有一个需求，会返回一个很长的Long类型的数据，如果按照json传递过来，在ajax内部会使用JSON.parse()进行转换，这样由于服务器的long和javascript的long位数不同，所以会造成溢出。所以最终得到的long并非服务器的long，而是截取之后的long。网上有一个bigint的js库，但是只适用于单个数据，服务器传递过来又不可能是单个数据，所以这里直接以文本方式进行接送，然后本地通过正则表达式进行处理。

data: ajaxData.data,

headers: {

"openid": localToken[0],

"token": localToken[1],

'url': window.location.href

},

contentType: ajaxData.contentType || "application/x-www-form-urlencoded; charset=UTF-8",

success: function(data) {

if(ajaxData.type == "GET" || ajaxData.type == 'get'){//只转换get请求的，因为post请求的一般不会返回很长的数据。如果项目有需求可以释放这里为全部，这里只是将等于18位的给转换了

data = data.replace(/:\s\d{18}/g, ":\"@!#@!#$&\"").replace(/:\d{18}/g, ":\"@!#@!#$&\"").replace(/@!#@!#:\s/g,"").replace(/@!#@!#:/g,"");

}

data = JSON.parse(data);//因为得到的是text文本，所以这里要将文本转换为json对象传递给外部使用

ajaxData.success(data);

},

complete: function(XMLHttpRequest, status) {

ajaxData.complete(XMLHttpRequest, status);

},

error: function(er) {

console.log(er);

ajaxData.error(er);

}

});

}

}

var GetUrlRelativePath = function(relUrl) {

var url = relUrl || window.location.href.toString();

if(!tools.Kit.isURL(url)) {

var urlPath = {

httpType: "", //返回http方式

domain: "", //返回域名

url: url //返回url地址

};

return urlPath;

} else {

var arrUrl = url.split("//");

var start = arrUrl[1].indexOf("/");

var domain = arrUrl[1].substring(0, start);

var relUrl = arrUrl[1].substring(start); //stop省略，截取从start开始到结尾的所有字符

//   if(relUrl.indexOf("?") != -1){

//   relUrl = relUrl.split("?")[0];

//   }

var urlPath = {

httpType: arrUrl[0] + "//", //返回http方式

domain: domain, //返回域名

url: relUrl //返回url地址

};

return urlPath;

}

}

上面就是xmlhttprequest的自己的封装，当时包含了跨域自动判断，但是由于项目不需要(使用服务器的corse)，所以删除了。【注意，ajax jsonp只支持get，因为它是通过将服务器数据封装了一个javascript代码，引用javascript是不用考虑跨域的这样解决的】

新的ajax请求对象：fetch

因为新的fetch 在浏览器的支持还不是太完善【pc基本完全支持，手机端主要表现在iphone6s 以下的机型】，主要表现为，机型支持fetch，但是支持的不完全，就会导致有一些地方会出现莫名其妙的错误。大部分浏览器能够访问到后台，但是后台传递过来的数据在前端解析就会出现类型错误TypeError等问题

var fetchPost = function(data) {

try {

_appurl = data.serverInterface != undefined ? _interfaceAppUrl.format(data.serverInterface) : _appurl;

} catch(e) {

//TODO handle the exception

}

var _postData = new FormData();

_postData.append("json", data.data || "");

/*

try {

let response = await fetch(data.url || _appurl,{method: "POST",body:_postData});

let _dataAwait = await response.json();

console.log(_dataAwait);

return _dataAwait;

} catch(e) {

console.log("Oops, error", e);

}

*/

fetch(data.url || _appurl, {

method: "POST",

headers: {

'Accept': 'application/json, text/javascript, */*; q=0.01',

'Content-Type': 'application/json;charset=UTF-8',

'openid': localToken[0],

'token': localToken[1],

'url': window.location.href

},

body: data.data

}).then(function(rsp) {

if(rsp.ok) {

//console.log(response);

//data.success(rsp.json());

//console(BigInteger(res.json())+"+++");

return rsp.json();

} else {

console.log("error fetch");

}

}).then(function(dataJSON) {

data.success(dataJSON);

if(_AppDebug) {

console.log("POST地址:" + data.url || _appurl);

console.log("debug======:" + JSON.stringify(dataJSON));

}

}).catch(function(e) {

if(_AppDebug) {

console.log("POST地址:" + data.url || _appurl);

console.log("debug====:error ajax " + e);

}

try {

//alert("错误日志："+e);

mui.toast("访问出错，请检查网络连接");

} catch(e) {

//TODO handle the exception

alert("访问出错");

}

})