了解 JavaScript 事件处理和 ajax 请求

Understanding javascript event handling and ajax requests

本文关键字：ajax 请求 事件处理 JavaScript 了解      更新时间：2023-09-26

我试图通过尝试示例来学习javascript，但放弃了，因为我无法理解事件处理和回调的想法。

这是我试图解决的问题。1. 我有一张图表（高图表.js）2. 我期待来自服务器的数据3. Javascript将向服务器发出数据点请求4. 数据必须附加到图表中

我怎样才能做到这一点？您有什么可以推荐的书籍或文章吗？我的困惑主要是，回调如何更新全局对象并进而导致 elemetns 刷新？

使用 jQuery，您可以使用调用 $.get（） 从服务器获取数据。我不知道您使用的是 API 还是仅使用 csv 文件，因此使用 csv 的调用可能是这样的： 

$.get('/url/to/file.csv', function (data) {
    $('#container').highcharts({
        data: {
            csv: data
        },
        title : "Some title",
        // etc.
});

我不知道是不是你要的东西。我留下了一个指向 ajax 示例的链接，可以帮助您。

  1. 在 html/jsp/php 页面中包含高图表.js和所需的 js 文件

  2. 服务器应根据请求将 xml 或 JSON 数据（需要在高图表中显示）返回给客户端。在这里，响应标头很重要。

     application/json
 text/xml

  3. 使用 jQuery 的 $.ajax（） 函数从服务器获取数据（XML 或 JSON 格式），以在高图表中分配以下值

     xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }

 series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]

  4. 在页面加载/任何其他事件时将HighCharts绑定到div容器

     $(document).ready(function(){
     $('#container').highcharts({
         ....
     });
 });

    确保网页有容器

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

仅此而已

相关文章：