ajax刷新很慢

时间:2013-02-18 05:23:56

标签: javascript jquery ajax

JAVASCRIPT

JEASearch = new Class({

Implements: [Options],

        form: null,

        forceUpdateLists : false,

        options: {
            fields : {
                filter_search : "",
                filter_area_id : 0,
                filter_department_id : 0,
                filter_town_id : 0
            },
            useAJAX : true
        },


        initFieldBehavior : function(fieldName) {
            if (this.form[fieldName]) {
                if (typeOf(this.form[fieldName]) == 'element') {
                    var field = document.id(this.form[fieldName]);
                    field.addEvent('change', function(event) {
                        this.forceUpdateLists = false;
                        this.options.fields[fieldName] = field.get('value');
                        this.refresh();
                    }.bind(this));

                } else if (typeOf(this.form[fieldName]) == 'collection') {
                    if (fieldName == 'filter_amenities[]') {
                        Array.from(this.form['filter_amenities[]']).each(function(item) {
                            item.addEvent('change', function(event) {
                                var index = this.options.fields.filter_amenities.indexOf(item.get('value'));
                                this.forceUpdateLists = true;
                                if (item.get('checked') && index == -1) {
                                    this.options.fields.filter_amenities.push(item.get('value'));
                                } else if (!item.get('checked') && index > -1){
                                    this.options.fields.filter_amenities.splice(index, 1);
                                }
                                this.refresh();
                            }.bind(this));
                        }.bind(this));
                    } else if (fieldName == 'filter_transaction_type') {
                        Array.from(this.form['filter_transaction_type']).each(function(item) {
                            item.addEvent('change', function(event) {
                                this.forceUpdateLists = true;
                                if (item.get('checked')) {
                                    this.options.fields.filter_transaction_type = item.get('value');
                                }
                                this.refresh();
                            }.bind(this));
                        }.bind(this));
                    }
                }
            }
        },

        refresh: function() {
            if (this.options.useAJAX) {
                var jSonRequest = new Request.JSON({
                    url: 'index.php?option=com_jea&task=properties.search&format=json',
                    onSuccess: function(response) {
                        this.appendList('filter_area_id', response.areas);
                        this.appendList('filter_department_id', response.departments);
                        this.appendList('filter_town_id',response.towns);

                        this.form.getElements('.jea-counter-result').each(function(item){
                            item.set('text', response.total);
                        });
                    }.bind(this)
                });

                jSonRequest.post(this.options.fields);
            }
        },

        reset : function() {
            this.options.fields = {
                filter_search : "",
                filter_area_id : 0,
                filter_department_id : 0,
                filter_town_id : 0

            };

            for (var fieldName in this.options.fields) {
                if (this.form[fieldName]) {
                    if (typeOf(this.form[fieldName]) == 'element') {
                        var field = document.id(this.form[fieldName]);
                        if (field.get('tag') == 'select') {
                            field.set('selectedIndex', 0);
                        }
                        field.set('value', '');

                    } else if (typeOf(this.form[fieldName]) == 'collection') {
                        Array.from(this.form[fieldName]).each(function(item) {
                            item.set('checked', '');
                        });
                    }
                }
            }

            this.refresh(fast);
        },

        appendList : function(selectName, objectList) {
            if (this.form[selectName]) {
                var selectElt = document.id(this.form[selectName]);
                // Update the list only if its value equals 0
                // Or if this.forceUpdateLists is set to true
                if (selectElt.get('value') == 0 || this.forceUpdateLists) {
                    var value = selectElt.get('value');

                    // Save the first option element
                    var first = selectElt.getFirst().clone();
                    selectElt.empty();
                    if (first.get('value') == 0) {
                        selectElt.adopt(first);
                    }

                    for (var i in objectList) {
                        if (objectList[i].text) {
                            var option = new Element('option', objectList[i]);
                            if (objectList[i].value == value) {
                                option.setProperty('selected', 'selected');
                            }
                            selectElt.adopt(option);
                        }
                    }
                }
            }
        }

    });

以上代码适用于我网站的搜索栏。当我选择省/区/城市时 - 那些选择的内容打开得非常慢,当我选择另一个省而不点击搜索按钮时,需要一些时间来打开区和城市......我粘贴了上面的JAVASCRIPT代码。你能解释一下是什么原因吗?

MY SITE

1 个答案:

答案 0 :(得分:0)

查看Chrome开发工具中的网络标签,它会立即将请求记录到服务器,但服务器响应速度不是很快。在我的连接上,我的每个响应大约需要500毫秒,最多超过2秒。

配置您的服务器端代码。看来你正在使用PHP。

Simplest way to profile a PHP script