AJAX封装闭包
! 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);
}
}
相关文章
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)
- C/C++用结构体封装
- 不要再封装各种Util工具类了,这个神级框架值得拥有
- 微信小程序前端promise封装
- 《贝叶斯思维:统计建模的Python学习法》一2.5 封装框架
- macOS SwiftUI 封装组件之 不确定指示器NSProgressIndicator(教程含源码)
- jsoncpp封装和解析字符串、数字、布尔值和数组
- 封装Promise版本的ajax方法
- Cadence 如何通过.dra(封装)查看使用哪个.pad(焊盘)文件
- Java基础篇:封装、继承、多态三大特性
- Java语言面向对象三大核心特性之【封装】
- 【Linux高级环境编程】线程同步的封装
- Unity 工具 之 获取 OpenWeatherMap 的天气(可以获取国内外的天气)的简单封装
- 51串口通信C封装
- axios基本用法、axios如何发起网络请求?如何二次封装axios?
- .Net Core 简单定时任务框架封装
- 学习旧岛小程序 (4)封装api 请求