您如何在JavaScript中进行Ajax调用

Question

我正在构建一个仪表板，该仪表板的顶部将显示每月，每周和实时数据的按钮。

<div class="zoom_controls"> 
                              <a class="profile" id="monthly_data" href="#" data-chart="line" data-range="6m">Monthly</a>
                              <a class="profile" id="weekly_data"href="#" data-chart="line" data-range="3m">Weekly</a>
                              <a class="profile" id="real_time" href="#" data-chart="line" data-range="1m">Real Time</a>
</div>
<div class="main" id="chart" style="width:700px; height:300px;"></div>

这是调用php文件以获取数据并将其插入到highcharts中的javascript：

function cpu_current() {
                //current_cpu_data.php retrieves the data from a flat file
        $.getJSON('current_cpu_data.php', function(data) {
        var chart = new Highcharts.StockChart({
         chart: {
                borderColor: '#98AFC7',
                borderRadius: 20,
                borderWidth: 1,
                renderTo: 'chart',
                type: 'line',
                marginRight: 10,
                zoomType: 'x'
            },

            exporting: {
            enabled: true
        },
           legend: {
            enabled: true,
            backgroundColor: '#FCFFC5',
            borderColor: 'black',
            borderWidth: 2,
            width: 500,
            shadow: true
        },
        plotOptions: {
            series: {
                lineWidth:1
            }
        },
            rangeSelector: {
                enabled:false              
            },

            scrollbar: {
                    enabled: false
                    },
            navigator : {
                enabled : false
            },
            xAxis: {
                gridLineColor: '#EEEEEE',
                gridLineWidth: 1
            },
            yAxis: { // Primary yAxis
                labels: {

                    style: {
                        color: 'blue'
                    }
                },
                gridLineColor: '#EEEEEE',
                gridLineWidth: 0,
                tickInterval: 20,
                min:0,
                max:100,
                plotLines : [{
                    value : 70,
                    color : '#FF3300',
                    dashStyle : 'line',
                    width : 1,
                    label : {
                        text : 'Threshold=70%',
                        align: 'right',
                        style: {
                        fontWeight: 'bold'
                        }
                    }
                }],
                title: {
                    text: '% CPU Utilization',
                    style: {
                        color: 'blue'
                    }
                }
            },

            credits: {
                enabled: false
            },

            title: {
                text: 'CPU',
                style: {
                    color: '#333000',
                    fontSize: '14px'
                }
            },
            subtitle: {
                text: '10 minute peaks in last 24 hours'
                },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b><br>',
                valueDecimals: 2
            },
            series:data

    });
    });
}

在这里，我可以使用jquery click事件在不同的标签之间进行切换：

$("#monthly_data").click(function() {
        hmms_cpu_current();
    });
    $("#weekly_data").click(function() {
        hmms_cpu_weekly();
    });
    $("#real_time").click(function() {
        cpu_current();
    });

我的问题是，当用户仅对real_time感兴趣并单击并将其保留在那里时，我需要cpu_current（）通过ajax调用自行更新。 如果用户单击monthly_data并将其留在那里，则需要停止cpu_current（）。

给定上面的代码怎么办？

Answer 1

如果您使用的是MVC模型，则可以通过特定javascript函数的onclick方法使用这样的Ajax，

<script type="text/javascript">
  function hmms_cpu_current() {
    $.ajax({
        type: 'GET',
        async: false,
        url: 'yourcontroller/youraction',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (data) {
            var obj = $.parseJSON(data);

            $.each(data, function (i, item) {

                alert(item.text) // do your stuff with returned value
            });


        },
        error: function () {
            output.text('There was an error loading the data.');
        }
    });
}

Answer 2

我将添加一个Javascript Timer（）或setTimeout（）来重新发送ajax调用并更新页面。

您还可以为用户提供执行此操作的选项，并将其放入功能中。

如果您给计时器一个ID，您也可以停止并启动它。

Answer 3

修改所有函数以返回jqXHR如下所示：

function cpu_current() {
                //$.getJSON return jqXHR, you could use it to abort ajax.
       return $.getJSON('current_cpu_data.php', function(data) {
              //All your code
}

您的事件处理程序中的使用abort ：

var currentjqXHR;

    $("#monthly_data").click(function() {
            if (currentjqXHR){
               currentjqXHR.abort();//abort current ajax
            }
            currentjqXHR = hmms_cpu_current();
        });
        $("#weekly_data").click(function() {
            if (currentjqXHR){
               currentjqXHR.abort();//abort current ajax
            }
            currentjqXHR  = hmms_cpu_weekly();
        });
        $("#real_time").click(function() {
            if (currentjqXHR){
               currentjqXHR.abort();//abort current ajax
            }
            currentjqXHR  = cpu_current();
        });