define(function (require, exports, module) {
var $ = require('jquery');
//根据关键的几个参数统一创建ajax对象
function create(_url, _method, _data, _async, _dataType) {
//添加随机数
if (_url.indexOf('?') > -1) {
_url = _url + '&rnd=' + Math.random();
} else {
_url = _url + '?rnd=' + Math.random();
}
//为请求添加ajax标识,方便后台区分ajax和非ajax请求
_url += '&_ajax=1';
//返回jquery创建的ajax对象,以便外部拿到这个对象以后可以通过
//.done .fail .always来添加回调
//这么做是为了保留jquery ajax中好用的部分
return $.ajax({
url: _url,
dataType: _dataType,
async: _async,
method: _method,
data: _data
});
}
//ajax就是本组件全局唯一的实例,它的实例方法通过后面的循环代码添加
//methods对象配置ajax各个实例方法的参数:
//name: 方法名称
//method: http请求方法,get or post
//async: 发送请求时是否异步
//dataType: 返回的数据类型,html or json
var ajax = {},
methods = [
{
name: 'html',
method: 'get',
async: true,
dataType: 'html'
},
{
name: 'get',
method: 'get',
async: true,
dataType: 'json'
},
{
name: 'post',
method: 'post',
async: true,
dataType: 'json'
},
{
name: 'syncGet',
method: 'get',
async: false,
dataType: 'json'
},
{
name: 'syncPost',
method: 'post',
async: false,
dataType: 'json'
}
];
//由于二次封装需要对外提供的每个实例方法创建ajax的逻辑是相同的
//所以通过这种方式统一定义各个实例方法
//关键代码为下面代码中的那个立即调用的函数
//它返回了一个新的闭包函数作为实例方法
for (var i = 0, l = methods.length; i < l; i++) {
ajax[methods[i].name] = (function (i) {
return function () {
/**
* 每个实例方法接收三个参数
* 第一个表示要请求的地址
* 第二个表示要提交到后台的数据,是一个object对象,如{param1: 'value1'}
* 第三个表示后台返回的数据类型,最最常用的就是html or json,绝大部分情况下这个参数不用传,会使用methods里面定义的dataType
*/
var _url = arguments[0],
_data = arguments[1],
_dataType = arguments[2] || methods[i].dataType;
return create(_url, methods[i].method, _data, methods[i].async, _dataType);
}
})(i);
}
return ajax;
});
define(function (require, exports, module) {
var Ajax = require('mod/ajax');
//以GET方式请求html内容
Ajax.html('html/demo', {
param1: 'value1',
param2: 'value2'
}).done(function(response){
//请求成功的回调
}).fail(function(){
//请求失败的回调
}).always(function(){
//请求完成的回调
});
//以GET方式请求json数据
Ajax.get('api/demo', {
param1: 'value1',
param2: 'value2'
}).done(function(response){
//请求成功的回调
}).fail(function(){
//请求失败的回调
}).always(function(){
//请求完成的回调
});
//以POST方式请求json数据
Ajax.post('api/demo', {
param1: 'value1',
param2: 'value2'
}).done(function(response){
//请求成功的回调
}).fail(function(){
//请求失败的回调
}).always(function(){
//请求完成的回调
});
//以GET方式发送同步请求,获取json数据
Ajax.syncGet('api/demo', {
param1: 'value1',
param2: 'value2'
}).done(function(response){
//请求成功的回调
}).fail(function(){
//请求失败的回调
}).always(function(){
//请求完成的回调
});
//以POST方式发送同步请求,获取json数据
Ajax.syncPost('api/demo', {
param1: 'value1',
param2: 'value2'
}).done(function(response){
//请求成功的回调
}).fail(function(){
//请求失败的回调
}).always(function(){
//请求完成的回调
});
});
define(function (require, exports, module) {
var $ = require('jquery');
var Ajax = require('mod/ajax');
//缓存列表
var cache = {};
/**
* 生成缓存索引:
* 由于索引是根据url和data生成的(data是一个对象,存放Ajax要提交到后台的数据)
* 所以要想同一个url,同样的data能够有效地使用缓存,
* 切勿在url和data中包含每次可变的参数值,如随机数等
* 比如有一个请求:
* url: aaa/bbb/cccc?r=0.312738
* data: {name: 'json'}
* 其中url后面的r是一个随机数,每次外部发起这个请求时,r的值都会变化
* 由于r每次都不同,最终会导致缓存索引不相同,结果缓存就无法命中
* 注:随机数可放置在原始的Ajax组件内
*
* 还有:如果是同一个接口,最好在同一个页面内,统一url的路径类型,要么都是相对路径,要么都是绝对路径
* 否则也会导致缓存无法有效管理
*/
function generateCacheKey(url, data) {
return url + $.param(data);
}
return function (opts) {
opts = opts || {};
var cacheInterval = opts.cacheInterval || (1000 * 60 * 60);//缓存有效时间,默认60分钟
var proxy = {};
for (var i in Ajax) {
if (Object.prototype.hasOwnProperty.call(Ajax, i)) {
//在proxy对象上定义Ajax组件每一个实例方法的代理
//注意这个立即调用的函数表达式
//它返回了一个闭包函数就是最终的代理方法
proxy[i] = (function (i) {
return function () {
var _url = arguments[0],
_data = arguments[1],
cacheKey = generateCacheKey(_url, _data),
cacheItem = cache[cacheKey],
isCacheValid = false;
if (cacheItem) {
var curTime = +new Date();
if (curTime - cacheItem.cacheStartTime <= cacheInterval) {
//如果请求时间跟缓存开始时间的间隔在缓存有效时间范围内,就表示缓存是有效的
isCacheValid = true;
} else {
//否则就把缓存清掉
delete cache[cacheKey];
}
}
if (isCacheValid) {
//模拟一个异步任务来返回已经缓存的数据
//通过$defer延迟对象,可以保证这个模拟任务返回的对象跟原始Ajax组件调用返回的对象有相同的API
//这是代理的关键:代理对象与被代理的对象应该具有相同API
//只有这样当我们取消代理的时候,不会对那些用了代理的组件进行修改
var $defer = $.Deferred();
setTimeout(function () {
$defer.resolve(cacheItem.res);
}, 10);
return $.when($defer);
}
//缓存失效或者没有缓存的时候调用原始的Ajax组件的同名方法去后台请求数据
return Ajax[i].apply(Ajax, arguments).done(function (res) {
//在请求成功之后将结果缓存,并记录当前时间作为缓存的开始时间
cache[cacheKey] = {
res: res,
cacheStartTime: +new Date()
}
});
}
})(i);
}
}
return proxy;
};
});
define(function (require, exports, module) {
var AjaxCache = require('mod/ajaxCache');
//创建代理对象
var Ajax = new AjaxCache({
cacheInterval: 10 * 1000
});
var count = 5;
console.log('时间点:第' + 0 + 's,定时器开始!');
var t = setInterval(function(){
if(count == 0) {
console.log('时间点:第' + (5 - count + 1) * 4 + 's,定时器结束!');
return clearInterval(t);
} else{
console.log('时间点:第' + (5 - count + 1) * 4 + 's:');
}
Ajax.get('../api/data.json', {
name: 'felix'
}).done(function(res){
if(res.code == 200) {
console.log(5 - count + '. data is : ' + JSON.stringify(res.data));
}
});
count --;
},4000);
});
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有