zl程序教程

您现在的位置是:首页 >  前端

当前栏目

AJAX封装闭包

封装AJAX 闭包
2023-09-27 14:29:05 时间
ajax.js
! function($, ouye) {
var _currentInterAddress = '';


function _options(showLoading, callback) {
var min =true;
return {
type: 'POST',
url: '',
data: {},
//contentType: 'application/json; charset=utf-8', 默认是application/x-www-form-urlencoded
dataType: 'JSON',
timeout: 60000,
async: true,
cache: false,
beforeSend: function(xhr, settings) {
if (showLoading && window.loading) {
loading.open(min);
}
},
success: function(data, status, xhr) {
var d ;
try{
d= JSON.parse(data)
}catch(SyntaxError){
d=data
}
ouye.log('***(' + _currentInterAddress + ')ajax成功返回数据:' +  d);
if ($.isFunction(callback)) {
callback({
status: '000000',
responseBody: d
});
}
},
error: function(xhr, errorType, error) {
ouye.log('***(' + _currentInterAddress + ')ajax失败返回数据:errorType=' + errorType + '  xhr=' + JSON.stringify(xhr) + ' error=' + error);
var errorMsg = '请求失败,请重试!';
if (errorType === "abort") {
//无网络
errorMsg = "网络已断开";
} else if (errorType === "timeout") {
//超时
errorMsg = "系统连接超时";
} else if (errorType === "error") {
//服务器或者客户端错误
switch (xhr.status) {
case 303:
errorMsg = '重定向';
//survey.redirection('../pages/303.html');
break;
case 404:
errorMsg = "未找到服务器";
//survey.redirection('../pages/404.html');
break;
case 500:
//内部服务器错误。
errorMsg = "服务器未响应";
break;
case 503:
//服务不可用。这个错误代码为IIS6.0所专用。
errorMsg = "服务器不可用";
break;
case 504:
//网关超时。
errorMsg = "网关超时";
break;
}
}
if ($.isFunction(callback)) {
callback({
status: '000001',
errorMsg: errorMsg
});
}
},
complete: function(xhr, status) {
if (showLoading && window.loading) {
var time = window.setInterval(function() {
var loadingExist = loading.isloaded();
if (loadingExist) {
window.clearInterval(time);
loading.close();
}
}, 500);
}
}
};
}


function _ajax(params, callback) {
var host=/localhost|127.0.0.1/.test(window.location.host)?'139.196.178.135':window.location.host;
var server=window.location.protocol+'//'+host+'/light-cloud-web2/';
//是否加载loading框
var showLoading = typeof params.showLoading === 'boolean' ? params.showLoading : true;
//ajax请求地址
var requestURL = server + params.url || '';
//请求参数
var requestData = params.request || {};
//请求方式,默认是POST
var requestType = params.method || 'POST';
//实例化ajax对象
var requestObj = new _options(showLoading, callback);


//如果是本地文件不作处理
if (requestURL.indexOf("file://") === 0) {
if ($.isFunction(callback)) {
callback({
status: '000002',
errorMsg: '本地浏览,不作数据交互处理!'
});
}
return;
}


//轻应用先加个统一渠道参数
//requestData.channel = 'z';
//深度合并新的ajax请求参数
$.extend(true, requestObj, {
data: requestData,
type: requestType,
url: requestURL
});


//记录ajax发起日志
var req = JSON.stringify(requestData);
ouye.log('***(' + requestURL + ')ajax请求数据:' + req);
_currentInterAddress = requestURL;
//发起ajax请求
$.ajax(requestObj);
}
ouye.ajax = _ajax;

}(window.jQuery, window.ouye);


ouye.js

//zhoufangxu
//2017-01-02
var ouye=ouye || {};
!function(O){
O.isNull = function(value){
return typeof value =='undefined' || value==="" ||value==null ||value==undefined;
};


O.isNotNull = function (value){
return !common.isNull(value);
};


/**二秒后消失的弹出框
*@param message:消息内容,只传字符串
*/
O.Prompt=function(message){
//创建prompt框样式
var type="width:60%;padding:5px;line-height:20px; border-radius:15px; color:#fff; background-color:#6c6c6c; text-align:center;font-size:.8em; top:65%;opacity:0;position:fixed;left:20%;z-index:1003;";
//创建prompt框
var h=$("<div style='"+type+"' id='e_ui_prompt'>"+message+"</div>");
$('body').append(h);


//改变透明度
var i=0;
var t=setInterval(function(){
i=i+0.1;
if(i>=1){
clearInterval(t);
i=0;
}else{
$(h).css('opacity',i);
}
},80);


//2秒后消失
setTimeout(function(){
var j=$(h).css('opacity');
var ti=setInterval(function(){
j=j-0.1;
if(j<=0){
clearInterval(ti);
$(h).remove();
}else{
$(h).css('opacity',j);
}
},80);
},4000);
};
O.log=function(msg){
msg = typeof msg === 'object' ? JSON.stringify(msg) : msg;
var _d = new Date();
var s = _d.getFullYear() + '-' + (_d.getMonth() + 1) + '-' + _d.getDate() + ' ' + _d.getHours() + ':' + _d.getMinutes() + ':' + _d.getSeconds();
var _tit = '[' + s + '(' + ouye.getPageName() + ')] ' + msg;
console && console.log && console.log(_tit);
};
//获取当前页面的名称
O.getPageName = function() {
var pathname = window.location.pathname;
var index = pathname.lastIndexOf('\/');
if (index > 0) {
pathname = pathname.substr(index + 1);
}
return pathname;
};
//获取地址栏参数
O.getHash = function(key, url) {
var hash;
if (!!url) {
hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
hash = (hash == url) ? "" : hash;
} else {
hash = self.location.search;
}


hash = "" + hash;
hash = hash.replace(/^[?#]/, '');
hash = "&" + hash;
var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));
if (!val || val.length < 1) {
return null;
} else {
return decodeURIComponent(val[1]);
}
};
//动态加载文件,只能加载CSS和js文件
O.loadFiles = function(path, callback) {
if (!path) {
$.isFunction(callback) && callback({
status: false,
error: '请传入有效的路径'
});
return;
}


var exist = O.isInclude(path);
if (typeof exist === 'boolean' && exist) {
$.isFunction(callback) && callback({
status: true
});
return;
}
var js = !exist[1];
var el = document.getElementsByTagName('body')[0];
var node = document.createElement('script');
path += (path.indexOf('?') > -1 ? '&' : '?') + 't=' + new Date().getTime();
if (js) {
node.type = 'text/javascript';
node.src = path;
} else {
el = document.getElementsByTagName('head')[0];
node = document.createElement('link');
node.rel = 'stylesheet';
node.type = 'text/css';
node.href = path;
}
//所有浏览器加载css都会走onload方法
node.onload = function() {
if (js) {
O.log(path + '文件加载成功');
$.isFunction(callback) && callback({
status: true
});
} else {
var _n = 0;
var _poll = function(node, callback) {
var isLoaded = false;
if (/webkit/i.test(navigator.userAgent)) {
//webkit
if (node.sheet) {
isLoaded = true;
}
} else if (node.sheet) {
// for Firefox
try {
if (node.sheet.cssRules) {
isLoaded = true;
}
} catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if (isLoaded) {
O.log(path + '文件加载成功');
$.isFunction(callback) && callback({
status: true
});
} else {
if (++_n > 10) {
O.log(path + '文件加载失败');
callback({
status: false,
error: 'CSS文件加载失败,请重试...'
});
} else {
window.setTimeout(function() {
_poll(node, callback);
}, 100);
}
}
};


_poll(node, callback);
}
};
node.onerror = function(e) {
O.log(path + '文件加载失败');
callback({
status: false,
error: (js ? 'script' : 'CSS') + '文件加载时发生错误,请重试...'
});
};


el.appendChild(node);
};
//文件是否存在
O.isInclude = function(path) {
var index = path.lastIndexOf('\/');
var name = index > 0 ? path.substr(index + 1) : path;
var css = /css$/i.test(name);
var tag = 'link';
var pt = 'href';
if (!css) {
tag = 'script';
pt = 'src';
}


var elements = document.getElementsByTagName(tag);
for (var i = 0; i < elements.length; i++) {
if (elements[i][pt].indexOf(name) > -1) {
return true;
}
}
return [false, css];
};
//增加cookie
O.addCookie = function(name, value, expiresHours) {
var cookieString = name + "=" + escape(value);
//判断是否设置过期时间
if (expiresHours) {
if (expiresHours > 0) {
var date = new Date();
date.setTime(date.getTime + expiresHours * 3600 * 1000);
cookieString = cookieString + "; expires=" + date.toGMTString();
}
}
document.cookie = cookieString;
};


//获取cookie
O.getCookie = function(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (arr[0] == name) return arr[1];
}
return '';
};


//删除cookie
O.deleteCookie = function(name) {
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=v; expires=" + date.toGMTString();
};
}(ouye);


loading.js

var loading = loading || {};
! function($) {
function _template(min) {
var $t = '<div class="ui-loading-mark" id="ui-loading-mark"></div>';
var _tlp = [];
_tlp.push('<div class="ui-loading-box');
if (min) {
_tlp.push(' ui-loading-box-min');
}
_tlp.push('" id="ui-loading-box">');
_tlp.push(' <div class="ui-loading-spinner">');
for (var i = 1; i < 4; i++) {
_tlp.push('<div class="ui-loading-spinner-container');
if (min) {
_tlp.push(' ui-loading-spinner-container-min');
}
_tlp.push(' ui-loading-container' + i + '">');
for (var j = 1; j < 5; j++) {
_tlp.push('<div class="circle' + j + '"></div>');
}
_tlp.push('</div>');
}
_tlp.push(' </div>');
_tlp.push('</div>');
return [$t, _tlp.join('')];
}


function _open(min) {
var _path = '../../compoent/ui/loading/loading.css';
ouye.loadFiles(_path, function(responset) {
if (responset.status) {
if ($('#ui-loading-mark').size() === 0) {
var tlp = _template(min);
$('body').append(tlp[0]).append(tlp[1]);
}
} else {
ouye.Prompt(responset.error);
}
});
}


function _close() {
if ($('#ui-loading-mark').size() > 0) {
$('#ui-loading-mark,#ui-loading-box').remove();
}
}
//loading框是否已在页面加载好的标志
function _isloaded() {
return $('.ui-loading-mark');
}


loading = {
open: function(min) {
_open(min);
},
close: function() {
_close();
},
isloaded: function() {
return _isloaded();
}
};
}(window.jQuery, loading);


loading.css

/**
 * 自定义组件
 * 等待加载框 loading
 */


/*CSS3.0实现loading框*/
.ui-loading-mark {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
}
.ui-loading-box {
    width: 120px;
    height: 120px;
    background-color: transparent;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    margin: -60px 0 0 -60px;
}
.ui-loading-box-min{
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
}
.ui-loading-spinner {
    width: 100%;
    height: 100%;
    position: relative;
}
.ui-loading-spinner .ui-loading-spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.ui-loading-spinner .ui-loading-spinner-container > div {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.ui-loading-spinner .ui-loading-spinner-container-min > div{
    width: 15px;
    height: 15px;
}
.ui-loading-spinner .ui-loading-container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.ui-loading-spinner .ui-loading-container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
.ui-loading-spinner .circle1 {
    top: 0;
    left: 0;
}
.ui-loading-spinner .circle2 {
    top: 0;
    right: 0;
}
.ui-loading-spinner .circle3 {
    right: 0;
    bottom: 0;
}
.ui-loading-spinner .circle4 {
    left: 0;
    bottom: 0;
}
.ui-loading-spinner .ui-loading-container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.ui-loading-spinner .ui-loading-container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
.ui-loading-spinner .ui-loading-container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.ui-loading-spinner .ui-loading-container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.ui-loading-spinner .ui-loading-container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.ui-loading-spinner .ui-loading-container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.ui-loading-spinner .ui-loading-container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.ui-loading-spinner .ui-loading-container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.ui-loading-spinner .ui-loading-container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.ui-loading-spinner .ui-loading-container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.ui-loading-spinner .ui-loading-container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0.0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}
@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}