ajax 一次请求

在网站开发中经常会用到ajax，从执行效率上应该注意一些问题。例如：

 

 

 

 

原始是每次切换一次选项都会发起请求，这样会降低效率，我们可以将请求后的数据保存下来，然后下次根据请求地址直接获得请求内容，这样同url每次只需请求一次。

 

为此专门写一个JQ插件来做这件事就很有必要。插件具体内容：

 

 

(function($){
    //存放請求過的地址
    var _request_list = Array();
    jQuery.ajaxOnce = function(options){
        //與jquery ajax參數保持一致
        var settings = {
            type: "POST",
            url: "",
            data: "",
            cache: true,
            async: true,
            success: ""
        }
        if(options){
            jQuery.extend(settings,options);
        }
        //回調
        var _successfun = settings.success;
        //驗證是否已請求
        var _msg = validReq(settings.url);
        if(_msg){
            if(typeof _successfun == "function"){
                _successfun(_msg);
            }
        }else{
            //執行ajax請求
            jQuery.ajax({
                type: settings.type,
                url: settings.url,
                data: settings.data,
                cache: settings.cache,
                async: settings.async,
                success: function(msg){
                    addContent(settings.url,msg);
                    if(typeof _successfun == "function"){
                        _successfun(msg);
                    }
                }
            })
        }

        //檢查請求是否存在
        function validReq($parm_url){
            for($_i = 0;$_i < _request_list.length; $_i++){
                if(_request_list[$_i]['url'] == $parm_url){
                    return _request_list[$_i]['content'];
                }
            }
            return false;
        }

        //添加指定url內容
        function addContent($parm_url,$param_content){
            _combin = Array();
            _combin['url'] = $parm_url;
            _combin['content'] = $param_content;
            _request_list.push(_combin);
        }
    }
})(jQuery)

 

 

 

我只是将JQ自带的AJAX函数封装了下，具体调用和原来调用AJAX是一样的，只不过调用方式由jQuery.ajax换成了jQuery.ajaxOnce。

 

后续：

如果需要将数据长时间保存，可以利用本地存储将数据保存至本地，网上开源程序APC.js专门用来处理这种需求，并合理地利用不同浏览器的特性，详细内容：http://vquickphp.com/?a=blogview&id=33

 

• 下一篇jquery 菜單擴展